How to Detect AJAX Complete Event in Magento

ajaxcheckoutjqueryprototype-js

I have button on checkout page. When I clicked on that button, an ajax event it is called and returns me a HTML code, which is actually the html code from the next step(payments step). I want to add some CSS code after the ajax event. How can I do that? I tried, by using the ajaxComplete function, but its not firing.

 jQuery(document).ready(function(){ 
        jQuery(document).ajaxError(function(e, jqxhr, settings, exception) {
            alert(exception);
        })
 })

or

jQuery('body').ajaxComplete(function(event, xhr, settings ) {
        alert(settings.url);
    });

or prototype:

new Ajax.Request('<?php echo $this->getUrl('checkout/onepage/saveBilling') ?>', {
          onComplete: function(response) {
            if (200 == response.status)
               alert(01);
          }
        });

Neither of them are not working! any idea why ?
UPDATE This is part of the code from opcheckout.js

save: function(){
        if (checkout.loadWaiting!=false) return;
        var validator = new Validation(this.form);
        if (this.validate() && validator.validate()) {
            checkout.setLoadWaiting('payment');
            var request = new Ajax.Request(
                this.saveUrl,
                {
                    method:'post',
                    onComplete: this.onComplete,
                    onSuccess: this.onSave,
                    onFailure: checkout.ajaxFailure.bind(checkout),
                    parameters: Form.serialize(this.form)
                }
            );
        }
    },

Where can i add a condition after onComplete?

Best Answer

You should be able to wrap the onComplete method to add your CSS.

Billing.prototype.save  = Billing.prototype.save.wrap(function(parentMethod){
    // call the parent so normale behavior is executed 
    parentMethod();

    alert("Put your CSS here");
});
Related Topic