Magento Enterprise – Cart Coupon Code Form Not Working After AJAX Refresh

I tried some thing and it is working fine for me, i am sharing code hope this might be useful for someone else or one can suggest me the better approach.

In mage\app\design\frontend\your-design-package\default\template\catalog\product\list.phtml

Replace the following code

<?php if($_product->isSaleable()): ?>
      <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
<?php else: ?>

with

<?php if($_product->isSaleable()): ?>

<form class="product_addtocart_form" action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form_<?php echo $counter; ?>"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
    <?php echo $this->getBlockHtml('formkey') ?>
    <div class="no-display">
        <input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
        <input type="hidden" name="related_product" id="related-products-field" value="" />
    </div>

    <?php $buttonTitle = $this->__('Add to Cart'); ?>
    <div class="add-to-cart">
        <?php if(!$_product->isGrouped() && !$_product->isconfigurable()): ?>
        <label for="qty"><?php echo $this->__('Qty:') ?></label>
        <input type="text" name="qty" id="qty_<?php echo $counter; ?>" maxlength="12" value="<?php echo '1'; //echo $this->getProductDefaultQty() * 1 ?>" title="<?php echo $this->__('Qty') ?>" class="input-text qty" />
        <?php endif; ?>
        <button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" data-count="<?php echo $counter; ?>" data-ptype="<?php echo $_product->getTypeID(); ?>"><span><span><?php echo $buttonTitle ?></span></span></button>
        <?php echo $this->getChildHtml('', true, true) ?>
    </div>
</form>

<?php else: ?>

Remember i am generating form id and quantity field id with loop and as there are two display modes in magento category listing page List Mode and Grid Mode so you have to replace the above code in both areas.

id="product_addtocart_form_<?php echo $counter; ?>"

Also for button i have used two HTML5 data attributes data-count and data-ptype. In data-count i am just storing the value of $counter variable and in the data-ptype i am storing product type (i.e simple, grouped etc)

data-count="<?php echo $counter; ?>" data-ptype="<?php echo $_product->getTypeID(); ?>"

finally the javascript code

<script type="text/javascript">
//<![CDATA[
    // console.log(<?php //echo $counter; ?>);
    document.observe("dom:loaded", function() {
        var productAddToCartForm = new Array();
        for (var i = 0; i < <?php echo $counter; ?>; i++) {
            productAddToCartForm[i] = new VarienForm('product_addtocart_form_'+i);
            productAddToCartForm[i].submit = ajx_form_submit.bind(productAddToCartForm[i]);
            productAddToCartForm[i].submitLight = ajx_form_submitLight.bind(productAddToCartForm[i]);
        };

        $$('.btn-cart').each( function(item) {
            // console.log($(item).up('form').action);
            item.observe('click', function(event) {
                if (item.dataset.ptype == 'simple') {
                    ajaxcart.ajaxCartSubmit(productAddToCartForm[item.dataset.count]);
                } else if (item.dataset.ptype == 'grouped') {
                    formurl = $(item).up('form').action;
                    ajaxcart.ajaxCartSubmit(formurl);
                } else if (item.dataset.ptype == 'configurable') {
                    formurl = $(item).up('form').action + '?options=cart&ajax=true';
                    ajaxcart.getConfigurableOptions(formurl);
                }
                // productAddToCartForm[item.dataset.count].submit(item);
            });
        });
    });

    var ajx_form_submit = function(button, url) {
        if (this.validator.validate()) {
            var form = this.form;
            var oldUrl = form.action;

            if (url) {
               form.action = url;
            }
            var e = null;
            try {
                this.form.submit();
            } catch (e) {
            }
            this.form.action = oldUrl;
            if (e) {
                throw e;
            }

            if (button && button != 'undefined') {
                button.disabled = true;
            }
        }
    };

    var ajx_form_submitLight = function(button, url){
        if(this.validator) {
            var nv = Validation.methods;
            delete Validation.methods['required-entry'];
            delete Validation.methods['validate-one-required'];
            delete Validation.methods['validate-one-required-by-name'];
            // Remove custom datetime validators
            for (var methodName in Validation.methods) {
                if (methodName.match(/^validate-datetime-.*/i)) {
                    delete Validation.methods[methodName];
                }
            }

            if (this.validator.validate()) {
                if (url) {
                    this.form.action = url;
                }
                this.form.submit();
            }
            Object.extend(Validation.methods, nv);
        }
    };

    $$('.product_addtocart_form input.qty').each(function(el) {
        el.observe('blur', function(e){
            if( el.value <= 0 || isNaN(el.value) === true) {
                el.value = 1;
            }
        });
    });
//]]>
</script>

Assume that your form action url is checkout/cart/updatePost/ and have no customization at Mage_Checkout_CartController at updatePostAction().

Then you need to understand that the request to checkout/cart/updatePost does not render the cart page content. So if you tried to get the cart page content from the response, it's a waste of time. The response is a 302 redirect after the cart was updated.

So you need to use a customized cart controller.

Also make sure, that the form_key input field is present.