bootstrap-3-modal icon indicating copy to clipboard operation
bootstrap-3-modal copied to clipboard

Modal doesn't open!!!

Open systemagiclab opened this issue 8 years ago • 5 comments

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

systemagiclab avatar Jul 27 '16 13:07 systemagiclab

Have you somehow added bootstrap to your project? If so, how? I think you should receive this error if you haven't.

PeppeL-G avatar Jul 27 '16 14:07 PeppeL-G

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 avatar Jul 27 '16 23:07 Landerson352

@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.

PeppeL-G avatar Jul 28 '16 07:07 PeppeL-G

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:

[email protected]

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!

advancedsoftwarecanada avatar Aug 17 '17 15:08 advancedsoftwarecanada

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:

pkfleur avatar Jun 18 '20 15:06 pkfleur