<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/jquery.csvToTable.js"></script>
<script>
$(function() {
$('#CSVTable_Pach').CSVToTable...
});
The script on top is part of a lightbox feature, however it is not allowing a table to display.
How can i resolve the conflict between these scripts?
link to the site
You may be having a conflict because both libraries use the $ shortcut. Look into the noconflict feature of jQuery or the equivalent of prototype.
You can read more here: jQuery ... Avoiding Conflicts with Other Libraries
Related
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.)
Hi I am learning Javascript and am stuck resolving a JS related issue on my project http://www.merekhayaal.com/ I have installed Masonry layout which is conflicting with the rest of JS. I have read this usually has to do with fixing jQuery. I am only asking for pointers here. I need the following code to make the Masonry layout work:
<script src="babezlondon/modernizr-latest.js">
</script>
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script>window.jQuery || document.write('<script src="js/shopshark/jquery-1.8.3.min.js"><\/script>')</script>
<script src="babezlondon/jquery.masonry.min.js"></script>
<script src="babezlondon/script.js"></script>
But when I put this in, the rest of JS on the page breaks. If the solution is to implement no-conflict in jQuery, what steps can I take to ensure I do it correctly in my case as there are multiple js files to deal with?
Have you already tried using jQuery noConflict? http://api.jquery.com/jquery.noconflict/
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
Just use jQuery in noConflict() mode.
Stick this at the bottom of the jQuery script;
var $jq=jQuery.noConflict();
so now you would have to use $jq instead of $jQuery or $
This way, each script you have for different sliders etc you can change the var $jq to suit.
Hope this helps.
http://api.jquery.com/jQuery.noConflict/
Ok so what worked is when i removed a line of code
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
from the script. It was apparently causing the conflict
I use two jQuery Library in a single page (Tab & Gallery) for both used two different versions of jQuery libraries now it both wont work at a time. i have to remove a library to work another.
Used versions
1.7.1 jQuery.mini.js for Gallery
1.6.2 jQuery.mini.js - for tab
and
this one
--http://ajax.googleapis.com/ajax/libs/jquery-ui-1.8.16.custom.min.js
Here how i used this coding
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
<script // type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Please tell a solution for this
Only use the newest source! And place it before the jQuery UI. It is better to get your files from the same source, perferably a CDN, like Google's.
These are the newest versions, you are using out-dated ones.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Don't reference the jQuery library twice - it will attempt to override the functionality and break your script. You just need to reference it once:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
Just don't include jQuery twice...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
you may be polluting the name space. change $ to jQuery, use noconflict() or use self invoking anonymous function
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.
I am working on a project where there's multiple libraries loading in the head. The CMS being used is WordPress.
Through the wp_head, there's an enqueued script for the latest version 1.7.1, but just below it there's a set of script files that begins with version 1.4.
Here's a simple visual flowchart:
<head>
<script jQuery 1.7.1>
<script jQuery 1.4>
<script Colorbox>
[7 more scripts dependent on 1.4 here]
</head>
...
<footer>
<scripts that can use either 1.7.1 or 1.4>
</footer>
My understanding is that since jQuery 1.4 is below 1.7.1, that it is effectively the library being used.
Is it possible to rearrange the scripts so that those dependent on 1.4 can only be used by 1.4 then the rest by 1.7.1? For example:
<head>
<script jQuery 1.4>
<script Colorbox>
[7 more scripts dependent on 1.4 here]
<script jQuery 1.7.1>
</head>
...
<footer>
<scripts that can use either 1.7.1 or 1.4>
</footer>
See how I moved 1.7.1 down? Will 1.7.1's placement in the head below the 1.4 scripts affect the 1.4 scripts?
Is there a way to detect which version of jQuery is being used throughout the page?
please define those in "those dependent on 1.4", It is never a good idea to work back versions just for one part of a website. If it is multiple websites running the same header you might want to try and load in a php (databased) field and set the library that needs to be used in there. My advice would be that if indeed a part of your code doesn't work with the new library, update that code. And always use the latest JQuery :)
This should work as jQuery.noConflict(true) allows you to assign jQuery to any global variable and remove the original jQuery variable from the global namespace.
<head>
<script jQuery 1.4>
<script type="text/javascript">
var jq14 = jQuery.noConflict(true);
</script>
[7 more scripts dependent on 1.4 here] // do a find and replace in all these, replacing $ and jQuery by jq14
<script jQuery 1.7.1>
</head>
...
<footer>
<scripts that can use either 1.7.1 or 1.4>
</footer>
It's hardly best practice to load two jQuery's on the same page, but if your client won't pay to upgrade the above shoudl hopefully provide at least a workable compromise.