jQuery Mobile - Page Load Events

Description

Fires when the page has been initialized using two types of events −

  • The pagebeforecreate event fires when the page is about to be initialized.

  • The pagecreate event fires when the page has been created.

Description

It fires when the external pages are loaded into the DOM using the following types of events −

  • The pagecontainerbeforeload event fires before page load.

  • The pagecontainerload event fires when the page has been loaded and placed in the DOM.

  • The pagecontainerloadfailed event fires when the page fails to load and displays the "Error Loading Page" message.

Example

Following example describes the use of page load events in the jQuery Mobile Framework.

Live Demo 
<!DOCTYPE html>
   <head>
      <title>Page Load Events</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $(document).on("pagecontainerload",function(event,data) {
            alert("The page has been loaded: " + data.url);
         });
         $(document).on("pagecontainerloadfailed",function(event,data) {
            alert("Sorry, the page has been failed to load!!!");
         });
      </script>
   </head>
   
   <body>
      <div data-role = "page" id = "page1">
         <div data-role = "header">
            <h2>Header</h2>
         </div>

         <div data-role = "main" class = "ui-content">
            <a href = "mypage.html">My Page</a>
         </div>

         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      
      </div>
   </body>
</html>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as jqm_page_load_event.html file in your server root folder.

  • Open this HTML file as http://localhost/jqm_page_load_event.html and the following output will be displayed.

jquery_mobile_events.htm
Advertisements