How can you stop user input actions while an AJAX query in requesting data?

Question

I have a JQUERY function that uses AJAX via a PHP page, when the AJAX is running I have a loading.gif show for the user. When the AJAX returns the json data that was requested all is fine. What I would like to do would be to make any user input null while this is happening.

What would be the best way to go about this?

EDIT:

I ended up using...

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

From the post How to show loading spinner in jQuery?

Thanks for the suggestions!

You can disable input fields by adding the `disabled="disabled"` attribute — xbonez, May 01 '12 at 21:43
What? No! You can't disable a user's keyboard from javascript. can you imagine the chaos? — xbonez, May 01 '12 at 21:47
I see your point. I'm working on an internal use system for Chrome. So it would only need to work on chrome anyway. — Monty, May 01 '12 at 22:06

score 2 · Answer 1 · answered May 01 '12 at 21:59

Just as an interesting idea.

This is somewhat a dirty hack but you can disable any keyboard input within your website during Ajax requests by adding this event to $(document).ready:

$(document).on("keydown", function(e) {
    return $.active == 0;
});

It works like that: $.active returns the number of active Ajax requests. If it is 0 then any keydown will be returned as false.

score 1 · Accepted Answer · edited May 23 '17 at 12:20

1

You can:

Gray the screen with a spinner until the request succeed (the loading.gif)
Disable the input field by setting disabled=disabled

See this question:How to show loading spinner in jQuery? and jQuery .ajaxStart()

edited May 23 '17 at 12:20

Community

1
1

answered May 01 '12 at 21:50

noirbizarre

3,199
1
27
21

Thanks for the link, thats what I went with. – Monty May 02 '12 at 13:16

score 0 · Answer 3 · answered May 01 '12 at 21:45

0

Just disable the fields as said by xbonez. Make sure to give your users a feedback about what is keeping them from entering data. Otherwise they will think your app just freezed.

answered May 01 '12 at 21:45

Tulio F.

994
15
27

How can you stop user input actions while an AJAX query in requesting data?

3 Answers3