Home/ Questions/Q 8190589
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:42:25+00:00

In my jQuery Mobile I have 2 pages, index.html and test.html. There is a

  • 0

In my jQuery Mobile I have 2 pages, index.html and test.html. There is a <p> tag in the index page which has a class, so when the <p> tag is clicked on my javascript, it wants to load test.html.

But with jQuery Mobile when the index page loads the test page, it is not in the DOM. So in order to go to the test page and replace the contents of a div in test.html it must first be loaded into the DOM. So here is what I am doing:

When try2 is clicked, I do a load page to get it into the DOM, then I replace the div with the new html, and then I change to the page. The html of the div never changes.

$('.try2')
  .click(function(){
    $.mobile.loadPage( 'test.html', { showLoadMsg: false } );
    $('#mytest').html('i am here now').fadeIn('slow');
    $.mobile.changePage( "test.html", { transition: "slideup"} );
  });
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Pre-fetch the page by using the data-prefetch attribute on a link that points to the second page. Docs: http://jquerymobile.com/demos/1.1.0/docs/pages/page-cache.html

    Then bind to either the pageinit or pageshow event to update the div before the second page is transitioned into view.

    Your current code won’t work because the first two lines in your event handler are asynchronous, so to use them you would have to utilize the callback functions for the asynchronous functions.

    Update

    If you want to pre-cache a page but don’t have a direct link to the page, you can always create a dummy link and hide it from view:

    <a data-precache href="page2.html" style="display:none;"></a>
    • 0