Skip to content

Instantly share code, notes, and snippets.

@MorningZ

MorningZ/jQueryMobileBlock.js

Created July 22, 2011 21:10
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save MorningZ/1100435 to your computer and use it in GitHub Desktop.
Save MorningZ/1100435 to your computer and use it in GitHub Desktop.
Download ZIP
Over riding jQuery Mobile's stock "loading" modal
Raw
jQueryMobileBlock.js
/*
I was struggling with the fact that the "stock" jQuery Mobile "loading" message
allowed users to click on UI items around it...
so it's Mike Alsup's BlockUI to the rescue!
first include his blockui library from:
http://jquery.malsup.com/block/#download
*/
// Add this right before the closing <body> tag
(function () {
var originalHideMethod = $.mobile.hidePageLoadingMsg;
$.mobile.hidePageLoadingMsg = function () {
$("body").unblock();
originalHideMethod.apply(this, arguments);
};
var originalShowMethod = $.mobile.showPageLoadingMsg;
$.mobile.showPageLoadingMsg = function () {
$("body").block({ "message": null });
originalShowMethod.apply(this, arguments);
};
})();
@erikyuzwa
Copy link

brilliant works like a charm in JQM 1.0.1.

the default z-index of the page loading message by JQM is at 100. So I modified the blockUI.js to set the baseZ to 99. So the blocker comes up just under the JQM loading msg.

Copy link

ghost commented Oct 15, 2012

This problem is sovled in jquery-archive/jquery-mobile#3414, in my project, I do like this:

    $(document).on("mobileinit", function () {

        $.mobile.loader.prototype.options.text = "loading...";
        $.mobile.loader.prototype.options.textVisible = true;
        $.mobile.loader.prototype.options.theme = "a";
        $.mobile.loader.prototype.options.html = "";

        //Thanks: https://github.com/jquery/jquery-mobile/issues/3414 
        $.mobile.loader.prototype.defaultHtml = "<div class='ui-loader'>" +
            "<span class='ui-icon ui-icon-loading'></span>" +
            "<h1></h1>" +
            "<div class='ui-loader-curtain'></div>" +
            "</div>",

        $(document).ajaxStart(function() {
            $.mobile.loading('show');
        })
        $(document).ajaxStop(function() {
            $.mobile.loading('hide');
        })

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment