Which events get fired in the page being loaded using $load method of jQuery?

Question

Here is index.html

        <script>
        $(document).on('pagebeforeshow','id="container"',  function(){       
            $.mobile.activePage.find('id="content-container"').load("content.html", function(){ 
                $(this).parent().trigger('pagecreate');
            }); 

        }); 

    </script>

The content.html page has to retrieve data from server when it was loaded.

Which event is fired in content.html page when the above code executes?

---

I already tried the following events but none of them are working

1. pagebeforeshow
2. pageshow
3. deviceready
4. pagecreate
5. pageinit
6. pageload

Answer 1

None of them will trigger because they are not linked to load function. You should use jQuery Mobile version of that function called: loadPage. It is a wrapper function for function load.

This is the official link: http://api.jquerymobile.com/jQuery.mobile.loadPage/

In this case page event order would look like this:

1. pagebeforeload
2. pagebeforecreate
3. pagecreate
4. pageinit
5. pageload

To correctly detect pageload and pagebefpreload events use them like this:

$(document).on('pagebeforeload', function(){    
    console && console.log("pagebeforeload!!");
});                 

$(document).on('pageload', function(){    
    console && console.log("pageload!!");
});

Read more about it here, you will also find a working example.