CODEWITHSUNDEEP
jqueryjquery-mobile
emersonthis
emersonthis

Reputation: 33368

jQuery mobile: new content on internal page transition

I'm trying to write a simple app that has several internal pages. From #page2 I want to return to #page1 AND reload it so that content generated by javascript will refresh.

<body>
<div id="page1" data-role="page">
    <script type="text/javascript">
    //Javascript spits out something new every time
    </script>
</div>

<div id="page2" data-role="page">
    <a id="page1button" href="page1" data-role="button">go to page1</a>
</div>
</body>

The only way I can make this work is by adding rel="external" to #page1button. The content refreshes BUT there is an abrupt page reload that isn't sexy. Is there a way to achieve the same results, but still use jqm's transitions?

I know this is a popular question and I've done a lot of research, including the jqm documentation on changing pages, but nothing I've tried seems to work. $.mobile.changePage() appears to have an option: reloadPage:true which claims to do exactly what I need, but it doesn't work. I've even tried $.mobile.loadPage() BEFORE .changePage() and still no luck. Help!

UPDATE:

I'm pretty sure this isn't a caching issue because here's what my page element looks like and it STILL shows the same *$#%&ing thing every time I return to the page:

<div id="page2" data-role="page" data-cache="never" data-dom-cache="false"> ...

I'm thinking that the javascript block only gets called once when the html page loads, rather than each time I return to that div using jqm. Maybe the way to solve this is by figuring out a way to force that block of code to run again. Any ideas?

UPDATE:

Good news: I found the page which speaks to this EXACT issue: http://jquerymobile.com/test/docs/pages/page-scripting.html

Bad news: What it claims will work...

$( document ).delegate("#page1", "pageinit", function() { alert('RE-RUN JAVASCRIPT'); });

...DOESN'T!! I placed this function in the head of my html file and it only runs once.

UPDATE:

Still struggling with this. I put some code up here: http://dl.dropbox.com/u/28286159/index.html

To keep things simple, I just did two pages with one of them containing a <script> that prints out: document.write(Math.random());

You you'll see that the number doesn't change.

Upvotes: 5

Views: 6511

Answers (4)

bizi
bizi

Reputation: 3457

use pageshow (or better, pagebeforeshow) instead of pageinit.

pageinit is only called once to avoid unnecessary re-apply jQuery mobile UI. While pageshow and pagebeforeshow is called everytime the page is shown, and that is what you need to mimic the page refresh in your case.

Further reading here: http://api.jquerymobile.com/category/events/

and here is the modify of your index for quick visual: http://jsfiddle.net/tSYUK/

Upvotes: 0

dayakar
dayakar

Reputation: 66

In this case both "home" and "predict" pages will load into the DOM initially.

In order to keep the size of the browser’s DOM to a minimum, jQuery Mobile automatically removes any dynamically-loaded mobile page from the DOM once it’s been transitioned out of view. This only applies to mobile pages loaded dynamically via Ajax; pages already in the markup of a multi-page document aren’t removed.

So your predict page will be available in the DOM all the time. In order to update that content on the page, update the content and call the appropriate refresh method, so that jquery mobile will enhance the DOM.

Upvotes: 0

codaniel
codaniel

Reputation: 5253

Here is a solution. Your #predict page is still in the dom since its all one page. So yes your math.random code is only executing once. Just bind the random number to a click of the "tell me" button and update #prediction with a new random number generated by the click.

<script>
    $(function(){   
        $('#tellme').click(function(){       
            randomNumber = Math.random();
            $('#prediction').html(randomNumber);
            $.mobile.changePage('#predict', {transition:'pop'});
        });
    }); 
</script>
<section id="home" data-role="page">
    <div data-role="header">
        <h1 class="">HOME</h1>
    </div><!-- /header -->

    <div data-role="content">
        <div id="iknow">Here's a random number...</div>

        <a href="#" data-role="button" id="tellme">TELL ME!</a>

    </div><!-- /content -->
</section><!--#home-->
<section id="predict" data-role="page">
    <div data-role="header">
        <h1 class="">PREDICT</h1>
    </div><!-- /header -->

    <div data-role="content">

        <div id="prediction"></div>

        <a id="tryagain" href="#home" data-role="button" data-transition="pop">Try again.</a>

     </div><!-- #content -->
</section><!-- #predict -->

Upvotes: 3

shanabus
shanabus

Reputation: 13115

If you want a page transition to work then you need to prefetch the external page.

<a href="prefetchThisPage.html" data-prefetch> ... </a>

The documentation goes on to say this exactly:

DOM size management

For animated page transitions to work, the pages you're transitioning from and to both need to be in the DOM. However, keeping old pages in the DOM quickly fills the browser's memory, and can cause some mobile browsers to slow down or even crash.

Documentation: http://jquerymobile.com/test/docs/pages/page-cache.html

Upvotes: 0

Related Questions