1

I have the script below, which allows tabs in the navigation bar to be drop down in Magento Go. However, when I uploaded jquery to prepare for uploading additional plugins, the custom plugin I uploaded works, but the tab script ceases working once the basic jquery script is uploaded (i.e. jquery-1.10.2.js). When I remove jquery-1.10.2.js, it works again, but I cannot use any other custom script unless I allow jquery-1.10.2.js to be active. I tried all test cases, including changing the loading orders, and that's the conclusion I came to.

Here's the script that works on its own, but stops working once jquery-1.10.2.js or any older version of it is added:

Enterprise.Tabs = Class.create();
Object.extend(Enterprise.Tabs.prototype, {
    initialize: function (container) {
        this.container = $(container);
        this.tabs = this.container.select('dt.tab');
        this.activeTab = this.tabs.first();
        this.tabs.first().addClassName('first');
        this.tabs.last().addClassName('last');

        this.container.setStyle({visibility: 'visible'});
        this.onTabClick = this.handleTabClick.bindAsEventListener(this);
        for (var i = 0, l = this.tabs.length; i < l; i ++) {
            this.tabs[i].observe('click', this.onTabClick);
        }
        this.select();
    },
    handleTabClick: function (evt) {
        this.activeTab = Event.findElement(evt, 'dt');
        this.select();
    },
    select: function () {
        for (var i = 0, l = this.tabs.length; i < l; i ++) {
            if (this.tabs[i] == this.activeTab) {
                this.tabs[i].addClassName('active');
                this.tabs[i].style.zIndex = this.tabs.length + 2;
                /*this.tabs[i].next('dd').show();*/
                new Effect.Appear (this.tabs[i].next('dd'), { duration:0.5 });
                this.tabs[i].parentNode.style.height=this.tabs[i].next('dd').getHeight() + 15 + 'px';
            } else {
                this.tabs[i].removeClassName('active');
                this.tabs[i].style.zIndex = this.tabs.length + 1 - i;
                this.tabs[i].next('dd').hide();
            }
        }
    }
});
5
  • 1
    did you add jQuery.noConflict() after including the jQuery file? – Marius Jul 30 '13 at 18:00
  • I have tried noConflict before, but either I did not implement it right or it did not work. You mean put it in its own script tag in the html right after the jquery load, right? – Cdore Jul 30 '13 at 18:06
  • You can even add it at the end of the jquery file. I usually do it like this because it's easier. – Marius Jul 30 '13 at 18:25
  • Which file? In the script above or in the jquery-10 file itself? – Cdore Jul 30 '13 at 18:43
  • It worked! I put it inside the script I displayed here. – Cdore Jul 30 '13 at 18:45
2

From the comments it seems that the issue was fixed by adding jQuery.noConflict() at the end of the jquery.js file.

2

There is another catch: You can't put a type="javascript" attribute in the next script block which solves the conflict:

BAD

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="javascript">jQuery.noConflict();</script>

WORKS (CHROME TESTED ONLY)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>jQuery.noConflict();</script>

Edit

Well, I got a little lost since there is no "javascript" type, the correct type is "text/javascript".

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