[Solved] Issue to display modal with bootstrap 3

help
1

Hi,

I’m using bootstrap.
I’m facing a very beginner issue at displaying a modal.

Here is my code, I cannot see what i missed, what is wrong ?

So Here is my template with the button to call the modal

<template name="allCars">
	<ul>
	{{#each cars}}
	<div class= 'car'>
		<h3>{{carname}}</h3> <br>
			{{#each passengers theCar._id}} <!-- Call passengers helper and put the id of the current car in parameter and then display all the names of users linked to this car -->
			<p>{{username}}</p>
			{{/each}}
		<button class="btn btn-primary" id="add">modal</button>
	</div>
	{{/each}}
	</ul>
</template>

Here is he template of my modal

Template name="modalAddUserToCar">

    <div class="modal fade">
       <div class="modal-dialog modal-sm">
         <div class="modal-content">

         </div>
       </div>
     </div>

</template>

and here is my events

Template.allCars.events({
//CLicking the button will show a modal
	'click add': function(e){
		e.preventdefault();
		$("modalAddUserToCar").modal("show");
	}
});

Thanks in advance for any help

2

which html element should this match? I dont see any
there is no such class nor id

3

It refer directly to the name of the template. I thought that it would worked like this, how should I do ?
Giving an Id to my modal class ?

4

there is package for showing modals :smiley:

1 Like
5

Thanks a lot, I installed peppelg:bootstrap-3-modal and…
It works just great now !

6

You can also use bootboxjs:

and here is a snippet to load a template inside:

7

None of the replies above point out the initial problem and instead suggest packages Which is fine and it looks like you’ve found a solution but I thought i’d explain why your initial approach didnt work.

$('modalAddUserToCar')

Won’t ever work because its not a valid jquery selector.

You can’t refer to templates this way. Templates aren’t included in the DOM until they are used.

For a modal to be used, you need to include it in the dom. In your case somewhere in another used template or something else manualy, like the Blaze.render… methods etc. Bellow I show how to just include it.

{{>modalAddUserToCar}}

And then you have to be able to find it with a valid jquery selector. Either by ID or Class or something more complicated for example if we changed the modal template above to be:

<template name="modalAddUserToCar">
    <div class="modal fade" id="modal1">
       <div class="modal-dialog modal-sm">
         <div class="modal-content">

         </div>
       </div>
     </div>

</template>

We give it a HTML id of “modal1”

Then you could show the modal with:

$('#modal1").modal('show');

Ultimately the packages are probably better as managing modals manually but sometimes doing the background research might help out later.

1 Like
8

@ahref Even better, thanks for the explanation it helps a lot, it works great !

9

@ahref just one more question with your method how do I do to hide the modal, from a button that is in the modal ?

10

Once again I suggest you use a modal package to manage these but.

$('#modal1").modal('hide')

will work.

I sugesst you read through the documentation at: http://getbootstrap.com/

Good luck.