Avoiding conflicts with jquery

For the more experienced web players that are with us, I’m sure you’re aware of how to handle jquery conflicts, however recently I had an issue with php scripts that I embedded within a site I was building.

When the script was called, the dropdown-menu (bootstrap) failed to work, as did the carousel so after searching through google, I found if I add the above within the head

<script src="assets/js/jquery.min.js"> </script>
    <script type="text/javascript">
    var $j = $.noConflict(true);

This handles any issues regarding conflicts.

One of the reasons I like using foundation 5.2.3 is that out of the box there are no conflicts with any scripts I use but I still use bootstrap for certain websites and something to note if anyone encounters the same issue!


Ok I should update this works for one website, but on a new site I’m working on, I also have to add

<script src="bootstrap/js/bootstrap.min.js"></script>

within the head and before the noconflict.

There are various methods for the no conflict but I’ve been looking at the scripts and the developers have used bootstrap so I guess that explains the conflict issues with bootstrap rather than foundation

Hm - the reason for “NoConflict” scenario is usually when you load two (or more) competing JS-libraries. So for example jQuery and Prototype (or Mootools). This is because all of them are following the $ sign and therefore clashing at some point.

The best “noConflict” in these cases is to remove either.



Interesting. I’ll remove and test to see if any issues when that happens.

I’ll have to look into this deeper because obviously I never built the php scripts but I’ve purchased one that allows me to customize and that’s next my project!

jQuery.noConflict() method allows you to use multiple frameworks , while using jQuery. The noConflict() method releases the hold on the shortcut identifier, so that other scripts can use it. In jQuery's case, is just an alias for jQuery, so all functionality is available without using . In case of multiple versions of jQuery are loaded (which is not recommended), calling .noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.

1 Like

@larabrian thanks for sharing the info, hopefully it will be of benefit to others.