Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jquery load callback function

Suggested Videos
Part 52 - jquery floating div
Part 53 - jquery ajax load
Part 54 - jquery ajax load aspx page



In this video we will discuss the use of complete parameter of jquery load function.



Syntax
.load( url [, data ] [, complete ] )

complete parameter is a callback function that is executed when the request completes. The callback function has 3 parameters.

CallbackFunction(response, status, xhr)

In the following example, the anonymous function that is passed as the third parameter to the load function is executed when the AJAX request completes.

<html>
<head>
    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var textBoxes = $('input[type="text"]');
            textBoxes.focus(function () {
                var helpDiv = $(this).attr('id');
                $('#' + helpDiv + 'HelpDiv').load('GetHelpText.aspx', { HelpTextKey: helpDiv },
                      function (response, status, xhr) {
                          var errorMessage = 'status : ' + xhr.status + '<br/>';
                          errorMessage += 'status text : ' + xhr.statusText + '<br/>';
                          errorMessage += 'response : ' + response;
                          $('#divError').html(errorMessage);
                      });
            });

            textBoxes.blur(function () {
                var helpDiv = $(this).attr('id') + 'HelpDiv';
                $('#' + helpDiv).html('');
            });
        });
    </script>
</head>
<body style="font-family:Arial">
    <table>
        <tr>
            <td>First Name</td>
            <td><input id="firstName" type="text" /></td>
            <td><div id="firstNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input id="lastName" type="text" /></td>
            <td><div id="lastNameHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input id="email" type="text" /></td>
            <td><div id="emailHelpDiv"></div></td>
        </tr>
        <tr>
            <td>Income</td>
            <td><input id="income" type="text" /></td>
            <td><div id="incomeHelpDiv"></div></td>
        </tr>
    </table>
    <br />
    <div id="divError"></div>
</body>
</html>

If you want the code in the callback function to execute only if these is an error, you can do so using status parameter as shown below.
$('#' + helpDiv + 'HelpDiv').load('GetHelpText.aspx', { HelpTextKey: helpDiv },
    function (response, status, xhr) {
        if (status == 'error') {
            var errorMessage = 'status : ' + xhr.status + '<br/>';
            errorMessage += 'status text : ' + xhr.statusText + '<br/>';
            errorMessage += 'response : ' + response;
            $('#divError').html(errorMessage);
        }
    });

jQuery tutorial for beginners

1 comment:

  1. hi first cannot thank u enough for your wonderful work

    when i use textBoxes.focus(function () {

    i got endless calls to GetHelpText.aspx
    my guess cause the load trigger the focus event
    when i use $(textBoxes).on("focus", function () {

    it work fine

    doron

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.