jQuery best way to block any other processes while waiting for Ajax completion

Question

It is jQuery.

I have a signup form. At the domain textbox field, people fill in domain, then onblur Ajax call to registar API for validation on domain availability.

The validation may take up to 15 seconds depending on network speed.

In this waiting period, if user go to click submit button, how to block?

My idea is simple: Before any Ajax call finish loading, I don't want to allow people to click submit.

I can think of a way, but I am not sure whether this is a good way. I need advice.

beforeSend: function(){
    $("#btnSubmit").attr("disabled", "disabled");
},

complete: function(){
    $("#btnSubmit").attr("disabled", "");
}

<input type="button" name="btnSubmit" id="btnSubmit" value="my button" />

Answer 1

No matter how you do it in the end, be sure to show some progress indicator while your are validating.

If the user fills out every form element and cannot press the submit button afterwards (because the validation process is still running) he/she gets very confused.

15 seconds is a long time so make sure that the user knows what is going on.

Answer 2

Setting async to false might work but that might hang the browser completely for 15 seconds. Your best bet is to disable the submit element and prevent the submit in other ways using a variable where you store whether the validation is in process:

var validating = false;

$(function() {

    $('form').submit(function() {
        if(validating) return false;
        var button = $(this).find('input:submit, input:button');

        button.attr('disabled', 'disabled');
        validating = true;

        $.ajax({
            url: 'validator.php',
            data: $(this).serialize(),
            success: function() {
                validating = false;
                button.removeAttr('disabled');
            }
        });
    });
});

This way the user cannot submit the form in any other means. If you only disable the submit button, it might be possible to submit the form with the enter key (not sure about this). Using a variable which tells whether the validation is running is a sure way to prevent accidental submitting.

Answer 3

Whatever you do don't use async: false on your Ajax calls, particularly because your request is so long-lived (15 seconds). It will disable all JavaScript until the Ajax call completes.

Your way of doing it is fine. You can generalize it using jQuery's global Ajax event handlers. Give each relevant input control an appropriate marker class like "ajax":

<input type="button" class="ajax" value="Register Domain">

with:

$(document).ajaxStart(function() {
  $(".ajax").attr("disabled", true);
}).ajaxComplete(function() {
  $(".ajax").removeAttr("disabled");
});

So what you're doing here is listening to global Ajax events and while they're underway you disable all controls that you don't want to be clicked while the Ajax call is underway.

Answer 4

I have experienced this situation myself. My approach was opening a small modal window with a wainting GIF and some explanatory text.

When the Ajax call ends I close the modal window.

I hope it helps.

Answer 5

Input button:

<input typ="submit" value="Register" onsubmit="return ajaxCheck();" />

Js code:

var onAjax = false;
function ajaxCheck(){
  if(onAjax)
    return false;
  else
    return true;
}


$("element").onblur(function(){
  onAjax = true;
  //whatever you need to do here
  $.ajax({
    //standard params
    success: function(){
      onAjax = false;
    },
    failure: function(){
      onAjax = false;
    }
  });
});

Answer 6

Have a look at BlockUi.

It's very easy to implement. You can block elements, or even the whole page with a processing type message, so that the user knows something is going on. Then you simply unblock it on your ajax call complete.

An example as I've used it

$('#elementtobloack').block({
        centerY: 0,
        message: 'Some useful message'       
    });

 $.ajax(
            {
                type: "POST",
                url: "...",
                data: "{}",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    //do something
                    //unblock your element 
                    $('#elementtoblock').unblock();
                },
                error: function(msg) {
                    //do something on error -- alert(msg.responseText);
                    //unblock on failure as well or the element will remain blocked
                    $('#elementtobloak').unblock();
                }
            });