Clashing jQuery Plugins - javascript

I'm building a website and I have used a jQuery widget plugin to display a certain div when a link is selected. However in order for this to work it requires the "jquery-1.2.6.min.js" plugin to work.
However the framework for the site is built using bootstrap and I also wanted to include a slick slider which both require "jquery-1.11.0.min.js" to work. These are obviously clashing and preventing each other from operating.
I'm not familiar with jQuery so I was wondering if there was a work around for this or a better solution to solve the issue or whether I need to find another widget plugin to display the divs.

If updating/replacing the older code isn't possible, you can run multiple versions of jQuery simultaneously using noConflict:
<!-- load jQuery 1.2.6 -->
<script type="text/javascript" src="http://example.com/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var jQuery_1_2_6 = $.noConflict(true);
</script>
<!-- load jQuery 1.11.0 -->
<script type="text/javascript" src="http://example.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var jQuery_1_11_0 = $.noConflict(true);
</script>
...Then just pass in the particular version you want.

Related

How to make JQuery UI work with specific parts of JQuery?

So you call on Jquery to make the three --- lines and it stacks the menu. Well is there a way to not call all of jquery.min.js. It breaks some older code of jquery UI. Which part of the code only helps break down the menu and may possibly not break the JQuery UI?
I have tried Jquery version 2.1.0 and 1.12.2 and 1.10.0, but they all break the Jquery ui.
I also tried the Jquery compatibility mode, but it makes it so that the menu doesn't work in Bootstrap.
<script type="text/javascript">
var jQuery_1_12_2 = $.noConflict(true);
</script>
I even found something that looked like a work around, but didn't seem to help:
https://github.com/frappe/jquery-ui-bootstrap
Here are the Scripts that are ran:
<script type="text/javascript" src="/style/js/jquery.form-2.47.js"></script>
<script type="text/javascript" src="../bootstrap/jquery/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.autocomplete.js"></script>
<script src="/style/js/jquery-ui-1.8.1.dialog.min.js"></script>
My menu is basically this one, but the rest of the site works with JQuery UI:
http://www.bootply.com/soljohnston777/KZXTGaVsgE#

Bootstrap Javascript not working on live website

I've been facing some problems in my website. I have a lot of js files in my web server, but the bootstrap.js file does not work. Here is the link to the ressource and it also blocks AddThis sharing tools. I have no Idea how this is happening!
here are the main js which I'm using:
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
And here is the website link
Thanks for your time!
You need to load the jQuery script first followed by the Bootstrap js and finally the custom scripts last like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌​
<script src="http://arqetech.net/js/bootstrap.js"></script>
<script src="http://arqetech.net/js/index.js"></script>
<script src="http://arqetech.net/js/secondary.js"></script>
Either use this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Or this:
<script src="http://code.jquery.com/jquery-latest.js"></script>
BUT NOT BOTH
You must load jquery before bootstrap because bootstrap use jquery. If any custom script use jquery too....jquery must be loaded before that custom script.
I recommend you that use minified version of all js files because it increase your web site performance
https://developer.yahoo.com/blogs/ydn/high-performance-sites-rule-10-minify-javascript-7208.html
In addition to jQuery being a pre-requisite for Bootstrap's Javascript to work (as mentioned in the previous answers), it is also worth noting that as of v 3.3.6,
"Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but
lower than version 3"
(just in case you thought using the latest version of jQuery would be better, as I did.)

How to maintain noConflict and include 2 versions of jQuery in Bootstrap 3.2

I'm modifying the UI of an old project which uses Flexigrid and Bootstrap 3.2. Flexigrid depends on jQuery 1.4.1 and Bootstrap 3 requires jQuery 1.9.0 or higher.
I tried using the older version of jQuery with Bootstrap but it breaks; likewise I tried using the newer version with Flexigrid.. it breaks.
I'm wondering if I can include both versions and force Bootstrap to use jQuery.noConflict somehow?
EDIT:
Since we had a lot of js code which relied upon jQuery 1.4.1, I did this:
Added both versions of jQuery to the page (1.4.1 and 1.9.1) in the following order:
<script src="/js/jquery-1.9.1.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
var $jQuery1_9 = jQuery.noConflict(true);
</script>
<script src="/js/jquery-1.4.1.js"></script>
<!-- Include other js files here -->
Now, everything works fine (so far!). You may also find this post useful.
As far as I understand TB jQuery is already included, you need to make a reference for flexigrid library in other way.
<!-- load jQuery Flexigrid library -->
<script type="text/javascript" src="//path to flexigrid library"></script>
<script type="text/javascript">
var $jQuery_flexgrid = $.noConflict(true);
</script>
Then you can use jQuery_flexgrid variable to fire jQuery functions and $ (dollar) sign for TB jQuery.

Off canvas when adding Zurb Foundation javascript files separately

When I link to foundation.js and foundation.offcanvas.js separately i stead of using the minified, combined version the off canvas menu is not working.
Do I have to call the offcanvas additionally to $().foundation(); ?
You only need to call the foundation() method once after all the Foundation scripts have been loaded.
Taken from their docs:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<!-- Other JS plugins can be included here -->
<script>
$(document).foundation();
</script>
If Foundation's Off Canvas still isn't working, it's more likely due to the markup being slightly incorrect than the JS being weird. Make sure you follow the examples exactly.

When I add jQuery library it invalidates my other jQuery on the same page

I am trying to create a page that has a scroller of images and a voting system (which I copied from here: http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/).
The scroller was working just fine until I added the voting pop-up. Essentially, when I add the library
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript">
needed for the pop-up to work, the scroller images disappear and the page seems to re-load whenever I hit the scrolling arrows. If I comment out the library above then the scroller re-appears (but the pop-up window does not work). Here are the directories for the other files.
public/scripts/general0.js - init for scroller
public/script/woo-jcar.js - scroller function
public/scripts/popup.js" - pop-up javascript
Please Help! I am a newby so this might just be a dumb thing like adding to conflicting libraries or something.
Thanks,
jQuery already exists on your page (version 1.7.1) on this line of your HTML markup:
<script type="text/javascript" src="public/scripts/jquery00.js"></script>
Remove this line, and you should be fine:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>
As mentioned by Rocket, use noConflict to turn $ back on 1.7.2 and reference jQuery 1.2.6 with $jq126:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$jq126 = $.noConflict(true);
// $ (and jQuery) is jQuery 1.7.2
// $jq126 is jQuery 1.2.6
</script>
If that is not enough probably the pop-up library depends strictly on the jQuery 1.2.6. So then open the pop-up libray js file and wrap all the code in the fallowing way:
(function($, jQuery){
// all the lib code
})($jq126, $jq126);
In this way the old lib continues to reference the old version of jQuery.

Categories