jquery mobile, disable all button when loading overlay is showed

Question

Actually i can call this code

$(":input").attr("disabled",true); //Disable all input fields

to disable all buttons on my page. But i don't know how good is the performance when i have a lot of button on my page.

I saw a trick that we create a loading indicator overlay, which is above all element on the page => user can not click on the buttons anymore

is there any way to reuse the loading overlay of jquery mobile to archive the above trick? I'm not good at CSS so hopefully someone can help me.

Thanks

Edited:

i ended up with using jquery.blockUI plugin for jQuery and it works as expected. And i added the default div with css from jquery mobile so that i still have the loading message of jquery mobile and the behaviour that i wanted

Working sample here

score 43 · Accepted Answer · edited Jun 02 '21 at 19:57

43

A simple way I've just found is to use a fixed background with z-index and opacity:

Add this CSS:

.ui-loader-background {
    width:100%;
    height:100%;
    top:0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}

.ui-loading .ui-loader-background {
    display:block;
}

ui-loader-background is a custom class, but ui-loading is added by JQM to the <html> element when the loading spinner is shown.

And add this element in your body:

<div class="ui-loader-background"> </div>

example : http://jsfiddle.net/5GB6B/1/

edited Jun 02 '21 at 19:57

SharpC

6,974
4
45
40

answered Aug 03 '12 at 15:13

Xorax

1,644
2
18
18

Nice trick, but fails in Android if the loading message is shown while an input field is focused. – Mister Smith Apr 10 '13 at 14:40
I finally got it done. I had to manually remove the focus for every input before showing the loading message. The background div works great preventing interaction with the page. I just commented the display:none in the css. – Mister Smith Apr 10 '13 at 16:05
After clicking on the Button, Just press the Tab in Keyboard, Even though the overlay displaying, its focusing the behind all the input elements. – srikanth_yarram Jun 19 '14 at 07:45
Just a comment - on page load add that div via js: `if (!$('.ui-loader-background').length) { $('body').prepend('
'); }` – Andron Mar 14 '17 at 10:24

score 14 · Answer 2 · answered Jun 03 '13 at 22:18

14

In my case I use:

$("body").addClass('ui-disabled');
$.mobile.loading("show",{
text: "Cargando",
textVisible: true
});

Shows loading custom message and disable the entire page.

When you've finish your task, then you need to:

$.mobile.loading("hide");
$("body").removeClass('ui-disabled');

Hope helps you

answered Jun 03 '13 at 22:18

technology_dreamer

473
1
5
13

3

If you operate on body with disable then loading element is disabled too. So better idea is to add and remove the class on a div and finally loading element remains enable (in the visual sense).Anyway, adding and removing 'ui-disabled' helped me :) – Bronek Aug 12 '13 at 01:22

score 1 · Answer 3 · answered Jul 25 '13 at 08:12

I've made a small edit to the working solution provided by Xorax to move the loader background to the leftmost of the browser window as I noticed in my Chrome browser there was some area not fully covered:

.ui-loader-background {
    width:100%;
    height:100%;
    left:0;
    top:0;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    display:none;
    position: fixed;
    z-index:100;
}

score -2 · Answer 4 · answered Jul 06 '11 at 14:36

-2

Docs:

http://jquerymobile.com/demos/1.0b1/docs/api/methods.html

Show the page loading message, which is configurable via $.mobile.loadingMessage. Example:

//cue the page loader           
$.mobile.showPageLoadingMsg();

Hide the page loading message, which is configurable via $.mobile.loadingMessage. Example:

//cue the page loader           
$.mobile.hidePageLoadingMsg();

answered Jul 06 '11 at 14:36

Phill Pafford

83,471
91
263
383

3

thanks for the answer. I know how to hide and show the loading message. But my problem is that, when this message is showed, users can still click on the buttons on the page. I just want to know how we effectively disable all buttons when this message is showed – Peacemoon Jul 06 '11 at 14:52

jquery mobile, disable all button when loading overlay is showed

4 Answers4