Geek Answers Handbook

JQuery mobile: new content when going to the page

I am trying to write a simple application with several internal pages. From #page2I want to go back to #page1AND reload it so that the content generated by javascript is updated.

<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 to do this work is to add rel="external"in #page1button. The content is being updated, but there is a sharp reload of the page, which is not sexual. Is there a way to achieve the same results, but use jqm transitions?

I know this is a popular question, and I did a lot of research, including jqm documentation on changing pages , but there was nothing. "I tried, it seems to work. It $.mobile.changePage()seems to have the ability: reloadPage:truethat claims to do exactly what I necessary, but it doesn’t work. I even tried $.mobile.loadPage()BEFORE .changePage()and still have no luck. Help!

UPDATE:

I am sure this is not a caching problem, because my page element looks here, and 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"> ...

, javascript , html, , div, jqm. , - . ?

UPDATE:

: , EXACT: http://jquerymobile.com/test/docs/pages/page-scripting.html

: , ...

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

... !! html , .

UPDATE:

. : http://dl.dropbox.com/u/28286159/index.html

, , <script>, : document.write(Math.random());

, .

+5
4

. #predict . , math.random . " " # , .

<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 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 -->
+3

, .

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

:

DOM

, DOM. , DOM .

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

0

"home" "pred" DOM .

DOM , jQuery Mobile DOM . Ajax; arent .

, DOM . , , jQuery mobile DOM.

0

pageshow ( , pagebeforeshow) pageinit.

pageinitonly called once to avoid unnecessarily reapplying the jQuery mobile interface. So far pageshow, it pagebeforeshowis called every time the page is displayed, and that is what you need to imitate the page refresh in your case.

Read on here: http://api.jquerymobile.com/category/events/

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

0
source

More articles:


All Articles