conflict with googleapis jquery

Question

conflict with googleapis jquery

Navigation

#1 by (4 votes)

2

I am importing several apis to the same site, the problem is some cease to work. For example, one api to do 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:

In footer I have the following:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><scriptsrc="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 autocomplete, you can also find it 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><scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

I'm using the jQueryUI autocomplete .

php javascript html jquery

asked by anonymous 12.02.2014 / 17:43

1 answer

Close jar programmatically ajax duplicating div

score 4 · Accepted Answer

You can not run several different versions of jQuery on the same page. Choose only one, preferably the most recent:

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

Othertipsandrecommendations:

Theorderof<script>makesadifference.AlwaysincludethejQuerybeforejQueryUIorotherlibrariesthatdependonit.
Thereisa Download Builder for jQuery UI , where you can choose which effects you want, which will all be included in a single .js file to include in your page.

Keep the stylesheets in the 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 in the footer:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script><scriptsrc="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 duplicate jQuery. JQuery needs to come first, since the other scripts depend on it. So it's the first one that pops up.