Skip to content

Instantly share code, notes, and snippets.

@MorningZ
Created July 22, 2011 21:10
Show Gist options
  • Save MorningZ/1100435 to your computer and use it in GitHub Desktop.
Save MorningZ/1100435 to your computer and use it in GitHub Desktop.
Over riding jQuery Mobile's stock "loading" modal
/*
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);
};
})();
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