Question

I need that on every page change or on some elemetents (a, input[button, submit], data-role=button) click event show loading message. I tried this piece of code:

$(document).live(`pagebeforehide`, function(){
    $.mobile.showPageLoadingMsg();
    //More stuff to do
});

but it’s not working.

Answer 1

I think you can set this up in the Global Configs:

• http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html

loadingMessage string, default: “loading”

Set the text that appears when a page is loading. If set to false, the message will not
appear at all.

loadingMessageTextVisible boolean, default: false

Whether the text should be visible when a loading message is shown. The text is always
visible for loading errors.

And here is the docs for $.mobile.showPageLoadingMsg method

• http://jquerymobile.com/demos/1.1.0/docs/api/methods.html

Here is an example of using the loading message/spinner with a click event

• http://jsfiddle.net/J8nYh/

JS

$("input, a:jqmData(clickload='show')").on('click', function() {
    console.log('clicked show');
    $.mobile.showPageLoadingMsg("b", "This is only a test", true);
});

$("input, a:jqmData(clickload='spin')").on('click', function() {
    console.log('clicked spin');
    $.mobile.showPageLoadingMsg("b", "This is only a test", false);
});

$("input, a:jqmData(clickload='hide')").on('click', function() {
    console.log('clicked hide');
    $.mobile.hidePageLoadingMsg();
});

HTML

<div data-role="controlgroup" data-type="horizontal">
    <a href="#" id="showMe" data-role="button" data-clickload="show">Show Loading Message</a>
    <a href="#" id="showMe" data-role="button" data-clickload="spin">Show Loading Spinner</a>
    <a href="#" id="hideMe" data-role="button" data-clickload="hide">Hide Loading Message/Spinner</a>
</div>