Dynamically change href value based on user input

help
1

Hello,

I’m trying to change the href value of one of the links in my navigation bar based on the specific button the user clicks. I have a navigation bar below the options (buttons user is able to click), and am able to get the href value to change after the click initially using .attr(). So, the link is changed after the first click. however, when I navigate to a different page by clicking a different item on the nav, and then click the nav item that was changed, it goes back to its original value… In essence, the change I’m making using the .attr() isn’t “sticking”. Are these changes not “sticking” because the user navigated away from the template? See my code below:

Here is the nav template (the today item is the link being changed):

<a class="tab-item home" id="todayNav">
  <span class="icon icon-home"></span>
  <span class="tab-label">Today</span>
</a>
<a class="tab-item" href="{{pathFor route='logs'}}" id="reflectNav">
  <span class="icon icon-compose"></span>
  <span class="tab-label">Reflect</span>
</a>
<a class="tab-item" href="{{pathFor route='review'}}" id="reviewNav">
  <span class="icon icon-list"></span>
  <span class="tab-label">Review</span>
</a>

Here is the template (mornPrompt) where the user is able to select a button to change the href value:

<form>

  <button class="btn btn-primary btn-block" id="emotion1">emo 1</button>
  <button class="btn btn-primary btn-block" id="emotion2">emo 2</button>
  <button class="btn btn-primary btn-block" id="emotion3">emo 3</button>
  <button class="btn btn-primary btn-block" id="emotion4">emo 4</button>
  <button class="btn btn-primary btn-block" id="emotion5">emo 5</button>
  <button class="btn btn-primary btn-block" id="emotion6">emo 6</button>
</form>

{{> mainNav}}

Here is the event function that is changing the href value of the #todayNav item:

Template.mornPrompt.events({
‘click #emotion1’: function(event){
event.preventDefault();
var homeURL = “/emotion1”;
$( “a.tab-item.home” ).attr(“href”, homeURL);
},
‘click #emotion2’: function(event){
event.preventDefault();
var homeURL = “/emotion2”;
$( “a.tab-item.home” ).attr(“href”, homeURL);
},
‘click #emotion3’: function(event){
event.preventDefault();
var homeURL = “/emotion3”;
$( “a.tab-item.home” ).attr(“href”, homeURL);
},
‘click #emotion4’: function(event){
event.preventDefault();
var homeURL = “/emotion4”;
$( “a.tab-item.home” ).attr(“href”, homeURL);
},
‘click #emotion5’: function(event){
event.preventDefault();
var homeURL = “/emotion5”;
$( “a.tab-item.home” ).attr(“href”, homeURL);
},
‘click #emotion6’: function(event){
event.preventDefault();
var homeURL = “/emotion6”;
$( “a.tab-item.home” ).attr(“href”, homeURL);
}
});

Does anyone know what the issue is? Please let me know if you need me to clarify anything. Thank you!!!

2

my guess is that it has something to do with the {{pathFor}} helper…

depending on what router youre using, you should probably use FlowRouter.go(homeURL); at the end of your click events instead of {{ pathFor }} if it is a dynamic value.

3

I’m actually using iron:router as my router.

I’ve created a todayEmo helper for the mainNav template, and plugged that into the ‘today’ link, so it looks like this:

<a class="tab-item home" href="{{todayEmo}}" id="todayNav">
  <span class="icon icon-home"></span>
  <span class="tab-label">Today</span>
</a>

Do you have any suggestions as to what to put into my helper function to dynamically change that link based on which button is clicked? I’ve tried declaring a hasBeenClicked global variable and haven’t had much luck with the below conditional.

Template.mainNav.helpers({

'todayEmo': function () {

	if ("#emotion1" == hasBeenClicked) {
		Router.go('/emotion1');
	} else if ("#emotion2" == hasBeenClicked) {
		Router.go('/emotion2');
	} else if ("#emotion3" == hasBeenClicked) {
		Router.go('/emotion3');
	} else if ("#emotion4" == hasBeenClicked) {
		Router.go('/emotion4');
	} else if ("#emotion5" == hasBeenClicked) {
		Router.go('/emotion5');
	} else {
		Router.go('/emotion6');
	}

}

});

Thanks a bunch for your help!

4

Glad it worked! I think you’d want to use a Reactive-Dict to manage state instead of a global variable. The Blaze section in the Meteor Guide has some good examples of this.

If you want to go against MDG’s recommendation, you can use Session variables.

todayEmo: function () { 
const hasBeenClicked = Session.get('hasBeenClicked');

    if ("#emotion1" == hasBeenClicked) {
  		Router.go('/emotion1');
  	} else if ("#emotion2" == hasBeenClicked) {
  		Router.go('/emotion2');
  	} else if ("#emotion3" == hasBeenClicked) {
  		Router.go('/emotion3');
  	} else if ("#emotion4" == hasBeenClicked) {
  		Router.go('/emotion4');
  	} else if ("#emotion5" == hasBeenClicked) {
  		Router.go('/emotion5');
  	} else {
  		Router.go('/emotion6');
  	}
  }

Then you would set the session / state in the click events & Template.onCreated() block