need to refresh page in jquery mobile

Question

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

Answer 1

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.

Answer 2

It's not a solution but it works for my problem.

By using a form post instead of an anchor link, I managed to prevent the cached page from loading.

<!-- <a href="index.php?p=6_2"  data-role="none"><img src="images/large_red_arrow.png" /></a> -->
<form action="index.php?p=6_2" method="post" data-ajax="false">
    <input data-role="none" id="view-button" value="view" name="view" type="image" src="images/large_red_arrow.png" alt="View"/>
</form>