How to have specific events fire if you can only bind ajaxStart to document?

Question

As of jQuery 1.8, the .ajaxStart() method should only be attached to document.

I have two different forms on my page, both which I want to submit using ajax, and display a 'sending' while it's happening. I want #contact_response to display a message when the #contact_form is submitted like so:

$(document).ajaxStart(function() {
    $("#contact_response").html("Sending...");  
});

And similarly, #booking_response to display a message when #booking_form is submitted. However, doing this causes the other element to display Sending.... If you're only meant to attach ajaxStart() to the document, how are you meant to send multiple responses, but only update certain sections?

Is this the wrong function to use?

score 0 · Answer 1 · answered Mar 12 '14 at 10:37

You could use:

$(document).ajaxSend(function (event, xhr, options) {
    if (options.url === "targetedScriptPath") $("#contact_response").html("Sending..."); 
}).ajaxComplete(function (event, xhr, options) {
    if (options.url === "targetedScriptPath") $("#contact_response").empty(); 
});

score 0 · Answer 2 · answered Mar 12 '14 at 10:50

as far as i know the ajaxStart() and ajaxStop() functions are good if you want to trigger something globally on your page when some ajax-action is going on.
i ran over a similar problem, and that's how i solved it: just trigger the action with the event that submits your form (maybe some click-event) or add an event-listener for the form submission like for example:

$('#contact_form').on("submit", function() {
    $("#contact_response").html("Sending...");
});
$('#booking_form').on("submit", function() {
    $("#booking_response").html("Sending...");
});

to trigger the action after the ajax function has been completed, use the callback-function of whatever ajax function you are using:

$.post("booking_update.php", {
        //post vars
        post_var1: post_text
    }, 
    function(result) {
        //callback function
        $("#booking_response").html("Success!");
    }
);

How to have specific events fire if you can only bind ajaxStart to document?

2 Answers2