jQuery Mobile individual loading message specific to each page

Question

Is it possible to have different loading message on a given page in jQuery Mobile?

I'm using mobile.loadingMessage and I also tried mobile.showPageLoadingMsg but I couldn't find the answer for this.

Below is what I have for the message to show up across the app:

$(document).bind('mobileinit',function(){
            $.extend($.mobile, {
                loadingMessage: "We're processing your request. We won't be long. Just Like Great Food, a good hotspot takes time to (find) prepare for you....",
                pageLoadErrorMessage: 'Sorry, there was an error while loading!',
            });
            $.mobile.page.prototype.options.addBackBtn = true;
        });

user700284 · Accepted Answer · 2012-02-15 18:29:44Z

You can listen for pageshow event and set the loading message specific to that page.

Sample code:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>jQuery Mobile Sample</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script>
        $("#page1").live("pageshow",function(){
            $.mobile.loadingMessage = "Loading message for page1";
        });
        $("#page2").live("pageshow",function(){
            $.mobile.loadingMessage = "Loading message for page2";
        });
        $(".showBtn").live("click",function(){
            $.mobile.showPageLoadingMsg();
            setTimeout(function(){$.mobile.hidePageLoadingMsg()},2000);
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head> 

    <body> 
        <div data-role="page" id="page1">

        <div data-role="header">
            <h1>Page1</h1>
        </div><!-- /header -->
        <div data-role="content">   
            <a data-role="button" class="showBtn">Show loading message</a>
            <a data-role="button" href="#page2">Go to page 2</a>
        </div>
        </div><!-- /page -->
        <div data-role="page" id="page2">

        <div data-role="header">
            <h1>Page2</h1>
        </div><!-- /header -->
        <div data-role="content">   
            <a data-role="button" class="showBtn">Show loading message</a>
            <a data-role="button" href="#page1">Go to page 1</a>
        </div>
        </div>
    </body>
</html>

A demo here - http://jsfiddle.net/SugTr/

Edit - An alternate version that uses a single pageshow listener for all pages and targets each page using switch statements - http://jsfiddle.net/SugTr/1/

Edit 2 -The loading message will be shown by the jqm framework,only if you are trying to load a page which has been created as a separate html file.If you have all your data-role="page" divs within a single page,that means jqm framework will not show any loading message.However you can manually show it in the pagebeforeshow handler using $.mobile.showPageLoadingMsg() and hide in the pageshow handler using $.mobile.hidePageLoadingMsg().But this does not make any noticeable change because the time duration for which the message stays on screen will be negligible.

Now coming to the case where actually a page loading message is being shown(you are loading a separate html),you can have specific loading messages by setting the $.mobile.loadingMessage just before the page is being loaded.

The anchor tag can be something like this

<a data-role="button" id="gotopage2" href="#'>Go to page 2</a>

and the corresponding script of this form

$("gotopage2).live("click",function(){
    $.mobile.loadingMessage = "Loading message for page1";
    $.mobile.changePage("page2.html");
});

Let me know if that helps.

Hi, thanks for that! But is there a way we can show and hide based on when the link to another page is clicked and stops when the page is loaded?
Are you talking about the setTimeout I gave?.That was just to illustrate that the message has been changed in the loading popup.

Sebass van Boxel · Accepted Answer · 2012-10-01 17:43:15Z

This is my alternative method of page loading message using simple javascript and html elements. My Blog:

http://aspnetsample.blogspot.in/2012/09/page-loading-message-javascript-main.html

You can visit my blog for the full article.

Sample Code Here:

$function getpage(val)
{
    hideFrame();
    var mframe;
    mframe=document.getElementById("MyFrame");
    mframe.src=val;
    mframe.onload=function()
    {
         document.getElementById("MyFrame").style.display="block";
         document.getElementById("loadingDiv").style.display="none";
    }
}
function hideFrame()
{
    document.getElementById("MyFrame").style.display="none";
    document.getElementById("loadingDiv").style.display="block";
}
function showFrame()
{
    document.getElementById("MyFrame").style.display="block";
    document.getElementById("loadingDiv").style.display="none";
}
function showdiv()
{
    document.getElementById("loadingDiv").style.display="block";
}
function changeHome(val)
{
    window.location=val;
}


      $  <table>
                <tr>
                    <td>
                        <div class="menu_div" onclick="getpage('http://www.aspnetsample.blogspot.in')">
                            Page1
                        </div>
                    </td>
                    <td>
                        <div class="menu_div" onclick="getpage('http://www.w3schools.com/css/default.asp')">
                            Page2
                        </div>
                    </td>
                    <td>
                        <div class="menu_div" onclick="getpage('page2.aspx')">
                            Page3
                        </div>
                    </td>
                    <td>
                        <div class="menu_div" onclick="changeHome('page3.aspx')">
                            Page4
                        </div>
                    </td>
                </tr>
            </table>

      $ <iframe class="iframe" id="MyFrame" src="http://www.w3schools.com" onprerender="javascript:showdiv()"
                onload="javascript:showFrame()" style="display: none;"></iframe>
            <div id="loadingDiv" class="loadingDiv">
                <table style="width: 100%; height: 100%;">
                    <tr>
                        <td align="center" valign="middle">
                            Page is Loading...
                        </td>
                    </tr>
                </table>
            </div>

You have to remove that $ symbol while implementation.

To get the complete code visit my Blog

Collectives™ on Stack Overflow

jQuery Mobile individual loading message specific to each page

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related