Issue with Orchard CMS SecondaryNavigation menu

[wssus168]

<1>. After page loaded, the whole submenu will set to "display:none" when click on one of the submenu. e.g. the menu is as follows:

• Classes
• Overview
• Maths
• Phusics
• Activities
• Overview
• Football
• Baseball

When click e.g. "Classes", the whole "Classes" was set to "display:none". <2> Another issue is the "Mouse hover" event is not working when mouse hover over the menu. Without prototype.js, the submenu will dropdown while mouse hover the menu. Are these known issues?

[jwestbrook]

This typically happens when jQuery is triggering a hide event that is not namespaced, for instance

//jQuery
var t = jQuery.Event('hide');
$('.someclass').trigger(t);

Because the event is not namespaced (jQuery.Event('menu:hide');) and PrototypeJS adds a hide() method to elements, jQuery assumes that the PrototypeJS hide() is the default behavior and triggers that method to fire.

The event is being fired to allow other scripts to observe the event and take some action if the hide event is triggered on that element (or menu).

To fix or at least workaround this problem is to find the event that is being fired and if not being used add a namespace to the event.

I took a look at the demo sites for Orchard CMS and I can't find a specific example of the event firing in those sites so I would need to see your specific site to be able to help further.

[wssus168]

Hi, thanks to take time to inspect it. I search for "Event(" in the whole solution/project of Orchard CMS, the only file found is jquery-1.11.0.min.js. Do you think the prototype.js has some conflict with the jquery-1.11.0.min.js file? The second issue in my question: "Another issue is the "Mouse hover" event is not working when mouse hover over the menu. Without prototype.js, the submenu will dropdown while mouse hover the menu.". Do you know how to make it work?

[jwestbrook]

the mouse hover is probably related to the Event firing as well - do you have a public site where this is happening for me to examine?

[wssus168]

The site is an intranet. it is not a public site. I check the jquery.smartmenu.min.js may be the one which conflict with prototype.js.

[wssus168]

Hi, I check the link http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ it did mention that the prototype.js conflict with jQuery since both use '$'. However, if using the way the site suggest, it needs to change some other jQuery file. Is there a way I can change the prototype.js so that I don't need to change the existing jQuery since we may need to upgrade new version jQuery in the future?

[walterdavis]

If you follow the directions, you only need to do the following:

1. Move your reference to Prototype.js above the one to jQuery.js.
2. After both references, and critically, before you do anything at all with jQuery, insert the following block:

<script> jQuery.noConflict(); </script>

Now you are free to use either library in your own code, without trampling the $() method. Your outermost reference to jQuery would need to change from $.ready() to jQuery.ready(), but inside that ready block, you can use $ and it will mean what jQuery thinks it means in that context. Outside of the ready block, you will still be referencing Prototype's version of $().

So you don't need to alter jQuery itself at all, and you don't need to worry about a newer version of jQuery breaking this design pattern.

[wssus168]

Hi Thanks for your quick respond. I tried the following 2 scenarios. Would you let me know what I had done something wrong:

Scenario 1:

The following: iBox popup widge work. However, secondary submenu won't work

Scenario 2:

The following: iBox popup widge not work. However, secondary submenu work

[wssus168]

Scenario 1: src="/Themes/mysite/scripts/prototype.js" src="/Themes/mysite/scripts/ibox.js" src="/Modules/Orchard.jQuery/scripts/jquery-1.9.1.min.js"

--jQuery.no conflick() here src="/Core/Shapes/scripts/base.js" src="/Themes/mysite/scripts/bootstrap.js" src="/Themes/mysite/scripts/jquery.smartmenus.min.js" src="/Themes/mysite/scripts/jquery.smartmenus.bootstrap.js" Scenario 2: --jQuery.no conflick() here src="/Themes/mysite/scripts/prototype.js" src="/Themes/mysite/scripts/ibox.js" src="/Modules/Orchard.jQuery/scripts/jquery-1.9.1.min.js" src="/Core/Shapes/scripts/base.js" src="/Themes/mysite/scripts/bootstrap.js" src="/Themes/mysite/scripts/jquery.smartmenus.min.js" src="/Themes/mysite/scripts/jquery.smartmenus.bootstrap.js"

[walterdavis]

I hope you spelled it noconflict() rather than noconflick()!

What is in base.js and bootstrap.js? If either of those use $.ready(), you need to change them to jQuery.ready() instead.

[wssus168]

Hi thanks for your reply. It is jQuery.noConflict(); Also, base.js is from Orchard CMS and bootstrap.js is from http://getbootstrap.com, I tried not to change them since we may update them in the future. Since Prototype.js is added-in for widge popup, is there a way we can change the prototype.js to make it no conflict with jQuery?

[jwestbrook]

Not really, PrototypeJS is built to level the playing field across all browsers so the developer has the same behavior. To do that Prototype extends the native definitions of Arrays Functions and Strings.

With that being said you might be able to remove the hide function so that its not extended in elements but that might make your popup widget useless.

If you are using bootstrap - I know there is at least one component in bootstrap that fires Event('hide') here is the StackOverflow question that addresses that http://stackoverflow.com/a/15095654/341491

[wssus168]

Thanks for your reply and comment. It did look like conflict with the bootstrp. I will take a look what StackOverflow's post. Prototype.js is still a good plug-in. In fact, I have also use other approch to resolve my issue. Thanks again for the supports and comments.