Access-Control-Allow-Origin on local file system
Hi, I create a jquery mobile web this work great on web server, but when I run this on local filesystem (file://), when i change from one page to another, I have this error. XMLHttpRequest cannot load file:///C:/Users/Wvista/Documents/test.hml. Origin null is not allowed by Access-Control-Allow-Origin. I know that this is a problem with permission, but is strange because all document are on same directory. David.
jQuery Mobile on MyTouchSlide 3g, problem with back button
I've been following the jQuery mobile project quite excitedly as I have an application that I need to port to a mobile version. However, since the alpha 1 release until the most current alpha 3 there has been a major problem with the back button. Whenever I navigate off of the landing page to a sub-section, i cannot navigate back. Pressing the back button in the mobile template or on my phone causes it to go back to the last page I was looking at before jQuery. It is not catching the back event
Changing default theme
Alpha 2 looks awesome! I have a question about changing the default theme from c to something else (like a or b). I can do this manually, by setting the theme of the page. However, submit buttons and the like, which are being generated by my webapp render in theme c regardless of what I set the page at... Is there a way in the init to tell it to use a different default theme, like: $(document).bind("mobileinit", function(){ $.mobile.theme = 'a'; });
How to sell App made with jQuery mobile?
Is there any way to transform web application written with HTML/PHP/jQuery mobile to a native iPhone app?
jQuery mobile and iframes to load external websites
I'm using some kind of modal window with an iframe to load external websites into my webapp. If somebody clicks an external link, the modal window will pop-up and the source of the iframe changes to an URL. In my example i'm using Google as an external URL: <a href="http://www.google.com/" rel="external" data-ajax="false">Link to Google.com</a> My modal window: <div id="modal"> <header> <span class="close">Close</span> <h1>External webpage</h1> </header> <iframe id="external" src="about:blank"
data-role style lost after .load()
hello, after a reload of a div by using .load() the data-role mobile style is lost :-( i use this code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="../js/jquery.mobile-1.0a3/jquery.mobile-1.0a3.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript" src="../js/jquery.mobile-1.0a3/jquery.mobile-1.0a3.js"></script>
Allowing Users to Change Data-Theme
Sorry in advance if my code looks idiotic. I'm new to javascript, but trying to learn! I would like to have buttons on my mobile page that, when clicked, dynamically input their value (a, b, or c) into the data-theme's value and thus change the page's theme. I'm sure this is ridden with errors, but does anyone know how I can do this? <script> var themeStyle = data-theme.value $("button").click(function () { $(themeStyle).replaceWith(button.value); }); </script> </head>
Ajax Error Handling Breaks Everything
I've noticed that when jQuery mobile attempts to load a page and either times out or an error occurs on the back end (500, 404, etc) it displays the "error loading page" message but then everything on the page breaks. For the most part attempting to click any of the jQuery formatted links on the page doesn't trigger any action, only clicking on actual data-role=none links seem to do anything. Is there any way to override the default jQuery mobile ajax error handling?
Nested list header themes/data-position=fixed/list data-themes...how?
I can't seem to apply data-themes or data-position=fixed to the headers of a nested list or data-themes to the list items, even with listview("refresh"). I think it's kind of...odd...that the nested lists don't inherit data-themes or other settings from the parent. I'm not sure how usable that is. As for the header attributes, I'm trying to set them with: $(".ui-header").attr("data-position","fixed"); $(".ui-header").attr("data-theme", "a");The attributes are appended, but they have no effect.
Binding events to buttons in a dialog
What is a good programming pattern for binding an event to buttons that are dynamically loaded via a dialog? For example, I'd like to bind the 'click' event to a dialog submit button when the site loads. Since the button is not yet present in the DOM, the binding never occurs. Is there a defacto standard for managing this type of problem with this framework?
Jquery Mobile Francophone
Bonjour à tous, En cours de développement de mon site en version Jquery Mobile sous Wordpress MU, j'ouvre ce topic en Français (en espérant que les administrateurs le conserve) afin que la communauté francophone puisse échanger sur ses problèmes pour la mise en place de sa WebApp.... Pour information voilà ce que je suis en train de mettre en place : 1-Blog sous Wordpress MU et Buddypress (existant) 2-Un Blog en sous-domaine sous Classipress (existant) 3-Le développement d'un thème avec le framework
jQuery Mobile Slider widget doesn't seem to handle fraction steps
If I set the "step" attribute of my original input element to something like "0.5," the slider will only take minimum steps of 1. Anyone else have this problem or create a fix?
jQuery mobile and asp.net
As a asp.net developer I've been playing around with jQuery mobile Alpha 1. Alpha 2 breaks my asp.net postbacks and I was thinking about how best to use asp.net and jQuery mobile together and wondering how others use (if at all) asp.net together with jQuery mobile? (MasterPages, postbacks, form submission, viewstate, etc., etc.)
Add an attribute to prevent particular pages from caching
I ran into circumstances where I don't want certain pages in my app to cache. I think there should be an attribute that can be added to any div tag with date-role='page' such as data-cache="false" which would prevent that page from caching. For my solution, I added a 'pagehide' binding in the dom ready event of the root index page for the app: $j("div[data-role*='page']").live('pagehide', function(event, ui) { if ($j(this).children("div[data-role*='content']").is(".command-no-cache"))
Multiple executions of script loaded in data-role="page" with pageshow event
I have script that is loaded in the data-role="page" area of my page. It contains an event that runs on pageshow ('#id').live('pageshow',etc) when i load the page the first time is fine, if I load it the second time from a link in the same parent page it executes twice. Any ideas
Is there an offering to SMS in the same way TEL works?
Hi, in order to make the smartphone make a phone call we just put tel in the href e.g.: <a href="tel:55555555">555555555</a> is there something similar for SMS? if not, how can I have my application send an SMS using the phone rather than a 3rd party gateway? thanks Matt
Problem with linking when running offline with application cache (manifest)
Hi, I'm developing a web app that will be placed and started from home screen on the iPhone and will need to work offline. I've added a application cache solution using a cache manifest file which lists all the files I need to run the web app offline. I've stripped the solution down to just two files: index.html and page1.html (and the js and css for jQuery to work). When specifying the files in the manifest I got a problem since the jQuery Mobile adds a hash to the link as in: index.html#page1.html
Theme Roller interchange
It would be nice if the theme roller schemes could create an interchange of basic colors to be passed between the original browser and the mobile version. (If they are not one tool in the end that is.)
JQM Gallery - gallery of jQuery mobile sites
Hey crew. While building jQuery mobile sites I found myself looking for examples that I could use for ideas and inspiration. Decided to build something similar to the many popular css galleries, but for jQuery mobile! I combed through forums here and found a few links, but if you have a jquery mobile site out in the wild be sure to submit it to the gallery. The site: jqmgallery.com Submit your jquery mobile site: jqmgallery.com/submit/ also: if you visit the gallery on your mobile device you'll
Icon only toolbar button
It is possible to have a toolbar buttons without an icon. But how do I create a button without text? I noticed that: <a id="btn-fav" data-icon="star" class="ui-btn-right" href="#" > </a>does the trick but leaves me with space after the icon. Leaving the text blank result in an odd formatted button. Someone an idea?
Scrollview how do I use it and where do I find it?
Hi, I want to add a scroll-view to my page but do not know how to do so. When I look at the example at http://jquerymobile.com/test/experiments/scrollview/scrollview-direction.html it points to files I do not have or know the full URL. Can anyone advise me on this as it looks as though using scrollview would be the best option for me. Thanks, Paul.
Phone number inside list item
I have a list (<ul data-role="listview">). In some of the list items, the content contains a phone number. iPhone automatically creates a link from these phone numbers. The problem is that once there's a link inside the <li> element, the behavior of that list item changes, and the phone number link is not displayed as intended. I could disable all phone number links using a meta tag but I'd rather not. Is there a way to embed a regular link inside an <li> element?
Decimal Steps with Range Slider?
Though HTML5's "range" input type does allow a step value that accommodates decimals, jQuery Mobile doesn't seem to respect that. It looks as if JQM just rounds the value up, which isn't good for my use. I am trying to use the following: <input type="range" name="HoursWorked" id="HoursWorked" value="1" min="1" max="24" step="0.1" /> As I said, JQM is just rounding my slider value, ignoring the actual step value. Is there a reason for this? Also, can I disable this behavior? This specific use requires
Show/Hide buttons by class loses formatting
Hi, I'm running into formatting issues when I toggle button visibility depending on context. Note, in the code below, the formatting for the button with myclass0 is unaffected, just the buttons with myclass1 and myclass2 as their visibility is toggled. But I cannot figure out why my code is pretty straightforward e.g. <a href="#" data-role="button" class="myclass0">Button 3</a> <a href="#" data-role="button" class="myclass1">Button 1</a>
problem using jquery mobile and jqplot on iPad
I have a problem using jquerymobile with jqplot on an ipad this is probably a jqplot problem but i thought i'd try anyway when i have loaded approximately 12 jqplot plots safari just quits, no error. i used latest versions of both jquery mobile and jqplot any thoughts on this anyone
Cache strategy
Getting cached most elements of a mobile web app/page is obviously important... right? Some time ago, when the first version of iphone was the only true "smart phone" I was trying to use jquery-core on a web app but discovered that mobile browser did not cache files over 21~27 kb. Someone known if this limitation is still there on modern phones? This jQuery mobile looks amazing!, Writing js without jQuery is no fun!
header not fixed on dynamic page
I use the following code on one of 10 internal pages. before I show the page 10 <li>s are dynamically appended to each of the 3 <ul>s in a pageshow event, and I do a listview refresh after this action. On this scrolling page the footer stays fixed but the header does not. What am I overlooking here? I am using the latest version of JQuery mobile. <div data-role="page" data-theme="b" id="statistics"> <div data-role="header" data-id="hdr" data-position="inline" data-position="fixed"> <a href="#home"
dynamic loading of images in very long listviews
Hi, in a scrollview I have a long list of listview with thumbnails. If the length of LI-Elems is bigger than 200 items, the webview crashs. Idea: <li><img src="dummy.png" data-fullimageurl="FULLURL"><h3>Title</h3><p>DESCRIPTION</p></li>And now: On event scroll => detecting which LI's are in viewport and src="dummy". For this images I want to replace the sources. In the facebook-app it works so in long. I have made tests. The problem is the length of list not the iamges. What we need is a dynamic
Styling the dialog box of alert function
Hello, When we now use the alert function, the dialog is still native. It's very useful when we have something like this dialog box, which appears as a layer on the current page (not totally hide the current page as the current dialog box of jquery mobile) and has the style of jquery mobile framework. I want to use this kind of dialog box to inform the users after a ajax call. Regards
Select Menus data-native-menu="true" Not working for Android
When I use data-native-menu="true" in iOS and Chrome, everything works as expected. However, if I use it within a fieldset on Android, the first drop-down in the fieldset works, but no drop-downs after that work at all.
Ajax navigation and authentication
Hi I'm using jquery mobile in an ASP.net mvc 3 site. I'm using authentication so the user has to log in when he visits the site. When the user logs in he is redirected to main page "/" but the address in the addressbar is : /Account/Logon#/Account/Logon (Account being the controller for the Logon site and Logon the view.) When the user refreshes instead of reloading the main page he is redirected to the logon page. How can I fix this ?
Getting generic content into a list view LI
I have a couple special cases where I would really like to place my own divs with my own basic styles into a list item (so I can still get the collapsible support.) I can sort of do it, but the automatic list view handling places the extra elements to the right of my divs automatically (for the button and aside span), using up valuable real-estate. Is there a way I can suppress the automatic list view magic, so-to-speak?
Using Symfony with jQuery Mobile, how can I suppress Hash Navigation for Symfony-redirections?
Hi, I am using the Symfony PHP framework with jQuery Mobile. To supress hash navigation in links, I can use rel="external". But how to achieve this with form submission? My Problem in detail: I have a login-form coming from (module/action:) user/login, which raises the view loginSuccess.php (all views in Symfony have the trailing ...Success.php so don't bother) When user completes the form, it is submitted to user/loginCommit where it is evaluated. If evaluation is fine, I redirect to album/index.
ui-icon-arrow-r not shown on samsung galaxy tab when changing from alpha 3 to alpha 4 and using local files
hi all, when I change from alpha 3 to alpha 4, the right arrow icon at the right of an unsorted list item disappears on my samsung galaxy tab when I use a local jquery.mobile-1.0a4.css file (I see solid filled grey circles in stead). When I go to the jquery mobile demo website it is ok, but when I rebuild the jquery demo website locally the arrow is gone. I found out that if I comment out three lines in the jquery.mobile-1.0a4.css file the arrow is show again: So when I use this original code from
Open/Close all in collapsible content markup
How could you dynamically open/close all items that are collapsed using data-role="collapsible"?
setting up div
trying to make html page with 2nd page caller having div inside the content area. somehow i isnt display properly. sharing code here. for the information it shows it has flash (Don't Worry) it interprete through js file and shows JS player instead flash. actaully i want to show 100% height and width filling up space between header and footer of the player. Here is the code of html : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="target-densitydpi=device-dpi,
Dynamic List based on location..
Is there a way to see a search enabled list that will display items ranked on how close they are to your current location? Thanks in advance forum
Tap events do not trigger on iPhone in jQuery Mobile a3.
I have a mobile site that I test on both chrome and the iPhone. The tap events that are binded to span, img, and anchor tags are not triggered on the iPhone but are triggered on Chrome. Tap events do trigger for both the desktop and iPhone when there is a data-role="button" attribute. Does anyone else have this problem or a possible solution? Thanks!
Select Dropdown Reset Issue
Has anyone been successful in calling .reset() on a dropdown? I've tried many different ways including using a reset button and nothing as worked.
Enable text wrapping for list items
Hi all, Excuse the n00bish question but I've been trying to do this for a few hours but can't seem to crack it. I'm coding a mobile version of a news site, and the article titles are always too long to display as list items on mobile devices (other than the iPad). I've lowered the text size for widths lower than 480, and decreased the padding on the left side of the icon, but the titles still don't fit. I'm trying to figure out how to change the CSS so that the text wraps to the next line rather
Next Page