jQuery mobile $(document).ready equivalent

Question

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?

score 19 · Accepted Answer · answered Apr 12 '11 at 06:42

19

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

answered Apr 12 '11 at 06:42

Jura Khrapunov

1,024
6
14

Take a look at my answer. Works since JQM alpha3. To prevent multiple calls you can change the event to pagereate – naugtur Apr 12 '11 at 07:25
2

You want to bind to the "pageinit" event. Pulled from JQM docs: http://jquerymobile.com/test/docs/api/events.html – Crashalot Nov 19 '11 at 06:36
1

Important: Use $(document).on('pageinit'), not $(document).ready() http://jquerymobile.com/test/docs/api/events.html – richie-torres Dec 11 '12 at 04:44
6

I think this is severely out of date. – nullability May 21 '13 at 22:03

score 14 · Answer 2 · edited Sep 03 '13 at 15:26

14

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

edited Sep 03 '13 at 15:26

saluce

13,035
3
50
67

answered Nov 19 '11 at 06:36

Crashalot

33,605
61
269
439

score 12 · Answer 3 · answered Aug 14 '12 at 18:31

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.

score 5 · Answer 4 · edited Oct 16 '12 at 16:48

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

score 3 · Answer 5 · answered Sep 04 '11 at 16:43

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.

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 `
`, 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, Oct 21 '11 at 08:39
**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. — Smamatti, Oct 21 '11 at 08:52

score 1 · Answer 6 · answered Feb 26 '12 at 21:03

As mentioned, the pageinit event does work. However, if you had the case of a multi-physical page situation (eg: navigating from index.html to mypage.html), the function that is executed is on the parent.

Any logic in the pageinit would have to be something pertaining to the parent, not the link being loaded. You couldn't call a function on the page your navigating to because navigation is handled via an ajax callback in JQM and items on your child page would be out of scope.

In this particular case, you could use the data-ajax="false" attribute:

<a href="mypage.html" data-ajax="false">My Page</a>

Doing this will remove the ajax navigation, do a full page reload, which in turn will fire a $(document).ready function on the page you're loading.

Nicholas Mberev · Answer 7 · 2019-01-09T22:39:18.973

0

It is relatively simple. I think I understand your problem, you want to have that event fire just once and not repeatedly right? If that is the case, do it like this

$(document).one('pageinit', function(){ // write your code here })

In that case the 'pageinit' will happen once. If you want to know more about the one() jQuery method, check here

edited Jan 09 '19 at 22:39

answered Jan 09 '19 at 22:32

Nicholas Mberev

1,563
1
14
14

jQuery mobile $(document).ready equivalent

7 Answers7

Linked

Related