jQuery Mobile: Part 3 – Modifying default ‘loading’ and ‘error loading page’ messages



In the second part of this series we have learned how to link pages. If you followed them, probably, you’ve also noticed that a ‘loading’ message while you are visiting pages back and forth. jQuery Mobile shows this while it loads the page behind the scene. Well, you may not see this in fast connection or during testing in your computer as it loaded too fast. Similarly, jQuery Mobile shows ‘error loading page’ when it fails to load any page.

In my application, I wanted to change these texts as I wanted them in Bangla.  We were seeing these because they are set by default in the framework. By modifying the default properties, we can change them to something we want.

To do so we will hook into jQuery Mobile’s ‘mobileinit’ event. This event (on document object) is triggered just on the moment jQuery Mobile is started to load. So, we will have to override these before loading jQuery Mobile library.

So far, we have loaded the library files in the following order:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
 <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

However, as we will override its default configurations, we will need to slightly change the above order.

After loading the core jQuery Library, we will insert our overriding codes (or reference if you use external file).

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
    //we will override here
</script>
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

Please notice that, we’ve added a new script block just after jQuery library and before referencing jQuery Mobile javascript file. We will add our code in the marked area (line #4).

So, how to override the default loading text? That’s simple. Put the following code in the marked area.

$(document).bind('mobileinit',function(){
    $.mobile.loadingMessage = 'Your custom loading text goes here';
})

That’s it. Now you will see the above text between your page browses.

Overriding error message
In the same way, we can modify the message that is shown on error of loading pages.

$(document).bind('mobileinit',function(){
    $.mobile.pageLoadErrorMessage = 'Custom error message';
})

We can also utilize jQuery’s extend api to do these together

$(document).bind('mobileinit',function(){
    $.extend($.mobile, {
        loadingMessage: 'Your custom loading text goes here',
        pageLoadErrorMessage: 'Custom error message'
    })
})

We can customize any other default configuration options using this way. To find a list of configurable options are available in this link.

  • nahid

    ভাইয়া কি প্রজন্ম ফোরাম এর মোবাইল ভার্সান পুরা কাস্টম কোডে বানাইসেন? :)