How to wait rendering before acting on click event?

1
votes

This issue not always shows up. It works fine if I wait some time for the page to load or, if I wait enough between clicks to change the language on this drop-down menu. This is for a simple multi-language website.

My Drop-down in the nav-bar looks like:

    ....
    <li class="dropdown">  

    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> <img src="Pictures/BR-US-SP.png"><b class="caret"></b></a>  
            <ul class="dropdown-menu" id="langMenu">  
                <li><a href="#" id="pt-BR" name="pt-BR" value="pt-BR"><img src="/Pictures/1383607461_Brazil.png"></a></li>
                <li><a href="#" id="en" name="en" value="en"><img src="/Pictures/1383615303_United-States.png"></a></li>  
                <li><a href="#" id="es" name="es" value="es"><img src="/Pictures/1383615325_Spain.png"></a></li>  
                <li class="divider"></li>  
            </ul>  
    </li> 
    ....

And events looks like:

Template.navigation.events({
'click #langMenu': function(event){
        currentLang = $(event.target).attr('id');
  ...
   // So some stuff with and re-renders page upon value of currentLang //
  ...
 }
});

When it breaks, console shows that the variable currentLang is undefined. So I am assuming that this is because the template was not rendered in time for the click event to pick up its value. Is this assumption correct?

How do I make sure to always get the currentLang value?

Sorry. I have spent a couple days already goggling it out . However as Meteor evolves so fast, I am confused by so many possible solutions I found and tested that actually did not work (deprecated?). I can't get by Meteor Docs exactly how to use Blaze functions, when and how to use onRendered, etc... Are there any good examples?

Instead, should I use a completely different approach by using Iron Router? If yes, then how?

2
javascriptmeteorinternationalizationmeteor-blaze

2 Answers

0
votes

You have to block that out. The current ES5 method of doing that would be

Template.navigation.events({
'click #langMenu': function(event){
        setTimeout(function(){
            currentLang = $(event.target).attr('id');
        },100)
 }
});
0
votes

The problem is probably the selector for your click function. I'd do this instead :

Template.navigation.events({ 'click #langMenu>li': function(event){ currentLang = $(event.currentTarget).attr('id'); // Do stuff... } });