I've got a button, which is part of the provided code in my Magento theme, and according to the date/time stamp, I haven't inadvertantly edited it. I'm sure that it was working at some point, but a glance back into my source control over the last week, and I can't seem to track down where things went wrong.

Here is the button HTML:

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>

... but when I click on it nothing happens. Seems pretty straight forward, except I can't see if/where there is a typo, etc. So, I check Firebug and I see the following error:

However, when I go to "View page source", the script is indeed in the page:

<script type="text/javascript">
//<![CDATA[
    var productAddToCartForm = new VarienForm('product_addtocart_form');
    productAddToCartForm.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;
            }
        }
    }.bind(productAddToCartForm);

    productAddToCartForm.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'];
            if (this.validator.validate()) {
                if (url) {
                    this.form.action = url;
                }
                this.form.submit();
            }
            Object.extend(Validation.methods, nv);
        }
    }.bind(productAddToCartForm);
//]]>
</script>

I've got a button, which is part of the provided code in my Magento theme, and according to the date/time stamp, I haven't inadvertantly edited it. I'm sure that it was working at some point, but a glance back into my source control over the last week, and I can't seem to track down where things went wrong.

Here is the button HTML:

<button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>

... but when I click on it nothing happens. Seems pretty straight forward, except I can't see if/where there is a typo, etc. So, I check Firebug and I see the following error:

However, when I go to "View page source", the script is indeed in the page:

<script type="text/javascript">
//<![CDATA[
    var productAddToCartForm = new VarienForm('product_addtocart_form');
    productAddToCartForm.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;
            }
        }
    }.bind(productAddToCartForm);

    productAddToCartForm.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'];
            if (this.validator.validate()) {
                if (url) {
                    this.form.action = url;
                }
                this.form.submit();
            }
            Object.extend(Validation.methods, nv);
        }
    }.bind(productAddToCartForm);
//]]>
</script>

• javascript
• magento

Share Improve this question Follow edited May 24, 2011 at 19:38 jefflunt asked May 24, 2011 at 19:16 jeffluntjefflunt 33.9k77 gold badges9191 silver badges127127 bronze badges 6

• 2 Does your Magento theme use multiple JavaScript libraries (e.g. jQuery and prototype.js)? I'd suggest removing the link to jQuery and any additional plugins/scripts, check if the issue still occurs, then use jQuery's noConflict() method to avoid conflicts with prototype.js and include those scripts again if all is well at that point. – Nick Commented May 24, 2011 at 19:40
• 1 Is your script in the <head> section> – Jeff Commented May 24, 2011 at 19:43
• It's not in the head section. It's in the middle of the page. – jefflunt Commented May 24, 2011 at 20:04
• @Nick - removing JQuery worked to restore functionality of the "Add to cart" button. I'm trying the 'noConflict()' deal now. – jefflunt Commented May 24, 2011 at 20:10
• @Nick - this is definitely it. I played around with the noConflict() option. Unfortunately, when using noConflict, the plugin I've added (jPlayer) breaks. It's like I can have one or the other. I'm trying to figure out the best way to integrate them. – jefflunt Commented May 24, 2011 at 20:36

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 3

The $ variable is in conflict with other JavaScript libraries being used. Removing the inclusion of the jQuery library should bring back the other functionality, in order to prove that is the problem.

In order to fix it, either rewrite the jPlayer code (replacing $ with jQuery), or try using the jQuery.noConflict() function.

I.e., this: $(document).ready(function(){ ...

... bees that: jQuery(document).ready(function(){ ...

More details can be found in the jQuery.noConflict() documentation.

In this particular example in my question above, I solved it by using noConflict() in the following way:

$.noConflict();
jQuery(document).ready(function(){
  jQuery("#jquery_jplayer").jPlayer({
    ready: function () {      
      jQuery(this).jPlayer("setMedia", {
        mp3: jQuery('#jquery_jplayer').attr('media_file')
      });
    },
    swfPath: "/js/jplayer",
    supplied: "mp3"
  });
});

it seems like the productAddToCartForm is not getting instantiated

You could try to use firebug to create a VarienForm object from the console to see if its returning an object.

var tmpobj = new VarienForm('product_addtocart_form')

and see what what gets created in tmpobj

And also the .bind after both functions does not seems ok. You are not using an inmediate function and besides does functions are not returning anything.

A more plete example would be easier to fix.

I hope this helps you.