Magento – Another prototype jquery conflict issue I think

configurable-productjavascript

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;?>

Best Answer

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.

Related Topic