I am using the following libraries in my project
<script src="jquery.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
there is a conflict between first 2 and second 2 libraries when I use first 2 then 3 and 4 stop working.
I could not fix this conflict.
Problem is you have multiple jquery files included, this should be avoided. Use the latest version and include it at top before any other library, as other plugins are dependent on jquery library, try excluding the 3rd number jquery file, otherwise include latest jquery library and then datetimepicker and autocomplete:
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
Related
I'm hoping someone might be able to help me with this issue that I've been struggling with for hours. I’m developing a .NET Core application using Visual Studio. I’m trying to use the Bootstrap Tool Tips which leverages Popper. When I get the Tooltips to work, I can’t load Modals, when I get Modals to work, I can’t get Tooltips to work.
Tooltips works when I install Bootstrap (4.6.0) via Nuget. When I try to load a modal, I get the following error:
TypeError: $('#journalEntryModal').modal is not a function. (In
'$('#journalEntryModal').modal('show')',
'$('#journalEntryModal').modal' is undefined)
In order for the Modal functionality to work, I have to do the following:
Remove the Bootstrap as a Nuget Package
Manually download Bootstrap 4.6.0 and include it in my solution
Download Popper.js 2.9.0 and include it in my solution
When that happens and I hover over an element that has a tooltip, I get the following error:
TypeError: Object is not a constructor (evaluating 'new
Popper__default['default'](this.element, tip,
this._getPopperConfig(attachment))')
Note that I'm using JQuery 3.5.1. When I use Bootstrap via the Nuget install, I don't include the BOOTSTRAP & POPPER section.
#* ============== JQUERY ================== *#
<script type="text/javascript" src="~/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="~/lib/jqueryui/jquery-ui.js"></script>
<script type="text/javascript" src="~/lib/jquery.inputmask/jquery.inputmask.js"></script>
<script type="text/javascript" src="~/lib/jquery.inputmask/bindings/inputmask.binding.js"></script>
<script type="text/javascript" src="~/lib/jquery-validate/jquery.validate.js"></script>
<script type="text/javascript" src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript" src="~/lib/jquery-toast-plugin/jquery.toast.js"></script>
<script type="text/javascript" src="~/lib/jquery-tokeninput/js/jquery.tokeninput.js"></script>
<script type="text/javascript" src="~/lib/bootstrap-chosen/chosen.jquery.js"></script>
#* ============== BOOTSTRAP & POPPER ================== *#
<script type="text/javascript" src="~/lib/popper.js/umd/popper.js"></script>
<script type="text/javascript" src="~/lib/bootstrap-4.6.0/js/bootstrap.js"></script>
Any ideas on what I could be doing wrong?
Thanks a bunch.
--- Val
So I finally got this working by importing version 1.14.7 of popper from the following:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
I know you can add jQuery and bootstrap with gems, assets, and the application.css and application.js file. However, I would like to be able to add these files through a CDN.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
I have added the above into my application.html.erb file, but I seem to not be able to use bootstrap or jQuery still. Can you please explain why rails doesn't allow linking in the html file? Why must we use gems?
You need to add the js file before the closing body tag as well:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
I guess you have to make sure you call your Jquery before your bootstrap files
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
If you want to do a cdn call back for both Jquery and Bootstrap these are the links: stackoverflow - Bootstrap cdn callback and stackoverflow - Jquery cdn callback
Use the jquery cdn gem
In your layout,
<%= include_jquery cdn: :google %>
I have 2 scripts running different versions of jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
The other uses:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
When I have them both the one that needs 1.7.2 falls apart, and when I remove 1.3.2 my other script falls apart.
Which library includes both of these?
I use two jQuery Library in a single page (Tab & Gallery) for both used two different versions of jQuery libraries now it both wont work at a time. i have to remove a library to work another.
Used versions
1.7.1 jQuery.mini.js for Gallery
1.6.2 jQuery.mini.js - for tab
and
this one
--http://ajax.googleapis.com/ajax/libs/jquery-ui-1.8.16.custom.min.js
Here how i used this coding
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
<script // type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Please tell a solution for this
Only use the newest source! And place it before the jQuery UI. It is better to get your files from the same source, perferably a CDN, like Google's.
These are the newest versions, you are using out-dated ones.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Don't reference the jQuery library twice - it will attempt to override the functionality and break your script. You just need to reference it once:
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
Just don't include jQuery twice...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../js/libs/jquery-ui-1.8.16.custom.min.js"></script>
you may be polluting the name space. change $ to jQuery, use noconflict() or use self invoking anonymous function
I am having a problem getting the jqGrid to be recognized by jQuery. For some reason despite having imported the library
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
I can verify that the library is imported correctly and I can click on it and see it in Chrome. Any idea why I cannot use the library? When I try
JQuery("#table").jqGrid...
it doesn't work, nor does it show up as one of the functions available.
Any help is really appreciated!
jQuery should be first then jQueryUI then jqGrid, this is because jqgrid depends in jquery an djqueryui so they need to be loaded before.
I think you also need i18n/grid.locale-en.js loaded before too
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"> </script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>