Can't get Bootstrap Tooltips and Modal to work together - javascript

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

Related

Using backboneJS and loading two different builds of jquery works but not one or the other

This is a bit of a dated question but still curious and I am not pulling anything up, other than it is bad practice. (BTW the code that this is on will not be going to production with two)
I have a backbone.js app that I am updating jQuery from 1.9.1 to the 3.1.1. With how it is built up right now, I can use 3.1.1 but only if I also have version 2.2.4 loaded in as well. If I remove one or the other script tag, the app breaks and I get Uncaught ReferenceError: jQuery is not defined and Uncaught TypeError: $ is not a function as the errors that range across the board.
I have added var $= jQuery; to where the jQuery is first loaded but that error still persists.
Wondering where I got off track and/or why this is happening.
How the scripts are being loaded in
<script type="text/javascript" src="libs/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="libs/underscore-min.js"></script>
<script type="text/javascript" src="libs/backbone-min.js"></script>
<script type="text/javascript" src="libs/tooltip.js"></script>
<script type="text/javascript" src="libs/popper.js"></script>
<script type="text/javascript" src="libs/bootstrap.js"></script>
<script type="text/javascript" src="libs/tooltip.js"></script>
<script type="text/javascript" src="libs/less.min.js"></script>
<script type="text/javascript" src="libs/mobiledatepicker.jquery.js"></script>
<script type="text/javascript" src="libs/moment.min.js"></script>
<script type="text/javascript" src="libs/serialize.min.js"></script>
<script type="text/javascript" src="libs/sha256.min.js"></script>
Last thing I am on backbone 1.3.3 and bootstrap 4. The code does work up to jQuery version 2.0.3
So found out this was more to do with the window that I was loading it in. Don't and still can figure out why two version of jQuery would load and make the page responsive but a single one would not.
Issue came down to I was loading the pages and scripts into an electron app.
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script> and
<script>if (window.module) module = window.module;</script>
wrapped around the code cleared up the issue with only loading one.

How to make JQuery UI work with specific parts of JQuery?

So you call on Jquery to make the three --- lines and it stacks the menu. Well is there a way to not call all of jquery.min.js. It breaks some older code of jquery UI. Which part of the code only helps break down the menu and may possibly not break the JQuery UI?
I have tried Jquery version 2.1.0 and 1.12.2 and 1.10.0, but they all break the Jquery ui.
I also tried the Jquery compatibility mode, but it makes it so that the menu doesn't work in Bootstrap.
<script type="text/javascript">
var jQuery_1_12_2 = $.noConflict(true);
</script>
I even found something that looked like a work around, but didn't seem to help:
https://github.com/frappe/jquery-ui-bootstrap
Here are the Scripts that are ran:
<script type="text/javascript" src="/style/js/jquery.form-2.47.js"></script>
<script type="text/javascript" src="../bootstrap/jquery/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/style/js/jquery.ui.autocomplete.js"></script>
<script src="/style/js/jquery-ui-1.8.1.dialog.min.js"></script>
My menu is basically this one, but the rest of the site works with JQuery UI:
http://www.bootply.com/soljohnston777/KZXTGaVsgE#

jquery libraries conflict

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>

How do I include jQuery/bootstrap/javascript in my rails app with a CDN?

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 %>

jqGrid not available even though imported properly

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>

Categories