Disabling Controls During AJAX Calls

 

When there is an AJAX call going through, you should disable the control that makes the AJAX call and also the controls whose contents will be updated by the AJAX call. In this tutorial, I will show how to disable the controls during AJAX calls.

Creating the Mock-up AJAX feature

Consider a situation when a user logs in to a website. He/she enters the username and password and then clicks the Submit button. The HTML code of the control is given below.

<div id="content">
    <h3><b><u>Login</u></b></h3>
    <table>
        <tr>
            <td>Username:
            </td>
            <td>
                <input type="text" id="userNameTextBox" />
            </td>
        </tr>
        <tr>
            <td>Password:
            </td>
            <td>
                <input type="text" id="passwordTextBox" />
            </td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="submit" id="submitButton" value="Login" />
            </td>
        </tr>
    </table>
    <img id="loadingImg" src="loading.gif" />
    <div id="messageDiv"></div>
</div>

I have a “content” div which contains a “table”. The “table” contains “Username” & “Password” input controls along with a “submitButton”.

After the table, there is an “img” control that will show the loading image during AJAX call. I have also kept a “messageDiv” that will show the message when a user gets logged in to the website.

Note

My aim here is to disable the “username” & “password” input controls and also, the button control when AJAX call is made. I will also show the loading image over the center of the “Content” div during AJAX calls.

Add the CSS to the page

The CSS which you have to add to this page is mentioned below.

#content {
            position: relative;
            border: dashed 2px #CCC;
}

    #content #loadingImg {
        display: none;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    #content table {
        margin: auto;
    }

    #content #messageDiv {
        text-align: center;
    }

Note

To show the image at the center of “content” div, first, set the position of the “content” div to "relative". Then, for the image, set its position to "absolute", margin to "auto", and “top,left,right & bottom” properties to 0.

Initially, the image will remain hidden but when AJAX call starts, it will be shown. Similarly, on completion of the AJAX call, the image will again be hidden.

Add the jQuery code to the page 

On the button click, the AJAX call will be made using .ajax() method. The jQuery code for this is as follows.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).ajaxStart(function () {
            $("table").css("background-color", "Grey");
            $("table input").prop("disabled", true);

            $("#loadingImg").show();
        });

        $(document).ajaxStop(function () {
            $("#loadingImg").hide();
            $("table").hide();
        });

        $("#submitButton").click(function (e) {
            if (($("#userNameTextBox").val() == "") || ($("#passwordTextBox").val() == ""))
                alert("Your must fill both Username and Password");
            else {
                $.ajax({
                    type: "POST",
                    url: "index.aspx/login",
                    contentType: "application/json; charset=utf-8",
                    data: '{"username":"' + $("#userNameTextBox").val() + '","password":"' + $("#passwordTextBox").val() + '"}',
                    dataType: "json",
                    success: function (msg) {
                        if (msg.d) {
                            $("#messageDiv").html(msg.d);
                        }
                    },
                    error: function (req, status, error) {
                        alert(req + " " + status + " " + error);
                    }
                });
            }
            return false;
        });
    });
</script>

The .ajaxStart() method will be called when the AJAX call starts while .ajaxStop() method is called when the AJAX call has returned some value.

Inside in the .ajaxStart() method, I am setting the background of the table to grey color and disabling all the input controls (2 textboxes and 1 button). I am also showing the image control which will show in the middle of the “content” div (check its CSS).

Note - You can also do the AJAX call using jQuery Post method. The .ajaxStart() & .ajaxStop() methods will work the same way. 

Similarly, in the .ajaxStop() method, I am hiding both the table and the image. If you check the jQuery AJAX code under the button click event, you will see that I have called the C# function named “login” and passing to it the 2 textboxes values.

This C# login function will get the username and password values, then it checks them against the database stored login and passwords. If it finds them on the database table, the user is logged in.

The code of the login function is as following.

[System.Web.Services.WebMethod]
public static string login(string username, string password)
{
    //checks the database values and returns the appropriate message.
    System.Threading.Thread.Sleep(2000);
    return "Login Successful";
}

Note - To see the loading image, I have delayed the AJAX response by 2000 milliseconds.

 

Testing the page

Run the page in the browser, enter any value for username and password, and click the Login button. The loading image will show in the middle of the “content” div and the input controls will be disabled.

 

After 2 seconds (approximately), when AJAX call completes, both, the image and the table, are hidden.

You can see the demo of this feature here - DEMO