bootstrap-3-modal
bootstrap-3-modal copied to clipboard
Modal doesn't open!!!
Everytime I try to open the modal, it doesn't work. I recieve this error: Uncaught TypeError: $modal.modal is not a function. I'm doing this tutorial: http://experimentsinmeteor.com/modal-dialogs-part-2/, and doesn't work... Please help me!!
Have you somehow added bootstrap to your project? If so, how? I think you should receive this error if you haven't.
I ran into the same error when I was using jQuery and Bootstrap from a CDN. I switched back to using the Meteor packages for both (using huttonr:bootstrap3
) and it resolved the issue for me. (From what I can guess, the domrange.$
reference causes Meteor to look internally for the jQuery package.) Hope this helps!
@Landerson352 is right, it does use jQuery internally. Here's a backtrace to it:
https://github.com/meteor/meteor/blob/devel/packages/blaze/domrange.js#L423 https://github.com/meteor/meteor/blob/devel/packages/blaze/dombackend.js#L177 https://github.com/meteor/meteor/blob/devel/packages/blaze/dombackend.js#L4
You need to have either the jQuery package or the global jQuery
variable.
Edit
But then you should rather get an "jQuery not found" error :/ But they might have changed that since @Landerson352 used it.
It's working great for me. You probably need to set the correct version of jQuery, which is a total nightmare.
Go in to your meteor project.
Find the hidden folder, .meteor
Edit 'versions' (no file extension)
Find jquery, make sure it says:
This should work for you. This plugin worked PERFECTLY out of the box for me, but I've got a mature project all figured out. I just came here to contribute a bit and say thanks to the author. Good luck!
I'm on Windows 10 with a brand new project (following a Coursera course) and have been trying to make the modal open. Here is what I did to make it work:
I removed jquery and added @1.11.10 (didn't work)
Then I followed cyberpunk's advice for this [question](https://stackoverflow.com/questions/27064176/typeerror-modal-is-not-a-function-with-bootstrap-modal)
.
ran meteor commands:
npm i @types/jquery npm install -D @types/bootstrap
then added this to my main.js (I only have the 3 basic client files meteor creates)
import * as $ from "jquery"; import * as bootstrap from "bootstrap";
My event to open the modal looks like this:
Template.newsPosts.events({ 'click .jsShowNewsMod':function(event){ event.preventDefault(); jQuery.noConflict(); Modal.show('newsMod'); } });
And then added this right before the closing body tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
The $modal.modal error disappeared but the modal wasn't showing. Removing "fade" from the modal class then made it appear: