jQuery ajaxError

This AJAXEvent ajaxError registers a handler to be called when Ajax requests complete with an error.

Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the .ajaxError() 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

<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).ajaxError(function() {
          $(".log").text("Triggered ajaxError handler because the requested file is missing.");
        });
        $("button.trigger").on("click", function() {
          $("div.result").load("missing.html");
        });
    });
</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).ajaxError(function() {
                  $(".log").text("Triggered ajaxError handler because the requested file is missing.");
                });
                $("button.trigger").on("click", function() {
                  $("div.result").load("missing.html");
                });
            });
        </script>
    </head>
    <body>
        <button class="trigger">Trigger</button>
        <div class="result"></div>
        <div class="log"></div>
    </body>
</html>

Thanks for reading.

Output

ajaxError

ajaxError

Leave a Reply

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