- jQuery Mobile Cookbook
- Table of Contents
- jQuery Mobile Cookbook
- Credits
- About the Author
- Acknowledgement
- About the Reviewers
- www.PacktPub.com
- Preface
- 1. Get Rolling
- 2. Pages and Dialogs
- Introduction
- Writing a single-page template application
- Writing a multi-page template application
- Prefetching pages for faster navigation
- Using the DOM cache to improve performance
- Custom styling a dialog
- Using CSS to create a bouncing page transition
- Using JS to create a slide and fade page transition
- Using data-url to handle the login page navigation
- Using History API to create a custom error pop up
- 3. Toolbars
- 4. Buttons and Content Formatting
- 5. Forms
- Introduction
- Native styling of form controls
- Disabling text controls
- Grouping radio buttons in a grid
- Customizing a checkbox group
- Creating dynamic flip switch and slider controls
- Using options to auto-initialize a select menu
- Validating forms
- Submitting a form using POST
- Fetching data using GET
- Creating an accessible form
- 6. List Views
- 7. Configurations
- Introduction
- Configuring the active classes
- Configuring ajaxEnabled
- Configuring autoInitializePage
- Configuring the default transitions
- Configuring ignoreContentEnabled
- Configuring the page loading and error messages
- Configuring the default namespace
- Configuring hashListeningEnabled and subPageUrlKey
- Configuring pushStateEnabled and linkBindingEnabled
- 8. Events
- 9. Methods and Utilities
- 10. The Theme Framework
- 11. HTML5 and jQuery Mobile
- Introduction
- Using the new HTML5 semantics
- Improving speed and taking your application offline
- Using Web Workers for intensive tasks
- Using local and session storage
- 2D drawing with Canvas
- Applying Gaussian blur on a SVG image
- Tracking your location with the Geolocation API
- Playing music with the <audio> element
- Viewing videos with the <video> element
- Index
By default, the jQuery Mobile framework shows a spinning animation with theme a and without any text when loading a new page. If there is an error, the page load times out and an error message Error Loading Page is shown, with theme e. This recipe shows you how to change and customize the page loading and error messages.
Copy the full code of this recipe from the sources code/07/load-message folder. To try out this recipe, launch the simple nodejs web server that is available in the folder code, by using the following command:
node jqmserver.js
Then you can launch the code by using the URL: http://localhost:8080/07/load-message/main.hml.
- In
main.html, add the following script before includingjquery.mobile.js:$(document).bind("mobileinit", function() { $.mobile.loadingMessage = "Fetching it..."; $.mobile.loadingMessageTextVisible = true; $.mobile.loadingMessageTheme = "b"; $.mobile.pageLoadErrorMessage = "Oops, it's missing!"; $.mobile.pageLoadErrorMessageTheme = "b"; }); - Create the
#mainpage with the following content:<div data-role="content"> <a href="/delay" data-role="button">Dummy page</a> </div>
Create main.html, and add the given script before including the reference to jquery.mobile.js. In the script, add an event handler for the mobileinit event that gets triggered at the start of the app. Here, set the default page load messages and error messages as shown in the code.
In #main, there is a link that tries to open the "/delay" page. This is a GET operation on the nodejs server. The server handles this request and returns an error code after pausing for a few seconds. The spin control with a text message is shown for this duration, as shown in the following screenshot:
The error response causes the following error message to be shown:
-
No Comment