Saturday, November 2, 2013

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 :



1 comments on "Overriding jQuery ajaxStart and ajaxStop locally"

Add your comment. Please don't spam!
Subscribe in a Reader
Bianca on September 25, 2015 at 2:47 PM said...

Can this be used to overwrite the behavior on single page elements (modal dialog, buttons etc) as well or can it only be done for a whole page?

Post a Comment