JavaScript to add an item to the cart is broken

Question

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>

Answer 1

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(){ ...

... becomes 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"
  });
});