0

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!

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.

  • Sorry but this doesnt looks like a solution for me.. – Strae Sep 21 '12 at 7:39
  • You want show the overlay, when user clicks on some products in the add to cart. Am I right? – Mathankumar Sep 21 '12 at 7:42
  • Intercepting the request based on url is not a solution becose the url is /system/ajax; I guess Drupal use a unique url for ajax requests and control the behavior of the response with form_build_id attribute that is dynamic and binded server-side. – Strae Sep 21 '12 at 7:52
  • Oops! forgot that one. – Mathankumar Sep 21 '12 at 8:29
  • 1
    You can access the form_id and other details in settings.data(request params) – Mathankumar Sep 21 '12 at 9:06
0

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;
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.