- Adding jQuery Mobile to Your Site
- Using Data Roles
- Creating a Simple Page
- Understanding the Mobile Initialization Event
- Using the pageinit Event Instead of $(document).ready()
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Understanding the Mobile Initialization Event
You already learned that one of the problems with using standard JavaScript happens when including scripts and attaching events or even when trying to manipulate data that may not exist at the time the function is called. The jQuery framework uses the $(document).ready() function to circumvent manipulation and loading problems by giving you access to your functions as soon as possible. While this is fantastic for single page sites, it becomes a small problem for the jQuery Mobile framework.
jQuery Mobile uses AJAX to load the contents of each page rather than reload the entire DOM structure. The $(document).ready() function only runs once per page load, not per AJAX call. In jQuery Mobile, the $(document).ready() function doesn’t run once per page, but rather once per site unless a page refresh is requested or performed by the user. This means that some of the default settings that need to be set by jQuery Mobile cannot be set in the $(document).ready() function because they would not be applied to pages included through AJAX.
The answer to setting and changing these defaults is to use the mobileinit event because it runs before the $(document).ready() function ever does. To use the mobileinit event you must first include the jQuery framework and then either inline or include an external JavaScript file that contains an event binding for the mobileinit event and finally the include for jQuery Mobile. That may sound a little confusing, so let’s look at Listing 4.5 for an example of this process.
Listing 4.5 Including jQuery, an Inline mobileinit Script, and jQuery Mobile
1: <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
2: <script type="text/javascript">
3: $(document).on("mobileinit", function() {
4: $.extend( $.mobile , {
5: pageLoadErrorMessage: 'Either the page cannot be found or it cannot be loaded.'
6: });
7: });
8: </script>
9: <script src="https://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
Line 1 starts out with the include for the jQuery framework. Line 2 is the beginning of our inline JavaScript for setting the mobileinit event. Line 3 is where we actually set up the mobileinit event by using the .on() function (which is part of the version 1.7 of the jQuery framework and is why we needed to include the jQuery framework before our inline script). If we had been using a version of jQuery Mobile prior to 1.1 we would be using the .bind() function instead of the .on() function. The .on() function can take quite a few arguments, but in our case we pass two. The first argument passed is the event you want to bind, and the second is usually an anonymous function that contains the code you want to run when the event runs. You can learn more about the .on() function by visiting http://api.jquery.com/on/. On line 4 we used the $.extend() function, which allows us to merge two objects together, and passed $.mobile to be used as the target object that we want to add or merge to. We then used an opening brace to begin the array of settings that we want to merge or change into the $.mobile object. Continuing to line 5 you can see that we are going to overwrite the default for pageLoadErrorMessage by setting the value to "Either the page cannot be found or it cannot be loaded". The notation used here may look a familiar. It is a name-value pair and is commonly known as JavaScript Object Notation (JSON). It is commonly used in jQuery plug-ins, configurations, and functions (including the jQuery .css() function). Line 6 shows the closing brace and closing parentheses of the $.extend() function. Line 7 is the closing brace and closing parentheses of the .on() function. Line 8 is the closing tag for our inline script. Line 9 then includes the jQuery Mobile framework that now has the default value for pageLoadErrorMessage changed.
Now that we know that we can change some of the default settings of jQuery Mobile with the mobileinit event what do we do when we want an event or function to be triggered when a new page is loaded? I’m fairly sure that you are thinking, “That’s easy! Just use the $(document).ready() function on the page you are loading and you’ll be all set!” While that is normally the correct answer, we have to remember that all pages are inserted into the DOM through AJAX. This means that the DOM is only loaded once, making the $(document).ready() function load on the first page only. Luckily jQuery Mobile has a solution for this problem: You just need to use the pageinit event.