How to disable all content, divs, etc so when server is processing

Question

I have an html page with some content including buttons, headers and etc. Every time a button is pressed the server does some processing which usually takes around 5-10 seconds. However during this time, the user can click on buttons, headers which will be unresponsive as the server is still processing.

How can i disable all the content(buttons, redirect headers, etc) on the page so that the user is not able to interact with the webpage when it is processing in the back, then re-enable everything after the processing is done?

Thanks for all the help

Answer 1

A quick and dirty way to do this would be to create a semi transparent div with a really high z-index positioned absolutely and the full size of the page. When a user clicks a button, show this div which will block interaction with all content under it. Then, when the server is done, hide the div. Something like this:

$('.myBtn').click(function() {
  $('#result').append('Button Clicked!<br>');
  $('#pageshield').show();
  setTimeout(function() {
    $('#pageshield').hide();
  }, 2000);
});

.container {
  position: relative;
}
#pageshield {
  display: none;
  z-index: 999999999;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #000000;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  /* IE 8 */
  filter: alpha(opacity=50);
  /* IE 5-7 */
  -moz-opacity: 0.5;
  /* Netscape */
  -khtml-opacity: 0.5;
  /* Safari 1.x */
  opacity: 0.5;
  /* Good browsers */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div id="pageshield"></div>

  <button class="myBtn">Click me</button>
  <br>
  <button class="myBtn">Click me</button>
  <br>
  <button class="myBtn">Click me</button>
  <br>
  <button class="myBtn">Click me</button>
  <br>
  <button class="myBtn">Click me</button>
  <br>

  <div id="result"></div>


</div>

Disclaimer, this works but does seem a bit hackish.

Also, if possible, consider changing the way your app works instead. In my opinion, blocking the whole page like this is bad UX. Which is the very reason the synchronous Ajax calls were deprecated

Answer 2

Try defining handlers for events as named functions , call .off() for each event attached to selector , reset handlers utilizing .on() when processing complete

$(function() {
  var headerFn = function(e) {
    alert(this.textContent)
  }

  var otherStuffFn = function(e) {
    alert(this.textContent)
  }

  var arr = [{
    type: "click",
    fn: headerFn
  }, {
    type: "click",
    fn: otherStuffFn
  }];

  var elems = $("header, div");

  elems.eq(0).click(headerFn);
  elems.eq(1).click(otherStuffFn);
  $("button").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $("html").css("pointer-events", "none").fadeTo(250, .2);
    $(this).next("span").text(function(_, txt) {
      if (txt === "status: not active") return txt;
      return txt.replace(/(active)/, "not " + "$1")
    });

    $.each(elems, function(key, el) {
      $(el).off(arr[key].type)
    });
    setTimeout(function() {
      $.each(elems, function(key, el) {
        $(el).on(arr[key].type, arr[key].fn)
      });
      $("+ span", this).text(function(_, txt) {
        return txt.replace(/not/, "")
      });
      $("html").css("pointer-events", "initial").fadeTo(250, 1);
    }.bind(this), 15000)
  })
})

header,
div {
  width: 100%;
  height: 150px;
  padding: 8px;
}
header {
  background: tomato;
}
div {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>click</button><span>status: active</span>
<header><i>click</i><br />header stuff</header>
<div><i>click</i><br />other stuff></div>