Another prototype jquery conflict issue I think

Question

I am working within the configurable options block on the product page and inserting some javascript right in the bottom of it. I wasn't having any issues but suddenly I'm getting an error in console: "Uncaught TypeError: Cannot read property 'config' of undefined ". I assume its a conflict error. I have been moving around the initialization of the prototype object and commenting things out to no avail. Can you see what is wrong with my javscript at the bottom?

<?php
$_product = $this->getProduct();
$_attributes = Mage::helper('core')->decorateArray($this->getAllowAttributes());
?>
<div id="caitlinVendors">
<?php if ($_product->isSaleable() && count($_attributes)):?>
 <dl>
 <?php foreach($_attributes as $_attribute){ ?>
 <div id="<?php echo $_attribute->getLabel() ?>Box" class="attributeBox">
 <dt><label class="required"><em>*</em><?php echo $_attribute->getLabel() ?></label></dt>
 <dd<?php if ($_attribute->decoratedIsLast){?> class="last"<?php }?>>
 <div class="input-box">
 <select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
 <option><?php echo $this->__('Choose an Option...') ?></option>
 </select>
 </div>
 </dd>
 </div>
 <?php }?>
 <a href="#" id="vendorsButton" class="vendorsButtonOff">Show Vendors</a>
 <div class="clear"></div>
 </dl>
 </div>
 <script type="text/javascript">//Caitlin
 //dropdowns are initiated via configurable.js
 var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
 var $j= jQuery.noConflict();
 $j("#vendorsButton").on("click", function(event){ //vendor button click event
 event.preventDefault();
 $j('#vendorBox').css('visibility','show'); //set vendor box to visible
 if ($j("#vendorBox").is(":hidden")) {
 $j("#vendorBox").slideDown("fast");
 } else {
 $j("#vendorBox").hide();
 }
 });
 $j('select').change(function() { //on changing the attribute input
 if ($j(this).find('option:selected')[0].text=='Choose an Option...')//see if there is a value in the dropdown
 { 
 $j('#vendorsButton').removeClass().addClass('vendorsButtonOff'); //Gray out the button and disable
 console.log('i still work');
 }
 else
 $j('#vendorsButton').removeClass().addClass('vendorsButtonOff'); //Enable and make it gold
 });
 </script>
<?php endif;?>

Answer 1

First try to comment out the jQuery code and see if the error reproduces. If it does then it's not related to jQuery (captain obvious).
If the error does not appear then try to put the jQuery.noConflict() statement at the end of the jquery.js file. There is a chance that the conflicts appear higher in the page before you are calling noConflict.
And instead of decalring the variable $j=jQuery.noConflict() just use jQuery instead of '$j'.
For example instead of:

var $j= jQuery.noConflict();
$j('#id').hide();

just use:

jQuery('#id').hide();

This always worked for me without the any conflicts.
Off topic (kind of): Try to use prototype for simple things, like hiding and showing elements, setting style values. There is no need to involve jQuery for things you can do in one line with prototype.

• CaitlinHavener: I did the first thing you said and there is still an error so its not the conflict! Now I'm just confused!
• CaitlinHavener: It was working before this is so random
• CaitlinHavener: I replaced the file with the default file before I messed with it and still have the error!
• CaitlinHavener: hmmm this might have nothing to do with the error.
• Marius: Try, using firebug, to isolate the piece of code that does this. Or provide a link so someone can take a look. And since the issue is still reproducing after eliminating jQuery, there is no point for this question to still be open. I will vote for closing it. No offence.

Answer 2

I get this error when my URL has a # at the end. Probably a <a href="#"> that doesn't preventDefault().

• Amit Singh: Great For me the same issue but what is the solution for this. Prototype throws error instead of ignoring if the element not found.