Avoiding conflicts with jquery

#1

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);
	</script>

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!

#2

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

#3

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.

Cheers

Thomas

#4

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!