Magento setAttribute error on checkout page

1
votes

Ok so when you "Proceed to Checkout", it gives you a list of :

  1. CHECKOUT METHOD
  2. BILLING INFORMATION
  3. SHIPPING INFORMATION
  4. SHIPPING METHOD
  5. PAYMENT INFORMATION
  6. ORDER REVIEW

By default, checkout method is suppose to be dropped down and when you hit "Continue", billing information will drop down similar to this : http://www.plazathemes.com/demo/ma_musicgear/index.php/checkout/onepage/

However, when I go to that page, checkout method isn't dropped down and whenever I click on it, nothing happens. Now these are all my JS errors:

Uncaught TypeError: Object [object Object] has no method 'attachEvent' prototype.js:5644
2
Uncaught TypeError: Object [object Object] has no method 'attachEvent' prototype.js:5653
Uncaught TypeError: Object [object Object] has no method 'setAttribute' clearchannel.halfoffdeals.com/index.php/checkout/onepage/:349
Uncaught TypeError: Object [object Object] has no method 'attachEvent' prototype.js:5644
Uncaught TypeError: Object [object Object] has no method 'observe' opcheckout.js:236
Uncaught TypeError: Object [object Object] has no method 'setAttribute' clearchannel.halfoffdeals.com/index.php/checkout/onepage/:544
Uncaught TypeError: Object [object Object] has no method 'observe' opcheckout.js:374
Uncaught TypeError: Object [object Object] has no method 'observe' opcheckout.js:537
Uncaught TypeError: Object [object Object] has no method 'getElementsByTagName' prototype.js:5010
Uncaught TypeError: Object [object Object] has no method 'attachEvent' prototype.js:5653
Uncaught TypeError: Object [object Object] has no method 'attachEvent' prototype.js:828
Uncaught TypeError: Object [object Object] has no method 'dispatchEvent'

Do any of those have anything to do with this? I'm getting all the attachEvent and blah blah from prototype because of bootstrap. I don't know how to resolve that so I'm currently putting that on hold. I'm guessing the setAttribute is definitely something that could be causing the problem?

Thanks for any help..

I don't know if this would be of any help, but on the shopping cart page before you hit Proceed to Checkout, it lists this label "State/Province" under ESTIMATE SHIPPING AND TAX, but not the select/input box.. So it's coming up as an invalid region_id on checkout page:

So the SetAttribute error is coming from this section:

                        <div class="field">
                            <label for="shipping:region" class="required"><em>*</em>State/Province</label>
                            <div class="input-box">
                                <select id="shipping:region_id" name="shipping[region_id]" title="State/Province" class="validate-select" style="display:none;">
                                    <option value="">Please select region, state or province</option>
                                </select>
                                <script type="text/javascript">
                                //<![CDATA[
                                    $('shipping:region_id').setAttribute('defaultValue',  "");
Uncaught TypeError: Object [object Object] has no method 'setAttribute'
                                //]]>
                                </script>
                                <input type="text" id="shipping:region" name="shipping[region]" value="" title="State/Province" class="input-text " style="display:none;" />
                            </div>
                        </div>

It's saying $('shipping:region_id') has no method setAttribute..

3
javascriptjquerymagentomagento-1.7
i think your jQuery and prototype is colliding. try changing from $('shipping:region_id') to $$('#shipping:region_id') of simply add this $j=jQuery.noConflict() after <script type="text/javascript"> so instead $ alias for jQuery it is now $j - ROMMEL
So a lot of pages won't work if I include bootstrap.min.js? That code is what comes with Magento so there is a lot of other places I'm bound to have to change. Too much of a hassle.. is there any other solution? Can a theme go without bootstrap.min.js if it's using bootstrap.css? - Peanut
Can you provide your website url? - ROMMEL
It's blocked through the server, but you are right! =) Put this in a jquery-noconflict.js file : jQuery.noConflict(); And added it in right after my jQuery.js file and everything is working fancy! =) And all these errors that I couldn't make go away for the past week disappeared as well =) - Peanut

3 Answers

2
votes

@ROMMEL has helped with the answer. These are the steps I took to solve the issue:

  • Put this in a jquery-noconflict.js file : jQuery.noConflict();
  • Add it in right after your jQuery.js file in the

DONE! =) Makes a lot of errors that people said bootstrap and prototype interfering with each other. All those errors disappear after issuing the noConflict()!

1
votes

Always add jQuery.noConflict(); JS file before prototype.js on page.xml file. means like this

<action method="addJs"><script>global.js</script></action> <action method="addJs"><script>jquery.jcarousel.pack.js</script></action> <action method="addJs"><script>jquery.noconflict.js</script></action> <action method="addJs"><script>prototype/prototype.js</script></action>

0
votes

Replace prototype.js file from fresh magento backup and check again.