When I include the enhance.js plugin it makes a conflict with other jquery plugins, such as UI jquery plugins
I can't use the date picker functions for example .
what is the possible solution ?
From documentation: http://api.jquery.com/jQuery.noConflict/
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
And/or you can use aliasing here:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>
Related
I have a problem when I import my library lodash.js and when I use underscore.
I have seen in other posts, that we can use the method _.noConflict ()
I use it like this:
<script type="text/javascript" src="/etc/chat/inline.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/polyfills.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/styles.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/vendor.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/main.bundle.js"></script>
<script type="application/javascript">
_u = _.noConflict();
</script>
However, my project needs to use the library lodash () so this solution does not work.
Is there another solution?
I've just added a subscription form from mailchimp to my page and my existing java functions have stopped working. Obviously there are two conflicting sources. Here's the original:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and the mail chimp source:
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
What can I do to have the two work in tandem?
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
https://api.jquery.com/jquery.noconflict/
I have included jquery in javascript but it is not working wt to do
i hv also included jquery in it
<script type="text/javascript" src="/home/aman/html/book_cricket.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"></script>
jQuery should run at the beginning
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"></script>
<script type="text/javascript" src="/home/aman/html/book_cricket.js"></script>
The browser reads the javascript files in the order you place them.
Try reversing them to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"></script>
<script type="text/javascript" src="/home/aman/html/book_cricket.js"></script>
i have these jquery files included but some plugins work and some are not when i change squence then some plugins work but other give error. Please tell me best squence of these files. Thanks
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="js/urdutextbox.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
<script src="js/jquery.cookie.js"></script>
This would work.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/urdutextbox.js"></script>
Also note that you do not need to include normal and minified versions (*.min.js). And since jquery-ui.js depends on jquery core code, it could be kept down to jquery core.
Also please note that you may not require two or more versions of a jquery core thing as it might not make any sense. Instead if you really wish to have some recently added functionality, please make your own custom file by going to jquery custom build at this link.
Just because a version of jQuery requires a certain version doesn't mean it won't work with a later version.
I would try to remove:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
I would also completely remove this since there's no way for a plugin to work after you remove jQuery as a global.
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
Also, you're free to remove the type="text/javascript" from your script tags, no issue with it but it's not needed.
I'd put your site functions after all the other scripts are include as well, and I'd put jquery.cookie.js before the ui stuff, just as preference.
So, I'd end up with:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/urdutextbox.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script src="js/jquery-ui-sliderAccess.js"></script>
<script src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
I was using jQuery 1.6 before. Then, needed a slideshow which works with jQuery 1.7.
Both versions are conflicting on my HTML page. Any solution to avoid the jQuery conflicts would be appreciated in the following code...
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
$(document).ready(function(){
$('#nav ul').superfish();
packages_slider();
testimonials_slider();
set_datepicker();
set_select();
set_captcha(true);
validation();
jquery_miscellaneous();
});
</script>
<script src="js/jquery-ui.1.8.16.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/sliders.js" type="text/javascript"></script>
<script src="js/superfish.js" type="text/javascript"></script>
<script src="js/pdate.js" type="text/javascript"></script>
<script src="js/jquery.datepick.pack.js" type="text/javascript"></script>
<script src="js/jquery.selectbox-0.1.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/miscellaneous.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"> </script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$('#basic-slider').advancedSlider({width: 1200,
height: 600,
}
});
});
</script>
<script type="text/javascript" src="js/jquery.transition.min.js"></script>
<script type="text/javascript" src="js/jquery.advancedSlider.min.js"></script>
Don't use both versions. Just upgrade to 1.7 1.8.
There are dirty tricks to get this (partially) working, but it's asking for trouble, a lot of maintenance hell, and twice the amount of code to be downloaded to the client. You really don't want to walk that road.
You need to read up on how $.noConflict() works. The first $.noConflict() you call resets the $ to undefined, meaning the first $(document).ready() will error, as $ is not the function you expect.
If you keep the second $.noConfict(), after you've called it you'll have the following;
$ will point to jQuery 1.6.4
jQuery will point to jQuery 1.7.2