Meteor, Materialize, Iron Router and modal

help
1

Hello,

I create a post here because I have a problem I can not solve despite several hours of research.

To explain the situation, I just started a project and I wanted to discover Meteor which I think is a very good tool.
A part from there, I have a main template in which I call my nav and the yield. I use Iron router to load 3 different templates depending on the routes called.
I create 3 different modals, 1 I want to call from my nav and 2 in the second template load by a route and the yield.

It’s something like :
main template -> template nav (1 modal) and yield
and from the yield and Iron Router -> template 1, template 2 (2 modals), template 3

I therefore declare the JQuery lines to load modals and this, in a function ‘onRendered’ on the main template.

Now the problem I have is that if I load the site and I click on the button in the nav for the first modal, it opens, but if I change the route in order to open the other modals it’s impossible. The first work still works, but not the others. It is as if JS was not took into the template when creating the view, despite the fact that it is always integrated in the main.

I hope things are clear …

I do not know if it’s me who doesn’t understand or if I declare something wrong, but I’m lost.

Could someone help me please?

Thanks you in advance.

2

Can you write code where you turn on modal 2 and modal 3?

3

Thanks you for your answer.

It’s true that I could put the code directly in the post, I do not usually post requests for help, so, sorry.

The main template is like (with the tag template of curse) :

{{> _add_prospect}}
{{> _profile}}
{{> _block_title}}
{{> _nav}}
{{> yield}}

“add_prospect” and “profile” are 2 of the 3 modals. “add_prospect” is one of the modal from the second template load by the route from Iron router and “profile” is the template for the nav modal.

For example, I declare the link to load the modal like this (this link is from the nav) :

< a href="#show-profile" class=“modal-trigger”>

And for that this link works, I declare the function “onRendered” on the main template like :

Template.main.onRendered(function(){
$(’.modal-trigger’).leanModal();
$(‘select’).material_select();
});

So, when I load directly the site and I click on the link from the nav, it works, but from here, when I call the route to show the second template where I can find the other modals and for example I click on the button to load the second modal, it doesn’t work. Excepte that if I refresh entirely the page on the template where I can find the other modals, I can load the modal from the nav and the modals from the template without any problem…

It’s really disturbing because even explaining, I don’t understand why I have a problem … It is as if the JS in the “onRendered” function does not apply to the template if it is not loaded first or something like this…

Would you have any idea?

4

When you refresh the page this code is run :

Template.main.onRendered(function(){
$(’.modal-trigger’).leanModal();
$(‘select’).material_select();
});

Perhaps it needs to be re-run when you change routes ? It sounds like a race condition, where you are calling the jquery modal creation code before your modal template is rendered. Also, if the modal template is destroyed and re-created, you’ll have to run this routine again → $(’.modal-trigger’).leanModal();

5

Okay, thanks you for your answer ! It’s really nice to try to help me and it’s an idea to run again the route… but, yes there is a but.

I have already declare that line of JS with the function on the main template :

Template.main.onRendered(function(){
$(’.modal-trigger’).leanModal();
$(‘select’).material_select();
});

And as I use Iron Router, the nav isn’t destroyed and re-rendered when I call a route. So if I run the routine again when I call the route for the template with the other modals, there will be two statements of the JS. The one with the main template and the second for the template called with the route… it’s not possible, this creates a bug.
This will really drive me crazy…

With this additional information, do you see maybe better the problem :persevere: ?