I have a page which includes two jquerys one for slider other for populate dropdawn.The problem is when I put both of them my jqueries are not working together.What should i do?
My index:
<!-- JAVASCRIPTs for slider -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/comment-reply.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.cycle.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="js/layerslider.kreaturamedia.jquery-min.js"></script>
<script type="text/javascript" src="js/shortcodes.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/jquery.tweetable.js"></script>
<script type="text/javascript" src="js/slider-layer.js"></script>
<!-- JAVASCRIPTs for dropdawn -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('change','.productcategory',function(){
console.log("hmm its change");
var cat_id=$(this).val();
var div=$('#d').parent();
var op=" ";
$.ajax({
type:'get',
url:'{!!URL::to('findProductName')!!}',
data:{'id':cat_id},
success:function(data){
//console.log('success');
//console.log(data);
console.log(data.length);
op+='<option value="0" selected disabled></option>';
for(var i=0;i<data.length;i++){
op+='<option value="'+data[i].id+'">'+data[i].model+'</option>';
console.log(data[i].model);
}
div.find('.productname').html(" ");
div.find('.productname').append(op);
},
error:function(){
}
});
});
});
</script>
I try to add
<script type="text/javascript">
var jQuery = $.noConflict(true);
</script>
but when add this in the end of bouth script then slider work and dropdown not, and when not add this code for conflict works dropdown and slider doesn't work.
I use next links:
Can I use multiple versions of jQuery on the same page?
http://jsfiddle.net/PGLVs/
Any ideas of what I'm doing wrong?
Basically you should release release $ or jQuery variable for newer versions so add noConflict between both versions as below. This will make $ alias available for newer version.
<script src"olderversion"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src"newerversion"></script>
If in case you have to call any plugin with lot of lines using $ or jQuery using old versions you can folow below approach.
jQuery.noConflict();
(function( $ ) {// if you want to use $
$(function() {
// More code using $ as alias to jQuery
});
})(jQuery);
// Other code using $ as an alias to the other library
jQuery.noConflict();
(function( jQuery ) {// if you want to use $
$(function() {
// More code using jQuery as alias to jQuery
});
})(jQuery);
Please mark it as answer if it meets your requirement.
a quick example:
in the head:
<script type="text/javascript" src="/jqueryV1.js"></script>
<script type="text/javascript">
var $myJQ = jQuery.noConflict();
</script>
<script type="text/javascript" src="/jqueryV2.js"></script>
<!-- the version 2 in now in $ while the 1 is in $myJQ -->
code that uses version 2 can keep the global $.
Now in the rest of your code, you could simply replace all the $ by $myJQ where the version 1 is used, but it means rewriting all, what you can do instead is to use an argument that acts as a local var, to be able to keep $ in the code that uses version 1:
(function($){
//inside this function, using $ means using the global $myJQ
$('#selector')...
})($myJQ);
Related
I need to use both below files but just one of the can work if both of the use in pae
<script src="jquery.min.js"></script>
<script src="jquery-1.min.js"></script>//just this work
Or if change order
<script src="jquery-1.min.js"></script>
<script src="jquery.min.js"></script>//just this work
I use a drag and drop plugin , this need jquery.min.js and my theme need to jquery-1.min.js for be responsive
You should be able to do this when you use noConflict.
<!-- load jQuery-1 -->
<script type="text/javascript" src="jquery-1.min.js"></script>
<script type="text/javascript">
var jQuery_1_min = $.noConflict(true);
</script>
<!-- load jQuery -->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var jQuery_min = $.noConflict(true);
</script>
Now whenever you need one of these files you can do this.
//example
$jQuery_min('.selector').live('click', function(){
//do something
});
If it still wont work I dont know anymore... This is the way everybody does it. Quick google search.
I am using multiple jquery libraries in my website.
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_11_3 = $.noConflict(true);
</script>
<script src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="https://s3.amazonaws.com/legalzoom-marketplace/js/touch.js"></script>
I use Jquery 1.7.2 to make Jquery sortable work for mobile as per this. Because of this my bootstrap JS is not working, I have added the below code to remove make bootstrap work.
var jQuery_1_11_3 = $.noConflict(true);
and I am trying to show modal using
jQuery_1_11_3('.modal').modal('show')
but it doesn't seem to work. It throws the error below Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher. Any help will be much appreciated.
You must agree that You're doing wrong. Better to find and fix issue, than play with 2 big libraries.
I'm not sure but hope it helps:
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
var jQuery_1_7_2 = $.noConflict();
</script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var jQuery_1_11_3 = $.noConflict();
</script>
<script type="text/javascript">
(function($) {
$(function(){
// some other operations
});
}(jQuery_1_7_2));
</script>
<script type="text/javascript">
(function($) {
$(function(){
$('.modal').modal('show');
});
}(jQuery_1_11_3));
</script>
Reference: https://api.jquery.com/jquery.noconflict/
When I add Jquery FancyBox script the reviews on Yotpo would disappear.
Here's the script:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
but when i removed the above script, the yotpo reviews will appear.
I'm using Bigcommerce.
I manage to solved my issue using jQuery.noConflict. I just put the noConflict code after the conflict script.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script>jQuery.noConflict();</script>
Then always call jQuery with the whole word instead of the $ sign.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".iframe").fancybox({
//codes
});
});
</script>
I am trying to use JQuery datepicker along with Jotform in my html page.
but it seems that jquery and jotform dont get along after all .
<script type="text/javascript" src="js/jquery.min.1.8.3.js"></script>
<script src="js/jotform.js" type="text/javascript"></script>
If i eliminate first line of above code the jotform works fine and if i eliminate the second line and keep first line the datepicker will work fine. (Jotform is an online form builder)
There is a conflict record since 2011 but i cant find if that is solved or not.
$(function() {
//-----------------------------------
// Show Picker
$('#startDate').datepicker({
showButtonPanel: true
});
//-----------------------------------
// Show Picker
$('#dueDate').datepicker({
showButtonPanel: true
});
});
The following is part of the section of my code
<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" media="screen" />
<script type="text/javascript" src="js/jNotify.jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jotform.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ajax_load.js"></script>
<script type="text/javascript" src="js/validator.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="scripts/calendar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-fa.js"></script>
<link type="text/css" href="styles/jquery-ui-1.8.14.css" rel="stylesheet" />
Any tip and help will be highly appreciated
Ok, this is too large to explain in a comment:
Using jQuery noConflict mode
http://api.jquery.com/jQuery.noConflict/
First, add the noConflict script after loading jQuery:
<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>
This way the $ function is "free" again so other lib can use it (the same name can't be used by two libraries, it's a global var so shit is going to happen).
Well, now on we won't be using $ for jQuery. If you want to use jquery, the new magic word is jQuery (yeah, very original), for example:
jQuery("#menu").show();
So, if you have to use datepicker, just replace $ with jQuery. For example:
jQuery('#startDate').datepicker({
showButtonPanel: true
});
Remember, the keyword $ is no longer attached to jQuery. So you have to use jQuery everywhere. Or you can also use a new alias, for example if you think jQuery is too large:
var j = jQuery.noConflict();
//and now we are going to use it:
j("#menu").show();
There are more examples here: http://api.jquery.com/jQuery.noConflict/
Just use self calling anonymous function and pass jQuery and catch it as $ in your code such as :
(function($){
$(function() {
//-----------------------------------
// Show Picker
$('#startDate').datepicker({
showButtonPanel: true
});
//-----------------------------------
// Show Picker
$('#dueDate').datepicker({
showButtonPanel: true
});
});
})(jQuery);
and modify jquery script inclusion as such(same as TheBronx suggested):
<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>
This is the only way that uses minimal code change. Thanks.
Building a website. When I order my tags like this, LightCycle works but Lightbox doesn't:
Lightcycle works, Lightbox doesn't:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/prototype.js"></script>
When I order it like this, Lightbox works but LightCycle doesn't:
Lightbox works, LightCycle doesn't:
<script type="text/javascript" src="./js/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Frustrating.
You're 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: http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Because they use the same $ shorthand.
Try the following:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="./js/prototype.js"></script>
Does a call to jQuery.noConflict() fix it? You can also give jQuery an alias within your on functions if you miss the $ shortcut:
var $j = jQuery.noConflict();
References:
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
http://samsami2u.wordpress.com/2009/03/14/prototypejs-jqueryjs-conflict-and-resolution/
So using Surreal Dreams recontamination, I implemented this:
<script src="./prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
<script type="text/javascript" src="./js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="./js/lightbox.js"></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.lite.1.0.min.js"></script>
<script type="text/javascript">
$(function() {
$('#slideshow1').cycle({
delay: 2000,
speed: 1000,
});
});
</script>
The next question that springs to mind is what to replace 'someid' with. I'm assuming '#slideshow1'. But what displays when I do this is just a plain black page. Annoying.