I have total four pages: Page1, Page2, Page3 and Page4. Page1 and Page3 have select menus. When I select a value on Page1 and move to Page2 and again come back to Page1, the value which I selected earlier, retained. But when I select a value on Page3 and move to Page4 and again come back to Page3, the value which I selected earlier, is not retained. It get reset to first value and the data is refreshed accordingly. The code for Page1 and Page3 are same for select menu.
Page1 Select Menu code:
Page3 Select Menu code:
Even though the code is same on Page1 and Page3, why the select menu behave differently? Please help...thanks in advance.
Update: I tried to put the code but turned out to be the value only. How to put the code?
Please provide a test page. You can find our JS Bin template in the Contributing Guidelines.
Thanks for your reply.
I tried to create test page by using JS Bin template but unsuccessful. To demonstrate the issue, I have 2 html files and 1 JS file. I was able to put 1 html file and 1 JS file which run successfully but how to put 2 html file?
Here is the URL for 1 html file and 1 JS file: http://jsbin.com/owodon/1/edit
Sorry! Made a mistake by clicking the wrong button which has closed my issue. My issue is still there and I am looking for a solution.
That "Coment & Close" button is annoying, I know ;-)
The easiest way is to open the JS Bin on 4 tabs in your browser. Each url will update to a new version as soon as you start editing, but won't change as long as you keep the JS Bin open. Use the full url's for your links.
Now I know that you use a single page model, I think I also know the cause of your problem. The first page that you load always remains in the DOM. Other pages are removed from the DOM after you leave them. That's why you see the initial value of the select if you visit those pages again.
Because there can be more than one page in the DOM at the same time you should also make sure you use unique ID's for the select and listview on all your pages.
Simple solution is to set data-dom-cache="true" to prevent the pages from being removed. Downside is that it will increase the DOM size. Other solution is to store the value of the select as data attached to the body element.
Related pages in the docs:
data-dom-cache="true" - http://jquerymobile.com/test/docs/pages/page-cache.html
jqmData() - http://jquerymobile.com/test/docs/api/methods.html
I am closing this issue, because I don't think this is a bug. To get more help with this you can post on the forum.
BTW - I recommend you to update to jQuery Mobile version 1.1.1 or 1.2.
Thank you very much for your quick reply. Greatly appreciated!
Previously, I have tried data-dom-cache="true" but it was not working. Today, I tried again with data-dom-cache="true" and jQuery Mobile version 1.2.0 but still not working. Then I have cleared the cache (Empty the cache and Delete cookies and other site and plug-in data) of the Chrome browser and it worked. Once again, thanks for your help.
One more thing. When I used jQuery Mobile version 1.2.0, the select dropdown was visible without clicking it. It happened to all the pages where I have used select dropdown. Then I used jQuery Mobile version 1.1.1 and the problem disappear. I am not sure whether it is a bug in jQuery Mobile version 1.2.0. This is just for your info.
Have a nice day!
I am glad this solved it for you. Best way to test on Chrome is to open a new incognito window, because in that mode it doesn't cache pages.
After updating your test page to jQuery Mobile 1.2.0 I didn't see the issue with the select menu: http://jsbin.com/owodon/2
You use a custom select menu in which case we hide the native dropdown menu. Is the problem that the custom menu is already visible or that the native dropdown menu isn't hidden?
What version of jQuery core did you use and on what OS / browsers did you see the issue?
I found the root cause of the select dropdown which appear without clicking it. The problem was the stylesheet version. I used jquery.mobile-1.2.0.min.js with stylesheet jquery.mobile-1.1.1.min.css. I forgot to change the stylesheet version. Once I changed the stylesheet from 1.1.1 to 1.2.0, the problem resolved.
I have changed my test page using jquery.mobile-1.2.0.min.js with stylesheet jquery.mobile-1.1.1.min.css for the demonstration purpose : http://jsbin.com/owodon/7/edit
jQuery Core: 1.7.1
Sorry to bothered you again!
After implementing data-dom-cache="true", my problem of retaining the select value has been resolved but it has created another problem. Here are the steps how the problem shows up:
Another problem I am facing is of refreshing the page. When I refresh the page, it just keep showing the loading icon. The page is never loaded.
My problem of refreshing the page has been resolved. It was due to the use of window.my_config which I have use for global variable. I removed it and problem resolved.
Please do help for my first problem of not showing the data when I use data-dom-cache="true" on my Page 3.