unable to abort last ajax request with ajax add to cart option

[sarrafjay]

i am using ajax add to cart extension to add cart to my products. the problem is when i delete a product from my sidebar cart block there is a confirmation dialogue whether to delete or cancel deletion process, when i opt to choose OK to delete it deletes the product from my sidebar and when i opt CANCEL to not to delete it again deletes the product from my cart. 

here is my javascript :

function show_confirm()
{
     var r =  confirm("Are you sure you want to do this? This is totally hazardous!");

    if (r==true)
    {
      return true;
    }
    else
    {
    $(document).click(function() {ajaxCartSubmit.abort() });
    }
}

and this is my ajaxcart.js

var ajaxcart = {
    g: new Growler(),
    initialize: function() {
        this.g = new Growler();		
        this.bindEvents();
    },
    bindEvents: function () {
        this.addSubmitEvent();

        $$('a[href*="/checkout/cart/delete/"]').each(function(e){
            $(e).observe('click', function(event){
                setLocation($(e).readAttribute('href'));
                Event.stop(event);
            });
        });        
    },
    ajaxCartSubmit: function (obj) {
        var _this = this;
        if(Modalbox !== 'undefined' && Modalbox.initialized)Modalbox.hide();

        try {
            if(typeof obj == 'string') {
                var url = obj;

                new Ajax.Request(url, {
                    onCreate	: function() {
                        _this.g.warn("Processing", {
                            life: 5
                        });
                    },
                    onSuccess	: function(response) {
                        // Handle the response content...
                        try{
                            var res = response.responseText.evalJSON();
                            if(res) {
                                //check for group product's option
                                if(res.configurable_options_block) {
                                    if(res.r == 'success') {
                                        //show group product options block
                                        _this.showPopup(res.configurable_options_block);
                                    } else {
                                        if(typeof res.messages != 'undefined') {
                                            _this.showError(res.messages);
                                        } else {
                                            _this.showError("Something bad happened");
                                        }
                                    }
                                } else {
                                    if(res.r == 'success') {
                                        if(res.message) {
                                            _this.showSuccess(res.message);
                                        } else {
                                            _this.showSuccess('Item was added into cart.');
                                        }

                                        //update all blocks here
                                        _this.updateBlocks(res.update_blocks);

                                    } else {
                                        if(typeof res.messages != 'undefined') {
                                            _this.showError(res.messages);
                                        } else {
                                            _this.showError("Something bad happened");
                                        }
                                    }
                                }
                            } else {
                                document.location.reload(true);
                            }
                        } catch(e) {
                        //window.location.href = url;
                        //document.location.reload(true);
                        }
                    }
                });
            } else {
                if(typeof obj.form.down('input[type=file]') != 'undefined') {

                    //use iframe

                    obj.form.insert('<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid #fff;"></iframe>');

                    var iframe = $('upload_target');
                    iframe.observe('load', function(){
                        // Handle the response content...
                        try{
                            var doc = iframe.contentDocument ? iframe.contentDocument : (iframe.contentWindow.document || iframe.document);
                            console.log(doc);
                            var res = doc.body.innerText ? doc.body.innerText : doc.body.textContent;
                            res = res.evalJSON();

                            if(res) {
                                if(res.r == 'success') {
                                    if(res.message) {
                                        _this.showSuccess(res.message);
                                    } else {
                                        _this.showSuccess('Item was added into cart.');
                                    }

                                    //update all blocks here
                                    _this.updateBlocks(res.update_blocks);

                                } else {
                                    if(typeof res.messages != 'undefined') {
                                        _this.showError(res.messages);
                                    } else {
                                        _this.showError("Something bad happened");
                                    }
                                }
                            } else {
                                _this.showError("Something bad happened");
                            }
                        } catch(e) {
                            console.log(e);
                            _this.showError("Something bad happened");
                        }
                    });

                    obj.form.target = 'upload_target';

                    //show loading
                    _this.g.warn("Processing", {
                        life: 5
                    });

                    obj.form.submit();
                    return true;

                } else {
                    //use ajax

                    var url	 = 	obj.form.action,
                    data =	obj.form.serialize();

                    new Ajax.Request(url, {
                        method		: 'post',
                        postBody	: data,
                        onCreate	: function() {
                            _this.g.warn("Processing", {
                                life: 5
                            });
                        },
                        onSuccess	: function(response) {
                            // Handle the response content...
                            try{
                                var res = response.responseText.evalJSON();

                                if(res) {
                                    if(res.r == 'success') {
                                        if(res.message) {
                                            _this.showSuccess(res.message);
                                        } else {
                                            _this.showSuccess('Item was added into cart.');
                                        }

                                        //update all blocks here
                                        _this.updateBlocks(res.update_blocks);

                                    } else {
                                        if(typeof res.messages != 'undefined') {
                                            _this.showError(res.messages);
                                        } else {
                                            _this.showError("Something bad happened");
                                        }
                                    }
                                } else {
                                    _this.showError("Something bad happened");
                                }
                            } catch(e) {
                                console.log(e);
                                _this.showError("Something bad happened");
                            }
                        }
                    });
                }
            }
        } catch(e) {
            console.log(e);
            if(typeof obj == 'string') {
                window.location.href = obj;
            } else {
                document.location.reload(true);
            }
        }
    },
    
    getConfigurableOptions: function(url) {
        var _this = this;
        new Ajax.Request(url, {
            onCreate	: function() {
                _this.g.warn("Processing", {
                    life: 5
                });
            },
            onSuccess	: function(response) {
                // Handle the response content...
                try{
                    var res = response.responseText.evalJSON();
                    if(res) {
                        if(res.r == 'success') {
                            
                            //show configurable options popup
                            _this.showPopup(res.configurable_options_block);

                        } else {
                            if(typeof res.messages != 'undefined') {
                                _this.showError(res.messages);
                            } else {
                                _this.showError("Something bad happened");
                            }
                        }
                    } else {
                        document.location.reload(true);
                    }
                } catch(e) {
                window.location.href = url;
                //document.location.reload(true);
                }
            }
        });
    },

    showSuccess: function(message) {
        this.g.info(message, {
            life: 5
        });
    },

    showError: function (error) {
        var _this = this;

        if(typeof error == 'string') {
            _this.g.error(error, {
                life: 5
            });
        } else {
            error.each(function(message){
                _this.g.error(message, {
                    life: 5
                });
            });
        }
    },

    addSubmitEvent: function () {

        if(typeof productAddToCartForm != 'undefined') {
            var _this = this;
            productAddToCartForm.submit = function(url){
                if(this.validator && this.validator.validate()){
                    _this.ajaxCartSubmit(this);
                }
                return false;
            }

            productAddToCartForm.form.onsubmit = function() {
                productAddToCartForm.submit();
                return false;
            };
        }
    },

    updateBlocks: function(blocks) {
        var _this = this;

        if(blocks) {
            try{
                blocks.each(function(block){
                    if(block.key) {
                        var dom_selector = block.key;
                        if($$(dom_selector)) {
                            $$(dom_selector).each(function(e){
                                $(e).update(block.value);
                            });
                        }
                    }
                });
                _this.bindEvents();
                _this.bindNewEvents();

                // show details tooltip
                truncateOptions();
            } catch(e) {
                console.log(e);
            }
        }

    },
    
    bindNewEvents: function() {
        // =============================================
        // Skip Links (for Magento 1.9)
        // =============================================
        
        // Avoid PrototypeJS conflicts, assign jQuery to $j instead of $
        if (typeof(jQuery) != undefined) {

            var $j = jQuery.noConflict();
            var skipContents = $j('.skip-content');
            var skipLinks = $j('.skip-link');

            if (typeof(skipContents) != undefined && typeof(skipLinks) != undefined) {
                
                skipLinks.on('click', function (e) {
                    e.preventDefault();

                    var self = $j(this);
                    var target = self.attr('href');

                    // Get target element
                    var elem = $j(target);

                    // Check if stub is open
                    var isSkipContentOpen = elem.hasClass('skip-active') ? 1 : 0;

                    // Hide all stubs
                    skipLinks.removeClass('skip-active');
                    skipContents.removeClass('skip-active');

                    // Toggle stubs
                    if (isSkipContentOpen) {
                        self.removeClass('skip-active');
                    } else {
                        self.addClass('skip-active');
                        elem.addClass('skip-active');
                    }
                });

                $j('#header-cart').on('click', '.skip-link-close', function(e) {
                    var parent = $j(this).parents('.skip-content');
                    var link = parent.siblings('.skip-link');

                    parent.removeClass('skip-active');
                    link.removeClass('skip-active');

                    e.preventDefault();
                });
            }
        }
    },
    
    showPopup: function(block) {
        try {
            var _this = this;
            //$$('body')[0].insert({bottom: new Element('div', {id: 'modalboxOptions'}).update(block)});
            var element = new Element('div', {
                id: 'modalboxOptions',
                class: 'product-view'
            }).update(block);
            
            var viewport = document.viewport.getDimensions();
            Modalbox.show(element,
            {
                title: 'Please Select Options', 
                width: 510,
                height: viewport.height,
                afterLoad: function() {
                    _this.extractScripts(block);
                    _this.bindEvents();
                }
            });
        } catch(e) {
            console.log(e)
        }
    },
    
    extractScripts: function(strings) {
        var scripts = strings.extractScripts();
        scripts.each(function(script){
            try {
                eval(script.replace(/var /gi, ""));
            }
            catch(e){
                console.log(e);
            }
        });
    }

};

var oldSetLocation = setLocation;
var setLocation = (function() {
    return function(url){
        if( url.search('checkout/cart/add') != -1 ) {
            //its simple/group/downloadable product
            ajaxcart.ajaxCartSubmit(url);
        } else if( url.search('checkout/cart/delete') != -1 ) {
            ajaxcart.ajaxCartSubmit(url);
        } else if( url.search('options=cart') != -1 ) {
            //its configurable/bundle product
            url += '&ajax=true';
            ajaxcart.getConfigurableOptions(url);
        } else {
            oldSetLocation(url);
        }
    };
})();

setPLocation = setLocation;

document.observe("dom:loaded", function() {
    ajaxcart.initialize();
})

[KuafuSoft]

in the else block if the confirm, you binded a click listener but not executing it, it shouod be simply 

ajaxCartSubmit.abort()

I don't see where you call  

show_confirm()

I guess its in the _g.warn(), could't you call it before the ajax get executed at all, and only run the ajax when user click yes?

[sarrafjay]

i am calling my javacript function onclick event in the checkout/cart/sidebar/default.phtml

<div class="product-details">
<a href="<?php echo $this->getDeleteUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>" onclick="return show_confirm()" class="btn-remove"><?php echo $this->__('Remove This Item') ?></a>

i have also tried the ajaxCartSubmit.abort();

 but it is also not working.

can u please elaborate it.. ? where should i stop the ajax call before getting executed..  inside my ajaxcart.js ?

[KuafuSoft]

simply return false in else

[sarrafjay]

i have already tried return false, but actually nothing works, when i click the cancel button it simply removes the product instead of cancelling the deletion,

function show_confirm()
{
    var r=confirm("Are you sure you want to do this? This is totally hazardous!");
    if (r==true)
    {
      return true;
    }
    else
    {
      return false;
    }
}

function show_confirm()
{
    return confirm("Are you sure you want to do this? This is totally hazardous!");
}

above none of them works for me .. !! 

 so i tried replacing return false with ajax.stop(); it didnt work either .. 
please give me other solution if u have.. 

[KuafuSoft]

OK, try this

function show_confirm()
{
     var r =  confirm("Are you sure you want to do this? This is totally hazardous!");

    if (r==true)
    {
      return true;
    }
    else
    {
      event.stopImmediatePropagation();
    }
}

[sarrafjay]

sorry, didnt worked

it threw an exception page with 

{"message":"Item was Successfully removed.","update_blocks":[{"key":".minicart-panel","value":"<div class=\"block block-cart\">\n        <div class=\"block-title\">\n        <strong><span>My Basket<\/span><\/strong>\n    <\/div>\n    <div class=\"block-content\">\n                        <p class=\"empty\">Empty basket? <br> Add something to your basket.<\/p>\n        <\/div>\n<\/div>\n"},{"key":".links","value":" <ul class=\"links\">\n                                 <li class=\"first\" ><a href=\"http:\/\/shopturant.com\/customer\/account\/?___SID=U\" title=\"My Account\" >My Account<\/a>                       \n            <\/li>\n                \n                        <li ><a href=\"http:\/\/shopturant.com\/wishlist\/?___SID=U\" title=\"My Wishlist\" >My Wishlist<\/a><\/li>\r\n                \n                        <li id=\"minicart\">\n  <div id=\"minicart-link\">\n    <a href=\"http:\/\/shopturant.com\/checkout\/cart\/?___SID=U\">My Basket: <span class=\"price\">Rs.0.00<\/span><\/a>  <\/div>\n  <div id=\"minicart-panel\" style=\"display:none;\">\n    <div class=\"block block-cart\">\n        <div class=\"block-title\">\n        <strong><span>My Basket<\/span><\/strong>\n    <\/div>\n    <div class=\"block-content\">\n                        <p class=\"empty\">Empty basket? <br> Add something to your basket.<\/p>\n        <\/div>\n<\/div>\n  <\/div>\n<\/li>                \n                                 <li class=\" last\" ><a href=\"http:\/\/shopturant.com\/customer\/account\/login\/?___SID=U\" title=\"Quick Log In\" >Quick Log In<\/a>                                                           \n            <\/li>\n                \n    <\/ul>\n \n<!--\n<ul class=\"links\">\n                        <li class=\"first\" ><a href=\"http:\/\/shopturant.com\/customer\/account\/?___SID=U\" title=\"My Account\" >My Account<\/a>                                                           \n            <\/li>\n                                <li ><a href=\"http:\/\/shopturant.com\/wishlist\/?___SID=U\" title=\"My Wishlist\" >My Wishlist<\/a><\/li>\r\n                                <li id=\"minicart\">\n  <div id=\"minicart-link\">\n    <a href=\"http:\/\/shopturant.com\/checkout\/cart\/?___SID=U\">My Basket: <span class=\"price\">Rs.0.00<\/span><\/a>  <\/div>\n  <div id=\"minicart-panel\" style=\"display:none;\">\n    <div class=\"block block-cart\">\n        <div class=\"block-title\">\n        <strong><span>My Basket<\/span><\/strong>\n    <\/div>\n    <div class=\"block-content\">\n                        <p class=\"empty\">Empty basket? <br> Add something to your basket.<\/p>\n        <\/div>\n<\/div>\n  <\/div>\n<\/li>                                <li class=\" last\" ><a href=\"http:\/\/shopturant.com\/customer\/account\/login\/?___SID=U\" title=\"Quick Log In\" >Quick Log In<\/a>                       \n            <\/li>\n            <\/ul>\n -->"},{"key":".checkout-cart-index .cart","value":"<div class=\"page-title\">\n    <h1>Shopping Cart is Empty<\/h1>\n<\/div>\n<div class=\"cart-empty\">\n            <p>You have no items in your shopping cart.<\/p>\n    <p>Click <a href=\"http:\/\/shopturant.com\/?___SID=U\">here<\/a> to continue shopping.<\/p>\n    <\/div>\n"}],"r":"success"}

[KuafuSoft · Accepted solution]

OK, that simi worked, we still need the return false;

function show_confirm()
{
     var r =  confirm("Are you sure you want to do this? This is totally hazardous!");

    if (r==true)
    {
      return true;
    }
    else
    {
      event.stopImmediatePropagation();
      return false;
    }
}

[sarrafjay]

thanks that worked like a charm !!