I am facing some issues with jquery mobile .
When I move from my first page to second page it does not show the second page as it should be I need to refresh my page every time. It seems like its missing some CSS classes initially. I don’t understand why is this happening.
I am using http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css as CSS
http://code.jquery.com/jquery-1.6.4.min.js
http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js as JS.
On the same page I have this anchor tag
<a href="" onClick="showText()">showText</a>
showText() Method does not call first time and shows javascript error showText not defined but when I refresh the page it works fine.
Regarding showText():
You have to understand how JQM is working. In order to enable transitions et al, JQM pulls in and drops pages into the DOM. You start with your first page (sort of your BasePage), which is fully loaded with all .js/.css files and enhanced.
When you load the 2nd page, JQM only grabs what’s inside data-role=”page” id=”your-2nd-page” and adds this to the DOM after your first page! All scripts outside this div-tag as well as all .css and .js files in the header of the 2nd page will NOT be grabbed by JQM.
So, if your showtext() function is on the 2nd page outside of the page div or in a .js file only used in the 2nd page, it will not be grabbed and injected into the DOM, so your function does not work.
When you refresh your 2nd page, the 2nd page will be your fully enhanced BasePage, so all scripts on the 2nd page will be loaded, BUT now all scripts on the first page will not work, if you load the first page.
Solution: I’m putting all css/scripts in all pages. That way no matter where the user starts, everything needed is loaded.