jQuery confliction for Autocomplete - javascript

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

Related

Two jqueries conflicts with each other

I have a registration form working on jquery-3.3.1.min.js, so i want to include virtual keyboard on this form, virtual keyboard works on jquery-1.11.0.min.js, but both files conflict with each other, when i include
<script type="text/javascript" src="templates/assets/scripts/jquery.min.js"></script>
virtual keyboard doesn't works
and if i include
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
registration form doesn't work, how can i solve this problem?
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var jQuery1 = jQuery
</script>
<script type="text/javascript" src="templates/assets/scripts/jquery.min.js">
give jquery-1.11.0 another variable name,now you can use jQuery1 for virtual keyboard,and jQuery or $ for others

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>

Paging is not a function

I use the below script in jQuery pagination:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="~/Scripts/paging.js"></script>
but the below error appeared:
Uncaught TypeError: $(...).paging is not a function
I don't know what the problem can be. Although paging.js is loaded it seems that the code does not see the file.
Use this code, it worked for me.
I think you may not have gotten the jQuery syntax right
<script type="text/javascript">
$(document).ready(function(){
$('#table-demo').paging({limit:7});
});
</script>

jQuery/jQueryUI conflict

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.

Problem with RegisterClientScriptInclude and RegisterClientScriptBlock

I Have usercontrol and i registered the following javascript method in code behind :
changeSelectedMenu(controlID);
the previous method is declared in JScript.js file so i registered it also .
but the following exception has been thrown :
Microsoft JScript runtime error: Object expected
The result page is :
<script src="~/Scripts/JQuery.js" type="text/javascript"></script>
<script src="~/Scripts/JScript.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
changeSelectedMenu('ctl00_ctl00_cntMain_procedureContentHolder_procedureMenu_appointmentsLink');//]]>
</script>
Is There anyone can help me to workaround this issue???
These aren't valid paths to your JavaScript:
<script src="~/Scripts/JQuery.js" type="text/javascript"></script>
<script src="~/Scripts/JScript.js" type="text/javascript"></script>
They need to be relative to the page or to the site root, for example:
<script src="/Scripts/JQuery.js" type="text/javascript"></script>
<script src="/Scripts/JScript.js" type="text/javascript"></script>
While ~/ works for resolving a path on the server-side, the browser doesn't know how to handle this. There are some other work-arounds in this question for making it work and still being app-relative.

Categories