jQuery mobile $(document).ready equivalent

ajax jquery-mobile document-ready

46,391

Solution 1

I spent some time on researching the same since JQM docs are not very detailed at this point. Solution below works fine for me:

<script type="text/javascript">
$('div:jqmData(role="page")').live('pagebeforeshow',function(){
    // code to execute on each page change
});
</script>

You have to implement your own checking flow in order to prevent multiple initialization since the code above will run on every page change

Solution 2

Bind to the "pageinit" event. From JQM docs: http://api.jquerymobile.com/pageinit/

Solution 3

The best equivalent of $(document).ready() is $(document).bind('pageinit')

Just have a look at the jQuery Mobile documentation : http://jquerymobile.com/demos/1.1.1/docs/api/events.html

Important: Use $(document).bind('pageinit'), not $(document).ready()

The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event. This event is explained in detail at the bottom of this page.

Solution 4

If you want the code to run on a certain page (I bet that's the case) you can use this pattern:

$('div:jqmData(url="thepageyouwanted.html")').live('pageshow',function(){
    // code to execute on that page
    //$(this) works as expected - refers the page
});

Events you can use:

pagebeforeshow starts just before transition
pageshow starts right after transition
pagecreate starts only the first time page is loaded

Solution 5

All the pageshow and pagebefore show events are called each time that it's displayed. If you want something that happens the first time, you can do something like this:

  $('#pageelementid').live("pagecreate", pageInitializationHandler);

Then in later on in your code:

  function pageInitializationHandler(event) {
      //possibly optional based on what exactly you're doing,
      //but keep it in mind in case you need it.
      //Also, this seems to need to be an exact duplicate of the
      //way you used it with the .live() method or jQ/jQM won't unbind
      //the right thing
      $('#pageelementid').die("pagecreate", pageInitializationHandler);

      //Do your actual initialization stuff
  }

I found this particularly helpful when you're doing html files with multiple JQM "pages" in them. I set mine up so that the actual initialization code for the whole shebang is in my main page (of the file) and then all the other sub pages have a pagecreate handler that checks to see if the initialization code has fired and if not, does a $.mobile.changePage("#mainpage"). Works fairly well.

View more solutions

46,391

Fabio B.

http://www.linkedin.com/in/fabiobozzo

Updated on January 10, 2020

Comments

Fabio B. over 4 years

in ajax navigation pages, the classic "document ready" form for performing initialization javascript simply doesn't fire.

What's the right way to execute some code in an ajax loaded page?

(I mean, not my ajax... it's the jquery mobile page navigation system which brings me to that page)

Ok, I did suspect something like that... thanks a lot =) But... it still doesn't work, here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>mypage</title>

    <link rel="stylesheet" href="jquery.mobile-1.0a4.min.css" />
    <script type="text/javascript" src="jquery-1.5.min.js"></script>
    <script type="text/javascript" src="jquery.mobile-1.0a4.min.js"></script>
    <script type="text/javascript">
        $('div').live('pageshow',function(event, ui){
          alert('ciao');
        });
    </script>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-position="fixed">
            <h1>Shopping Cart</h1>
        </div>

        <div data-role="content"> asd


        </div>

    </div>

</body>

Do I need to specify the div id?

naugtur about 13 years

Take a look at my answer. Works since JQM alpha3. To prevent multiple calls you can change the event to pagereate
Smamatti over 12 years

In my opinion this is the best solution so far. You can handle random pages an not only specific urls/files like in the other answers! -- But your solution does not work if you haven't defined corresponding functions in your landing page (when using ajax/without rel="external" to load the pages). You might need to define the JS within the <div data-role="page">, because it seems JQM loads only the page container with ajax. My other scripts do not get executed this way. -- I'm not sure of the use of die() here though!
Smamatti over 12 years

Correction: You are right about the use of die() to prevent a multiple execution of the eventhandler! Good job, this really did help me with an ajax navigation problem to initalize my calender plugin.
Crashalot over 12 years

You want to bind to the "pageinit" event. Pulled from JQM docs: jquerymobile.com/test/docs/api/events.html
richie-torres over 11 years

Important: Use $(document).on('pageinit'), not $(document).ready() jquerymobile.com/test/docs/api/events.html
nullability almost 11 years

I think this is severely out of date.