How to prevent user from interacting with the page when making an ajax request

Question

Im using ajax to allow a user to delete something on my page.

What html/css tricks can i use to prevent the user from clicking on anything on the page. What im after is some sort of transparent overlay with a spinner in the center of my screen.

In ajax i know i can use beforesend and success functions to show and hide the loading.

    $.ajax({
            beforeSend : function (){
             $('#loading').show();
            }
            success: function (result) {
            $('#loading').hide();


            }

        });
    }

Ive come across these spinners but they are not full overlays which prevents the user from clicking on anything and they are not centered. http://projects.lukehaas.me/css-loaders/

If you can use bootstrap then there already an [answer](http://stackoverflow.com/questions/16487052/how-to-activate-the-bootstrap-modal-backdrop) close to what you are looking for. — TeaCoder, Aug 13 '16 at 18:58

score 1 · Answer 1 · answered Aug 13 '16 at 18:55

As you can see in the source of loader in the LINK you provided in the question, CSS loader is achieved by applying a class to a div. Eg:-

<div class="loader">Loading...</div>

So, you may do:

$.ajax({
  beforeSend : function (){
    $("#some_div_id").addClass("loader");
  },
  success: function (result) {
    $("#some_div_id").removeClass("loader");
  }
});

score 0 · Answer 2 · answered Aug 13 '16 at 18:55

0

css solution:

body.loading { 
  pointer-events: none;
}

answered Aug 13 '16 at 18:55

Artem Gorlachev

597
4
9

score 0 · Answer 3 · answered Aug 13 '16 at 18:56

One thing is preventing elements from being a target of pointer events using the pointer-events CSS property:

.no-click {
    pointer-events: none;
}

And then just add this class to elements that should not receive any pointer events (this includes all pointer events, like mouseenter and mouseleave as well). For example, you could add this to the body element to prevent all pointer interaction:

$.ajax({
    beforeSend: function () {
         $("body").addClass("no-click");
    },
    success: function (result) {
         $("body").removeClass("no-click");
    }
});

This has issues on Internet Explorer. See [stackoverflow.com/questions/17441810](http://stackoverflow.com/questions/17441810/pointer-events-none-does-not-work-in-ie9-and-ie10) — dystopiandev, Aug 13 '16 at 19:17

Alessandro Messori · Answer 4 · 2016-08-13T19:08:07.513

try toggling a bootstrap modal containing the spinner during the ajax request:

script

    function sendRequest(){
        $('#modal').modal('toggle');
        $.ajax({
        success: function (result) {
            $('#modal').modal('hide');
        }

    });

}

html

<button id="clickButton" onclick="sendRequest()" class="buttonStyle">click me</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
     <div class="loader"></div>
</div><!-- /.modal -->

score -3 · Answer 5 · answered Aug 13 '16 at 18:52

-3

To prevent any users to click anywhere on the page, you need to disable click event handlers. Here's an example of how you could prevent that:

document.oncontextmenu = new Function("return false"); //No right clicks
document.onclick = new Function("return false"); //No left clicks

answered Aug 13 '16 at 18:52

Maxie Berkmann

82
2
7

Will that work if event is not allowed to bubble by the event handler? – TeaCoder Aug 13 '16 at 18:54
@TeaCode What ? I don't quite understand your question. – Maxie Berkmann Aug 13 '16 at 19:04
No, it won't. In cases where an event handler on a child element (basically any element is a child of `document`) prevents propagation, this code will never run. – John Weisz Aug 13 '16 at 19:22
This is a dreadful solution given the other ways this can be achieved. – webnoob Aug 13 '16 at 19:26
@webnoob Why do you think that ? – Maxie Berkmann Aug 13 '16 at 19:28
Because you then have to control adding the events back in again. Adding an overlay to the page is a much better way and also allows adding a loading icon etc. Removing events has it's place but not in this situation IMO. – webnoob Aug 13 '16 at 19:30

How to prevent user from interacting with the page when making an ajax request

5 Answers5