This AJAXEvent ajaxStop registers a handler to be executed when all Ajax requests have completed.

Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time. The ajaxStop event is also triggered if the last outstanding Ajax request is cancelled by returning false within the beforeSend callback function.

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

<button class="trigger">Trigger</button>
<div class="result"></div>
<div class="log"></div>

Add ajaxComplete event into head section

<script type="text/javascript">
    $(document).ready(function(){
        $(document).ajaxStop(function() {
          $(".log").text("Triggered ajaxStop handler.");
        });
        $("button.trigger").on("click", function() {
          $("div.result").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).ajaxStop(function() {
                  $(".log").text("Triggered ajaxStop handler.");
                });
                $("button.trigger").on("click", function() {
                  $("div.result").load("data.txt");
                });
            });
        </script>
    </head>
    <body>
        <button class="trigger">Trigger</button>
        <div class="result"></div>
        <div class="log"></div>
    </body>
</html>

When the user clicks the element with class trigger and the Ajax request is completed, the log message is displayed.

Thanks for reading.

Output

ajaxStop

Tags:

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials | TwitterFacebook Google PlusLinkedin | Reddit

Leave a Reply

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