Ajax: how to prepend my callbacks?

Question

I have an e-commerce based on Drupal + Commerce module.

My add to cart form use Ajax to reload itself when the user make a choice (item attributes, like color, size, etc..); Everythings works just fine but i need to add an overlay that hide the form just before the Ajax request is sent to prevent the user to click another option before the request has completed (and the form reloaded).

Basically, I need to add my own callbacks in the beforeSend and success events, but I have no idea on how tell Drupal to invoke them for (and only for) this specific form.

edit: I need to add a Javascript Callback, not php.

Any help?

Edit Mathankumar's solution indeed works, something like:

$(document).ajaxSend(function(event, request, object){
    request.onloadstart = function(){
        $("form.commerce-add-to-cart").css({'opacity':0.5});
        $("form.commerce-add-to-cart input").attr("disabled", "disabled");
    };

    request.onloadend = function(){
        $("form.commerce-add-to-cart").css({'opacity':1});
        $("form.commerce-add-to-cart input").removeAttr("disabled");
    };
});

works BUT i dont like this thing to be run for every ajax call.

I digged the event, request, object parameters of ajaxSend, but i was not able to find nothing about the form_id or something to tell the add_to_cart_form requests from others, any help is appreciated!

Answer 1

You can use the following snippet,

jQuery('body').ajaxSend(function((evt, request, settings)){
  if (settings.url == "<something>") {
    // Perform your operations
  }
});

However this function will be called for all the ajax requests, so you need to have perfect condition to determine the right URL.

Answer 2

A bit tricky, but this works:

$(document).ajaxSend(function(event, request, object){
    var test = getParameterByName('form_id', object.data);

    if(test.indexOf('commerce_cart_add_to_cart_form'))
    {
        request.onloadstart = function(){
            // beforeSend
            $("form.commerce-add-to-cart").css({'opacity':0.5});
            $("form.commerce-add-to-cart input").attr("disabled", "disabled");
        };

        request.onloadend = function(){
            // ajax request has ended
            $("form.commerce-add-to-cart").css({'opacity':1});
            $("form.commerce-add-to-cart input").removeAttr("disabled");
        };
    }
});

    //@link http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values/5158301#5158301
function getParameterByName(name, durl)
{
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(durl);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

// We all remember about IE, doesnt we?
if(!Array.indexOf) {
    Array.prototype.indexOf = function (obj, start) {
        for (var i = (start || 0); i < this.length; i++) {
            if (this[i] == obj) {
                return i;
            }
        }
        return -1;
    }
}