jQuery Mobile loading message

Question

When I linked jQuery Mobile to my page, some sort of loading message appeard in the bottom of the page and I can\'t get a rid of it. I\'ve tried $.mobile.pageLoading(true) b

Answer 1

If you are using the latest update (1.2.0) of jquerymobile try this

$.mobile.loading( 'show', { theme: "b", text: "", textonly: false});

since it worked for me.

Answer 2

The 1.4 loader documentation

The 1.4 documentation suggests interaction with the Loader widget. The top of the page describes globally changing the option but it can be nuanced on a link-by-link basis. This may also work:

$( document ).on( "mobileinit", function() {
    $.mobile.loader.prototype.options.disabled = true;
});

Also, according to http://demos.jquerymobile.com/1.4.5/loader/ and http://api.jquerymobile.com/loader/, you can hide the loading experience with the following code:

// As submitted by @Aras
$.mobile.loading( "hide" );
// (or presumably as submitted by @Pnct)
$.mobile.loading().hide();

Option B - disable AJAX loading

Disabling AJAX loading will effectively remove the message.

If you don't want a page to benefit from loading in the background and then showing, you can make it load like 'normal' by specifying the data-ajax='false' on whatever anchor (<a...>) tag you don't want to see a loading message for. There's also a global setting you can use to make all links load 'normally'.

To disable globally (be sure to read this page to understand implications and their recommendations. The new docs may not have warnings):

$.mobile.ajaxEnabled=false;

Option C - just hide it

If you want to use the 1.4 Load Page approach to load external pages, it has an option available for showLoadMsg which you can simply set to false.

The global option (available in earlier versions -- at least 1.0, 1.1, and 1.2 -- read about it here) for just removing the message is:

$.mobile.loadingMessage = false;

The 1.2 and prior documentation says that if you set it to false, no loading message will be shown.

Answer 3

In my case I was loading wrong css file (jquery css instead of jquery mobile css)

Wrong:

<link href="../CSS/jquery-ui-1.11.4.custom/jquery-ui.min.css" rel="stylesheet" />

Right:

<link href="../CSS/jquery.mobile-1.4.5.min.css" rel="stylesheet" />

Answer 4

Pnct's answer is closer to correct for JQM 1.2.0. However, the below would be more correct per the API document provided.

$.mobile.loading('hide');

Also ensure you have the stylesheet defined for the JQM structure at minimum in your HTML file. Otherwise it will look like the function does nothing.

Answer 5

I am using the latest version of JQuery Mobile (currently 1.4) and run into this problem. None of the solutions here worked for me and I think many of them have been deprecated. Here is what worked for me:

$.mobile.loading().hide();

$.mobile.loading() will give you the element and you can hide it or do whatever else you wish. Hope this helps someone.

Answer 6

I had the same problem, an annoying loading message and an orange frame. It was due to not adding the reference to the jquery style sheet.

Adding the reference in the header solved it.

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">