(For more resources related to this topic, see here.)
Page initialization events
The jQuery Mobile framework provides the page plugin which automatically handles page initialization events. The pagebeforecreate event is fired before the page is created. The pagecreate event is fired after the page is created but before the widgets are initialized. The pageinit event is fired after the complete initialization. This recipe shows you how to use these events.
Getting ready
Copy the full code of this recipe from the code/08/pageinit sources folder. You can launch this code using the URL http://localhost:8080/08/pageinit/main.html
How to do it…
Carry out the following steps:
-
Create main.html with three empty <div> tags as follows:
<div id="content" data-role="content"> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </div>
- Add the following script to the <head> section to handle the pagebeforecreate event :
var str = "<a href='#' data-role='button'>Link</a>"; $("#main").live("pagebeforecreate", function(event) { $("#div1").html("<p>DIV1 :</p>"+str); });
- Next, handle the pagecreate event :
$("#main").live("pagecreate", function(event) { $("#div1").find("a").attr("data-icon", "star"); });
- Finally, handle the pageinit event :
$("#main").live("pageinit", function(event) { $("#div2").html("<p>DIV 2 :</p>"+str); $("#div3").html("<p>DIV 3 :</p>"+str); $("#div3").find("a").buttonMarkup({"icon": "star"}); });
How it works…
In main.html, add three empty divs to the page content as shown. Add the given script to the page. In the script, str is an HTML string for creating an anchor link with the data-role=”button” attribute.
Add the callback for the pagebeforecreate event , and set str to the div1 container. Since the page was not yet created, the button in div1 is automatically initialized and enhanced as seen in the following image.
Add the callback for the pagecreate event . Select the previous anchor button in div1 using the jQuery find() method, and set its data-icon attribute. Since this change was made after page initialization but before the button was initialized, the star icon is automatically shown for the div1 button as shown in the following screenshot. Finally, add the callback for the pageinit event and add str to both the div2 and div3 containers. At this point, the page and widgets are already initialized and enhanced. Adding an anchor link will now show it only as a native link without any enhancement for div2, as shown in the following screenshot. But, for div3, find the anchor link and manually call the buttonmarkup method on the button plugin, and set its icon to star. Now when you load the page, the link in div3 gets enhanced as follows:
There’s more…
You can trigger “create” or “refresh” on the plugins to let the jQuery Mobile framework enhance the dynamic changes done to the page or the widgets after initialization.
Page initialization events fire only once
The page initialization events fire only once. So this is a good place to make any specific initializations or to add your custom controls.
Do not use $(document).ready()
The $(document).ready() handler only works when the first page is loaded or when the DOM is ready for the first time. If you load a page via Ajax, then the ready() function is not triggered. Whereas, the pageinit event is triggered whenever a page is created or loaded and initialized. So, this is the best place to do post initialization activities in your app.
$(document).bind("pageinit", callback() {...});</p>