AJAX Insertion - need default jquery-mobile styles
I have a type of hierarchical select for regions. The first select box gets displayed. Let's call it "continents" and define it as: <select name="continents" id="continents"> <option value="1">Africa</option> <option value="2">North America</option> ... </select> The second select box (which is dependent on which continent you select) contains a list of countries and is generated by a PHP page server-side and accessed via an Ajax call. The functionality I have implemented works fine. The select
Form submit button in JQuery Mobile popup does not do post back on first click
Hi, The popup sign in form does not submit correctly. PROBLEM: See subject title. REPRO STEPS: 1. Load a page with a form popup such as the sign in code, taken from http://jquerymobile.com/demos/1.3.0/docs/widgets/popup/: 2. Click the button to open the popup. 3. Click the Sign In button on the popup. 4. Notice that a post back did NOT happen. 5. Repeat steps 1 - 3. Notice now that the post back DID happen. WORKAROUND: The workaround I discovered is that the popup submit button will work the first
jQuery 2.0.0 compatibility
jQuery 2.0.0 is released and it looks like it is not compatible with jQuery mobile... I get error `Uncaught TypeError: Cannot read property 'options' of undefined` line 10313 of jqm 1.3.1. The error seems to be about getting the theme for the panel. I have a panel like this in the html: <div data-theme="a" data-role="panel" id="panel" data-animate="false"></div> Hope jqm becomes compatible soon.
Panel on Samsung note only opens once
Hi I'm using 1.3. Found an issue with the panel only opening once on the Samsumg Note.... it can be opened and closed but will not reopen then. Works fine on any other device I tried so far including older Android versions. JS function call also fails. Any ideas?? Ta Ian.
Swipeleft events being fired on swiping diagonally
Hi In my application if the user swipes diagonally or scrolls the content the swipeleft or right events are fired? what is the possible solution for this on both iPhone and android. Using the following files jquery.mobile-1.2.0.min.css jquery-1.8.2.min.js jquery.mobile-1.2.0.min.js Please help Thanks Shruti
Flip Book
I am trying to create flipbook for mobile using jquery. I have created that but facing following issue: 1. I want that it should be auto-adjustable to mobile screen size. 2. It should have zoom feature. thanx in advance.
JQUERY MOBILE CONTACT FORM PHP error
Hi! I have a page in jquery mobile and I can not call the contact.js file on click the "send" button This is the HTML5 code: FILE: index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> ....... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
1.3.1 vs. 1.2 and attr("value")
Hi, I have a very little project that works very well under jqm 1.2 but same project has lost of issues under jqm 1.3.1. The project only uses jqm (no other third-party resources). One thing is this: $('#doAcceso').on('click', function(e) { showQry({acceUser: $('#acce-user').attr('value'), accePass: $('#acce-pass').attr('value')}); }; This function is excecuted when user click a button, and is supposed it has to read values from two input controls.
changePage in iOS 7 appears to be broken
Greetings. Just thought I would raise some awareness on a problem I encountered. the mobile.changePage function appears to not work with iOS7 beta. Originally I found this because I develop an app with phonegap, however, I debugged the issue, and I can reproduce it in safari as well. If I call the changePage function, nothing happens, and it doesn't throw an error in the web inspector either; however, the page at that point stops responding to any navigation request. My hope is this is an
Problems changing page on wp8
Hi, I am creating an app on phonegap with jQueryMobile, I allready deployed the app successfully on android and iOS, today I created took it to windows phone 8 and I am not able to change pages after the second first transition anymore. I also tried it on windows phone 7, there it worked fine. For changing pages I am using $.mobile.changePage("#page_main"); I am using the newest versions of jquery, jquery-1.9.1.min.js and jquery.mobile-1.3.1.min.js, also my phonegap ist running under 2.7.0. Has
Preventing Panel widget from firing close events on page change
I've got some functions in the close event. This is getting fired every time I load a page via Ajax. If I have Ajax disabled, the close event is not fired. The issue here is these functions fire when the close event fires; which in this particular case, is inside the pageshow event. Any thoughts here on how to prevent that? Here's the code: $(document).delegate('[data-role="page"]', 'pageshow', function() { $('#side-panel').panel({ beforeopen: function() { updateOpenClose($('.nav-toggle'));
RTL Language issue when mixed with LTR
On this page you can see the issue: http://openmenu.com/m/menu-items.php?omf=36573290-c529-11e2-b6cf-00163eeae34c&m=470328&gi=2440219 Basically the RTL part at the bottom splits the price from the currency symbol which I can't figure out why. Generate code: <h2 class="menu_item_name ui-li-heading">محمرة <span class="sml_price">- 1.300 KD</span></h2> Why doesn't the price appear after the name (or fully before)?
Grouped column headers code example
Could you add a code example to the Table Reflow - Grouped column headers (http://view.jquerymobile.com/1.3.1/demos/#Groupedcolumnheaders) and to the corresponding API page (http://api.jquerymobile.com/table-reflow/)
radio button works only 1 time for all the different values
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <div
Reducing the gap between fieldset rows.
Hi, if I have a form with three fieldset rows of radio buttons how or is it possible to reduce the margin/padding/gap between each row? Thanks in advance.
Jquery grid listview demo page stopped working
I was intending to use this grid/listview layout for a new site http://view.jquerymobile.com/master/demos/examples/listviews/grid-listview.php, but the demo page isn't working any more (just shows lilsit view and not the grid on larger screens). Have tried it several different browsers and user-agents but it just stays the same. Not very responsive any more! Anyone have any ideas? Thanks, Jonty.
Jquery Mobile Panel Stops functioning after first use.
I have a simple Phonegap + Jquery Mobile app ive started developing. Splash screen loads, app starts In the header is a button to open a side panel for my menu. Click it once and the menu opens, click away and the menu closes. but from then on you cannot open the panel again the functionality simply doesn't work :( Here is the entirety of my code to see if someone can see the issue? It should be simple enough and i dont see any problem with the code that could cause the problem. <!DOCTYPE HTML> <html>
New Icons for jQuery Mobile
We have just released a huge icon set of 1200 glyphs that is available not only as PNG but also as a font. You can check it out and of course download it at http://www.webhostinghub.com/glyphs/ The set is absolutely free for both personal and commercial use and we hope that it will be interesting for jQuery Mobile users. We are also planning to add many more new icons and we would appreciate all your ideas on how to make this icon font better.
At startup - Uncaught TypeError: Cannot call method '_trigger' of undefined
I can't even start jquery mobile, the only thing I have is my index file, with my includes, yes my linking is right. Keep getting a white page and this error in google chrome Uncaught TypeError: Cannot call method '_trigger' of undefined <!DOCTYPE html> <html> <head> <title>Collect&GO</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0a3.css" /> <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
Using static jQuery Mobile Panel on all pages
I posted this question in Stackoverflow and thought should post here: jQuery Mobile Panel in static header Say I have a fairly complex menu in the JQM Panel that I need it to be accessible from every pages in the application. One way of implementing it is simply copy and paste the Panel code to each and every sub pages. Approach 1 - The brutal way This worked. However, it is only good for a small application with simple panel. Copying the big chunk of Panel code and applying in every other pages
Announcing jQuery Mobile tableview - plugin for responsive HTML table layouts
One thing I have found missing in JQM is a way to handle tabular data. There are some nice plugins available, but none for JQM specifically. I have written a plugin (widget and extension actually) to handle HTML tables in jQuery Mobile. Demo is here: http://www.franckreich.de/jqm/tableview/demo.html Code on Github: https://github.com/frequent/tableview There are two version of tableview (demo/github is the first one). The "no-func" version only handles the appearance of the table. Tables are responsive
Jquery Mobile 1.3 and Input Size issue?
I am using Jquery mobile 1.3. I have an input, <input style="width: 75px" type="text" /> The problem is that it's size is always large. How to make it small, http://jsfiddle.net/2bWfL/163/ <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
jQuery mobile swatches won't display in Dreamweaver cs6
I recently downloaded the most recent jquery and jquery mobile updates to Dreamweaver cs6. When I have something selected I go to the jquery mobile swatches panel and nothing is displayed. I have seen on other sites that other people have this issue but i'm still getting no answer. I downloaded jquery mobile 1.3.0 and jquery 1.9.1
jQuery Mobile on Windows 8 RT Surface tablets
What modifications are necessary to get jQuery Mobile apps to run on Windows 8 RT Surface tablets? I have not yet succeeded in getting a jQM + PhoneGap app to run on Windows 8 RT. Would appreciate suggestions from anybody who has succeeded in doing so... How to address Win 8 RT errors about "dynamic injection" of markup? This problem does not exist on Android devices for a jQM+PhoneGap app that works just fine on Android....
custom icon Jquery Mobile
I am developing Custom Icons for Jquery mobile, I see for every icon I develop, Jquery mobile puts round circle and grey background, when I apply it to my code. I don't want a circle around my icon, is there a way not to put circle around and just use it as transparent background. (attached image without circle around) I want this custom Icon Jquery mobile wrapping it to this
how to get jquerymobile styled textarea to shrink back
So, I am trying to respond to an event where the user wants to clear his inputs. If he has typed more than the number of rows, the textarea increases as expected. However, when he hits clear or I need to manually remove all the input (such as when a save occurs), the textarea does not go back to original size. I have tried .attr("rows", "2").. does not work. Is there a way to refresh this UI control? Thanks, TF
forcing fresh content
i've scoured the forum and the code looking for a way to for jq mobile to implement something like this <div data-role='page' data-fetch='always'> the goal is to have certain views always hit the server for new content. also, i want to preserve the history stack and transitions. this is obviously possible since the 1st fetch of a page exhibits all these properties, but every solution (removing the page on hide, forcing a reload on show, and rel=external) lose one or more of the desired behaviors.
1px gap after footer
Hello, i need a little help with footer. here is my code for footer: <div data-role="footer" data-position="fixed" data-theme="b"> <div class="footer"> <div class="seablue"></div> <div class="red"></div> <div class="gold"></div> <div class="blue"></div> </div> </div> And you can notice the 1px gap after: How to get it out, tried to do this with footer: margin-bottom: -1px padding-bottom: -1px but it seems it doesn't help,...
Linked listview with a split button
I wonder is it possible to create a linked list view with count bubbles having a split button at right?
listview in panels error
Hello, i need insert listview in panel because i need insert custom icon, but wen i try this the lisview sre see wrong brcause the size is standard. can i resize listeview for insert in panel? Another question: why when i use panel only effects overlay works, if i add push or reveal appears double panel. Thanks.
Flickering problem on input text
Hi, I have some strange flickering problem with input text control. i have a simple page with button on it and while pressing on that button i am opening popup that has listview and on last row of that listview i have input text field. While activating this page on iPad and trying insert text to this input, the page is flickering and jumping for each key presseed on virtual keyboard. i am using jquery mobile version 1.3.1 any ideas? this is the full page source: <head> <title>Basic Mobile Page</title>
Getting current url on pageinit event
Hi, I would like to know how to get current url on pageinit event properly, since both window.location and history.getActive() returns previous url. It seems that the newest url is applied as the last thing after changing page. I found one way to get it by: $(document).on("pageinit", function(e) { var url = e.target.baseURI; }); Unfortunatly, it does not work on some devices :( I use the newest jQuery Mobile and jQuery.
jQuery Mobile iPhone app stuck - have to reset phone
I have noticed this bug on my iPhone/iOS simulator. If I let the app sit long enough, my screen will dim and then will wake up when I touch the screen again (all normal). If I wait a few minutes and I try to hit the Home button on the iPhone nothing happens. I have to restart my phone in order for it to become functional again. I am using the following versions. Any ideas? <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" media="screen" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
What is best solution to make fluid text with jquery mobile?
What is best solution to make fluid text with jquery mobile? I have made images responsive using img {max-width:100%} how to make text fluid? --- Jitendra Vyas Senior Front End Developer SKARP ApS http://skarp.dk http://in.linkedin.com/in/jitendravyas http://twitter.com/jitendravyas
dynamic page urls not working in 1.3.1?
I have an application currently using jQM 1.1.1 and I am in the process of updating to 1.3.1. This application uses AJAX to get data and dynamically populates ui-page contents, based on the example at http://jquerymobile.com/demos/1.1.1/docs/pages/page-dynamic.html (which is also present in the 1.2.0 docs). However, in 1.3.1, the search portion of the hash (after the ?) is stripped out when the url is updated during $.mobile.changePage() - this appears to be intentional based on comments in the code.
ListView with alphabetical index
Hello! Is there any facility to create alphabetical indexes on a long listview? The effect I'm talking about is shown on iOS here: http://i.imgur.com/8BlkG.jpg I didn't know if anybody else had tried to create this functionality, of if there is a recommended way to allow users to jump to specific sections of a large list view. Thanks!
Preannouncement jQuery Mobile 1.4 alpha release
Hello jQuery Mobile users, In the week of July 15 we will release jQuery Mobile 1.4 alpha. We made some big changes to improve performance and we will also introduce a new default theme with new icons. Of course you will find all highlights and complete changelog in the blog post that comes with the release. I just wanted to inform you about the planning and ask you to start with upgrading and testing as soon as the alpha release is out. Looking forward to your feedback! Thanks, Jasper PS. See our contributing
Response with empty styles
I am using http://code.jquery.com/jquery-1.8.2.min.js http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js to make a design around photos of people on this page http://www.videochatforfacebook.com/vip-members and it looks really cool, but it has a problem. In the top menu is a button Search, press it, after select parameters you want (like Gender, age etc) and press button "search" at the end of the form, it will work perfectly, system will give you a list of people only accordingly to
jquery mobile 1.3.1 data-inline="True" not working
I've upgraded my application from jquery.mobile 1.1.0 to 1.3.1 and run across a problem. (I'm using asp.mvc 3) I've got buttons I create using the ActionLink() extension method that accepts html attributes as IDictionary<string, object>. One of the attributes I specify is "data-inline"=true and in the resulting html page it renders as data-inline="True" With jquery.mobile 1.1.0 this works, but with 1.3.1 it does not (the data-inline is ignored). I've worked around this by specifying the value of
Link out of history
Hello, Is there a way to make a link (ajax link) that is not keep in the history ? As we have the changeHash option in the changePage method, is there any wtrribute we can use in a html link ? For instance : <a href="#nextHiddenStep" data-no-history="true">test</a> Is there a sort of "data-no-history" that we can add to say, don't put this url in the history ? My case is : the link is to a "wait page" that make a changePage just few seconds after. So when the back button is used, I don't want to
Next Page