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>
Related
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
I added jquery and other js files into assets/js, they appear correctly on layout.js but i keep getting this msg 'Uncaught ReferenceError: $ is not defined', on page source code i can see that the js scripts are added but for some reason i cant use them, the only way to make it work properly is to manually add the scripts into every view.
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/1jquery-3.2.1.js"></script>
<script src="/js/2popper.min.js"></script>
<script src="/js/3jquery-ui.js"></script>
<script src="/js/bootstrap-datepicker.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/jquery.validate.js"></script>
<script src="/js/jsgrid.js"></script>
<!--SCRIPTS END-->
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
I am using materializecss to do my design together with Angular. At a certain part, I will need to use (Angular-ui-sortable) for me to be able to be able to sort my list which included jquery-ui. JQuery-UI needs to be included below JQuery and Angular-ui-sortable and it need's JQuery to be before AngularJS. By doing so, the sortable area works while materializecss' initialization of Tab after angular's content is loaded is not working. For the Tab to work, Jquery materialize css needs to be after angular's include. In this case the sortable wise will not work.
Tab works here with error (ui.sortable: jQuery should be included before AngularJS!):
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="libs/angular-resource/angular-resource.min.js"></script>
<script src="libs/angular-ui-sortable/sortable.min.js"></script>
<script src="libs/jquery/dist/jquery.min.js"></script> <---------------------
<script src="libs/jquery-ui/jquery-ui.min.js"></script>
<script src="libs/materialize/dist/js/materialize.min.js"></script>
Sort works here with error (TypeError: Cannot read property 'hash' of undefined):
<script src="libs/jquery/dist/jquery.min.js"></script> <---------------------
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="libs/angular-resource/angular-resource.min.js"></script>
<script src="libs/angular-ui-sortable/sortable.min.js"></script>
<script src="libs/jquery-ui/jquery-ui.min.js"></script>
<script src="libs/materialize/dist/js/materialize.min.js"></script>
Controller for Tab:
function HomeController() {
$(document).ready(function () {
$('ul.tabs').tabs();
});
}
What have I done wrong here?
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.