0

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

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.

  • I did the first thing you said and there is still an error so its not the conflict! Now I'm just confused! – CaitlinHavener Apr 11 '13 at 18:35
  • It was working before this is so random – CaitlinHavener Apr 11 '13 at 18:35
  • I replaced the file with the default file before I messed with it and still have the error! – CaitlinHavener Apr 11 '13 at 18:38
  • hmmm this might have nothing to do with the error. – CaitlinHavener Apr 11 '13 at 18:43
  • 2
    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. – Marius Apr 11 '13 at 18:48
2

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

  • Great For me the same issue but what is the solution for this. Prototype throws error instead of ignoring if the element not found. – Amit Singh Dec 14 '17 at 7:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.