Overriding jQuery ajaxStart and ajaxStop locally

While performing ajax calls, I use to provide provide visual indicators for better user experience.
My preferred method is showing a modal at jQuery.ajaxStart which gets hidden at jQuery.ajaxStop

The code goes like this

    $(document).on("ajaxStart", function () {
        $("#jQueryAjaxmodal").modal("show");
    }).on("ajaxStop", function () {
        $("#jQueryAjaxmodal").modal("hide");
    });

But this causes problem when one uses something like jQuery.autocomplete as ajaxStart fires on every keyup. To override this for a particular page, do this

1. Namespace the ajaxStart and ajaxStop like this

    $(document).on("ajaxStart.myblock", function () {
        $("#jQueryAjaxmodal").modal("show");
    }).on("ajaxStop.myblock", function () {
        $("#jQueryAjaxmodal").modal("hide");
    });

2. Now on the DOM Ready of the page on which you wanna override this behaviour, unbind it

    $(document).on("ready", function () {
        $(document).off(".myblock");
    });

Courtesy: jQuery should I use multiple ajaxStart/ajaxStop handling

Related Posts :