conflict with jquery googleapis

Question

I am importing several Aces to the same site, the problem is some stop working. For example, one api to make an autocomplete, another to make an effect in the menu and another to a feedback box. Is there any way around these conflicts? I’m calling them as follows:

On the footer I have the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.min.js"></script>

<script src="js/layerslider/js/jquerytransit.js"></script>
<script src="js/layerslider/js/layerslider.transitions.js"></script>

<script src="js/layerslider/js/layerslider.kreaturamedia.jquery.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<script src="js/jquery.blackandwhite.min.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>

<script src="js/jquery.jflickrfeed.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/jquery.touchswipe.min.js"></script>
<script src="js/config.js"></script>
<script src="js/custom.js"></script>
<script src="changer/js/changer.js"></script>

No header:

<link rel="stylesheet" href="js/layerslider/css/layerslider.css" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" />

For the autocomplete, it is also found in the header:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

I’m using the jQueryUI autocomplete.

Answer 1

You can’t run multiple different versions of jQuery on the same page. Choose just one, preferably the latest:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

---

Other tips and recommendations:

• To order of <script> makes a difference. Always include jQuery before jQuery UI or other libraries that depend on it.

• There is a Download Builder for jQuery UI, where you can choose which effects you want, which all of them will be included in a single file .js for you to include on your page.

---

Keep stylesheets in header:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="js/layerslider/css/layerslider.css" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" />

And the scripts on the footer:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script src="js/jquery.easing.1.3.min.js"></script>
<script src="js/jquery.cycle.all.min.js"></script>
<script src="js/jquery.blackandwhite.min.js"></script>
<script src="js/jquery.jcarousel.min.js"></script>
<script src="js/jquery.jflickrfeed.min.js"></script>
<script src="js/jquery.touchswipe.min.js"></script>

<script src="js/layerslider/js/jquerytransit.js"></script>
<script src="js/layerslider/js/layerslider.transitions.js"></script>
<script src="js/layerslider/js/layerslider.kreaturamedia.jquery.js"></script>

<script src="js/fancybox/jquery.fancybox.pack.js"></script>

<script src="js/config.js"></script>
<script src="js/custom.js"></script>
<script src="changer/js/changer.js"></script>

I just re-ordered, and removed the duplicated jQuery. jQuery needs to come first because the other scripts depend on it. That’s why you’re the first to show up.