jQuery ajaxComplete

This AJAXEvent ajaxComplete registers a handler to be called when Ajax requests complete.

Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time.

To observe this method in action, do the following

Add jQuery libs from CDN into head section in HTML page

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Write few HTML tags into body section

<div id="txt"><h2>Let AJAX change this text</h2></div>
<button>Change Above Text</button>
<div id="msg"/>
<div id="wait" style="display:none;">Loading..</div>

Add ajaxComplete event into head section

<script type="text/javascript">
    $(document).ready(function(){
        $(document).ajaxStart(function(){
            $("#wait").css("display", "block");
        });
        $(document).ajaxComplete(function(){
            $("#wait").css("display", "none");
            //$("#msg").append("<li>Request Complete.</li>");
            $("#msg").html("<li>Request Complete.</li>");
        });
        $("button").click(function(){
            $("#txt h2").load("data.txt");
        });
    });
</script>

The complete HTML page

<!doctype html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(document).ajaxStart(function(){
                    $("#wait").css("display", "block");
                });
                $(document).ajaxComplete(function(){
                    $("#wait").css("display", "none");
                    //$("#msg").append("<li>Request Complete.</li>");
                    $("#msg").html("<li>Request Complete.</li>");
                });
                $("button").click(function(){
                    $("#txt h2").load("data.txt");
                });
            });
        </script>
    </head>
    <body>
        <div id="txt"><h2>Let AJAX change this text</h2></div>
        <button>Change Above Text</button>
        <div id="msg"/>
        <div id="wait" style="display:none;">Loading..</div>
    </body>
</html>

Thanks for reading.

Output

ajaxComplete

 

ajaxComplete

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *