Using multiple jquery on the same page [duplicate]

Question

I'm very new to jQuery and I've looked at many problems out there. And mostly might worked for them but not for me. The problem is about using multiple jQuery in the same page. Here is my code in head tag.

<!-- load jQuery 1.8.2) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="assets/scripts/bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="assets/scripts/bxslider/jquery.bxslider.css" rel="stylesheet" />

<script>
var jQuery_1_8_2 = $.noConflict(true);
</script>

<!-- fullBackground -->
<script src="assets/scripts/fullbg/jquery.fullbg.min.js"></script>
<!-- load jQuery 1.5.0 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<script>
var jQuery_1_5_0 = $.noConflict(true);
</script>

I'm so confused what's wrong with this. If I use one of them, it's working but after I put both, it's not working at all. Does any of you have solution for this? Thanks.

That's because you shouldn't load two jQuery versions. There is no reason you should need two versions. — War10ck
– War10ck, Commented Jan 7, 2014 at 17:04
This is soooo bad, don't use different versions of jQuery in the same "javascript" envrionment — Noam Rathaus
– Noam Rathaus, Commented Jan 7, 2014 at 17:04
@War10ck So if I want to use a plugin that is compatible with jQuery 1.4 but not jQuery 1.9, how do I go about that? — Kevin Bowersox
– Kevin Bowersox, Commented Jan 7, 2014 at 17:08
One jQuery for slider and another one for fullbackground. I didn't realise that was very bad idea. Should I combine or what should I do? Is one version enough to use for both? — Anthosiastic
– Anthosiastic, Commented Jan 7, 2014 at 17:08

tarn · Accepted Answer · 2014-01-08 08:42:50Z

1

This should work.

However if the html document is opened from file it won't because the scheme of the first jQuery URL is not defined and so it takes file:// from the parent. As there is probably no local file of this name it does not load and the $ is not defined. Calling the first $.noConflict() function then fails with $ not defined.

Adding a scheme to the first URL fixes this.

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

The reason the scheme is often omitted is so it will use http:// or https:// depending on the what the page is using, which is generally a good thing.

One way to serve a html document over HTTP locally is by running a simple Python HTTP server from the same directory.

python -m SimpleHTTPServer

You can then open your page in your browser at http://localhost:8000/ and your example should work.

edited Jan 8, 2014 at 8:42

answered Jan 7, 2014 at 18:02

tarn

2,1822 gold badges13 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anthosiastic Over a year ago

MAGIC! It's pretty clear and understandable! Thanks!

Collectives™ on Stack Overflow

Using multiple jquery on the same page [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related