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.
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…
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();
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 ?