Conflicting jQuery

[jspencer]

I’ve encountered a conflict between Smartmenus and Sphider search engine. I can get one or the other to work, but have had no luck getting them to work together. Note that “not working” for Sphider means nothing appears in the results, while “not working” for Smartmenus means the top level menu appears (and appears properly formatted) but no supbmenus appear when I mouse over (or click on) the top level menu items.

Both Smartmenus and Sphider are jQuery plug-ins, so I assume there is a conflict somewhere.

Here’s the smartmenus code:

<!-- SmartMenus code -->
<!-- jQuery -->
<script type="text/javascript" src="smartmenus/include/jQuery/jquery-1.9.1.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="smartmenus/jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
	$(function() {
		$('#main-menu').smartmenus({
			subMenusSubOffsetX: 1,
			subMenusSubOffsetY: -8
		});
	});
</script>
<!-- SmartMenus core CSS (required) -->
<link href="smartmenus/css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-clean" menu theme (optional, you can use your own CSS, too) -->
<link href="smartmenus/css/sm-clean/sm-clean.css" rel="stylesheet" type="text/css" />
<!-- #main-menu config - instance specific stuff not covered in the theme -->
<style type="text/css">
	#main-menu {
		position:relative;
		z-index:9999;
		width:auto;
	}
</style>
<!-- End of Smartmenus code -->

I have added

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

after the jQuery call, with no improvement. Any suggestions?

Note: It looks like some of the code is not displaying the between the “pre” tags. Anybody know why?

Jon

[jspencer]

So I tried removing the jQuery calls from the Sphider code, leaving the Smartmenus jQuery call intact, figuring that this way there would be no jQuery conflict because everybody would be using the same library. Perversely, Sphider continued to work and Smartmenus continued to not work.

Thoughts/suggestions?

[admin]

Hi, it’s difficult to guess what exactly might be causing the issue without being able to test a complete live example so if possible, please post an URL to a live demo. It’s not clear from the code excerpts you’ve posted what might be the exact cause of the issue.

What you might want to double check are the paths to the JS files – make sure they are all properly loaded. I saw you are using relative paths so they might not work if you load pages in sub directories on your server. Another thing you might want to check is if your menu UL/LI/A structure is valid – if all tags are properly nested – this sometimes might cause the sub menus to not appear properly.

[jspencer]

Enter a word in the search box (“MODTRAN” will produce a nice set of results) and click Search. That will lead to a Search Results page that demonstrates the problem.

The menus work fine on every other page of the site, so I don’t think the UL/LI/A structure has a problem, but I will check it carefully to be sure.

I did use a little code that checks the jQuery version, so I know it is loaded enough to reveal its version number.

Thanks for your help.

Jon

[admin]

OK, it’s a path related issue. At the moment, on your search results page the following:

<script type="text/javascript" src="../smartmenus/libs/jquery-loader.js"></script>

does not include jQuery correctly. Instead of linking to “jquery-loader.js” link directly to “jquery-2.1.1.js” – e.g.:

<script type="text/javascript" src="../smartmenus/libs/jquery/jquery-2.1.1.js"></script>

The loader script is used on the demo pages just to allow easy testing with different jQuery versions.

Cheers!

[jspencer]

Yes, I tried various versions of that line, including the one you suggested, with no difference. I have now changed it to the direct link you suggested and if you try it again you will see that the problem, unfortunately, remains as before.

[admin]

Ah, sorry, yes now I noticed there is another version of jQuery linked further in the source of your page. If you would like to keep both versions or you are forced to do so (you are not able to reorder the scripts easily, etc.), then you can use the following to avoid the issue:

<!-- jQuery -->
<script type="text/javascript" src="../smartmenus/libs/jquery/jquery-2.1.1.js"></script>

<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../smartmenus/jquery.smartmenus.js"></script>

<!-- SmartMenus jQuery init -->
<script type="text/javascript">

	// we'll use this jQuery version just for the SmartMenus plugin to avoid conflicts
	var jqSM = $.noConflict(true);

	// note that now $ and jQuery are undefined and the SmartMenus functionality remains in jqSM

	(function($) {
		$(function() {
			$('#main-menu').smartmenus({
				subMenusSubOffsetX: 1,
				subMenusSubOffsetY: -8
			});
		});
	})(jqSM);
</script>

I’ve added some comments in the code to make it clear what happens.

Please let me know if you still have any troubles.

[jspencer]

That did it! I had tried using $.noConflict() earlier but apparently had not implemented it correctly because it didn’t work. This does work. My client will be much happier.

Thanks again for your help.

Jon

[admin]

Np, at all! Cheers!

[Author]

Posts