jQuery Mobile Pagecontainer create Event

Last Updated : 30 Jan, 2022

jQuery Mobile is a web-based technology designed to make responsive websites and apps that are accessible on all smartphone, tablet, and desktop devices.

In this tutorial, we are going to learn the jQuery Mobile Pagecontainer create event. The create event in Pagecontainer is triggered when the Pagecontainer is created. The create event is a callback function where we can perform the required actions when required. It has the event and the ui parameters, which are initialized as follows.

Syntax:

Initialize the pagecontainer with the create callback specified:

$( "#page1" ).pagecontainer({
    create: function( event, ui ) {
        // Code
    },
});

Bind the pagecontainercreate event to an event listener:

$( "#page1" ).on( "pagecontainercreate", function( event, ui ) {
    // Code
} );

Parameters: It accepts a callback function that holds two parameters.

event: It is an event-type object which contains the details of the event when the Pagecontainer is created like the timestamp and the initialized values of the pagecontainer.
ui: This is null but used for keeping consistency with the other widgets in jQuery Mobile.

CDN Links:

<link href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel=”stylesheet”/>
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: In the following example, we show an alert message using the create event when the Pagecontainer is created.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="utf-8"/> 
        <meta content="IE=edge" http-equiv="X-UA-Compatible"/> 
        <meta content="width=device-width, initial-scale=1.0" name="viewport"/> 
        <link href= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" 
             rel="stylesheet"/> 
        <script src= 
"https://code.jquery.com/jquery-1.11.1.min.js"> 
        </script> 
        <script src= 
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
        </script> 
    </head> 
    <body> 
        <div data-role="page" id="page1"> 
            <div data-role="header"> 
                <h1 style="color:green;"> 
                    GeeksforGeeks 
                </h1> 
            </div> 
            <div class="ui-content" role="main"> 
                <center> 
                    <h3> 
                        jQuery Mobile Pagecontainer create event 
                    </h3> 
                    <a class="ui-btn ui-corner-all ui-btn-inline" 
                       data-transition="slide" href="#page2"> 
                        Go To Page 2 
                    </a> 
                </center> 
            </div> 
        </div> 
        <div data-role="page" id="page2"> 
            <div data-role="header"> 
                <h1 style="color:green;"> 
                    GeeksforGeeks 
                </h1> 
            </div> 
            <div class="ui-content" role="main"> 
                <center> 
                    <h3> 
                        jQuery Mobile Pagecontainer create Event 
                    </h3> 
                    <a class="ui-btn ui-corner-all ui-btn-inline" data-rel="back" 
                       data-transition="slide" href="#page1"> 
                        Go Back To Page 1 
                    </a> 
                </center> 
            </div> 
        </div> 
        <script> 
            $(document).ready(function(){ 
                $( "#page1" ).pagecontainer({ 
                    create: function( event, ui ) { 
                        alert("Page 1 has been created") 
                    }, 
                }); 
            }) 
        </script> 
    </body> 
</html>