Home/ Questions/Q 7664027
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T14:11:56+00:00

I’m trying to write a simple app that has several internal pages. From #page2

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 -->
    • 0