jQuery/jQueryUI conflict - javascript

I am using some jquery files for auto complete and datetime picker control but 3 files among them are conflicting:
Two files for autocomplete are
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
One file for Calender datetime picker is:
<script src="../assets/js/jquery-1.8.3.min.js"></script>
These 3 files are confilicting when i comment date time picker file autocomplete works and if I uncomment it autocomplete stops.

If you want to include both the js files you can..
<!-- load jQuery 1_8_3 -->
<script src="../assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
var jQuery_1_4_2= $.noConflict(true);
</script>
Its better to avoid multiple versions in the page..and its better to use appropriate jquery-UI Version with the jquery version

If you try only these, i think you are good to go:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js">
</script>
No need to add other versions of jquery.

That's probably because you are including jQuery 2 times. An old version and a newer version.
I would recommend you try and use the most recent versions of both jQuery and jQuery UI and check if everything still works.

Related

I Got f.getClientRects is not a function error due in my project i use juqery.min.js file 2 times in layout for different purpose

This is first ,
src="~/Scripts/jquery-3.2.1.min.js"
This is 2nd ,
2. src="https://code.jquery.com/jquery-3.2.1.min.js".
both are needed because, i have use some third party control,
out if this some control need first and some need 2nd.
Help?
To load juqery.min.js file 2 times in layout for different purpose use jQuery.noConflict():
<!-- load local jQuery 3_2_1 -->
<script src="~/Scripts/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var jQuery_local_3_2_1 = $.noConflict(true);
</script>
<!-- load jQuery 3.2.1 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var jQuery_3_2_1= $.noConflict(true);
</script>

JS interrupting each other on html page

I need to use two different versions of jQuery on my website. Because i need to use one plugin that is using different version of jQuery than my site. I tried to use noConflict and i even made that plugin to work, but my site didnt work properly. Any idea?
<script src="comment/frontend/view/default/javascript/jquery.min.js">
</script>
<script src="comment/frontend/view/default/javascript/jquery-ui/jquery-
ui.min.js"></script>
<script src="comment/3rdparty/read_more/read_more.js"></script>
<script src="comment/3rdparty/filer/filer.js"></script>
<script src="comment/3rdparty/timeago/timeago.js"></script>
<script src="comment/frontend/view/default/javascript/common.js"></script>
<script src="comment/3rdparty/colorbox/jquery.colorbox-min.js"></script>
<script src="comment/3rdparty/highlight/highlight.pack.js"></script>
These last two are using $
<script src="js/core.min.js"></script>
<script src="js/script.js"></script>

jQuery confliction for Autocomplete

I have loaded two jQuery versions on my page;
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script>var jq = jQuery.noConflict();</script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
I am trying to use the Autocomplete plugin from https://github.com/devbridge/jQuery-Autocomplete/ (it doesn't work with 1.4.2) so I have to add 1.9.1 jQuery version.
I cannot remove 1.4.2 at all, as removing so breaks my existing code.
I have tried changing the order of the libraries but no luck.
FYI jq("#elem").hide(); etc. works and other jQuery native stuff. but when I use it to bind autocomplete plugin, it fails driving me crazy;
binding as jq('#searchbox').autocomplete(); the error I see in console is
TypeError: jq(...).autocomplete is not a function
PS: I have also tried <script>var jq = jQuery.noConflict(true);</script> without success.
Thank you for any help!
Does this work you. I got no error on this.
jq('#autocomplete').autocomplete({});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.27/jquery.autocomplete.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jq = $.noConflict(true);
</script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<input type="text" name="country" id="autocomplete"/> no error

How to get reference js file among multiples

In the chain of this SO thread, I am extending the question. If I have two files say jquery.ui 1.8.12 and jquery.ui 1.10.3. If I use some ui functionality like datepicker,tooltip,throws me error for the older version of jquery (I want older version because one of my js plugin uses this) file How to handle this situation. how to link particular file for particular function call.
Yes you can do it:
By using jQuery.noConflict() to load multiple versions of jQuery is actually pretty simple.
Example from the blog(The blog is bit old but worth reading).
<!-- load jQuery 1.1.3 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.1.3.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_1_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.3.2 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
<!-- revert global jQuery and $ variables and store jQuery in a new variable -->
<script type="text/javascript">
var jQuery_1_3_2 = $.noConflict(true);
</script>
So now you can use refer to your required version by using their references.
Demo of Different plugin usega
http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

Including multiple JQuery plug-ins Problem

I've only just started using JQuery so be easy on me if the solution is something simple.
My problem is that I have 2 Jquery plug-ins on the same page, but only 1 of which works, depending on the order the files have been included. See below:
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/js/jquery-ui-1.8.14.custom.min.js"></script>
<link type="text/css" href="/js/css/smoothness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />
<script type="text/javascript">
//no conflict jquery
jQuery.noConflict();
//jquery stuff
$(document).ready(function(){
$("#datepicker").datepicker({ dateFormat: 'dd-mm-yy' });
});
</script>
<script type="text/javascript" src="/js/mootools.js"></script>
<script type="text/javascript" src="/js/moocheck.js"></script>
<script type="text/javascript" src="/js/js_main.js"></script>
In the code posted above, the styling of the checkboxes works fine, but the datepicker doesn't. If I remove the 2 mootools JS lines, then the datepicker works OK.
Any ideas please?
You have included two different versions of jQuery on the same page, remove one of them (the older one probably).
Also there might be a conflict between jQuery and MooTools, I would try using jQuery.noConflict(), also see "Using jQuery and MooTools Together".
Use jQuery instead of $ for the datepicker.
jQuery(document).ready(function(){
jQuery("#datepicker").datepicker({ dateFormat: 'dd-mm-yy' });
});
You're loading 2 version of jquery, so delete
<script type="text/javascript" src="/js/js/jquery-1.4.4.min.js"></script>
Also, jquery ui should be loaded at the top right after jquery.

Categories