Loading of data using jQuery

Question

I have a project where on change of select box I am loading data from the server. How do I make sure that until the data is loaded user can't do anything else on the page?

Answer 1

In jQuery, you can use $.ajax().

Use async: false;

But I do not recommend it.

Answer 2

Put

$(this).attr('disabled', 'disabled');

into your change event handler and

$(this).removeAttr('disabled');

into your success/complete handler.

To create a blocking / invisible div do:

$('<div/>', {
    id:   'modalblock',
    css:  {
       position:   'absolute',
       top:        '0px',
       height:     '0px',
       width:      window.innerWidth,
       height:     window.innerHeight,
       zIndex:     '199',
       backgroundColor: 'transparent',
       cursor:     'wait'
    }
}).appendTo(document.body);

To remove this again use

$('#modalback').remove();

But again, this is bad karma, confuses an user like a lot because he will not expect such a behavior.

Answer 3

You can create a modal dialog using jQuery UI or some other JavaScript library.

On the close event of the plugin you can check whether data has been received using global variable is_received. If is_received == true then let closeevent close the modal dialog by returning true else return false. I am assuming that close event stops the user from closing the modal dialog if you return false. Also you can show user friendly message inside of the modal dialog telling user that data is being loaded.

Another way could be: you disable close buttons of the modal dialog and upon receiving data from the server enable those buttons again. The modal diaog will stop the user from interacting with contents.

Answer 4

From a UI perspective, loading a modal window is your best option. with jQuery, you can use jQueryui - launch a modal dialog that has a "working" or similar message to prevent user interaction.