1

I have a HTML section that I'd like to toggle on/off using BlazeJS. The HTML looks like:

<div class="ui small buttons" style="margin: 2em 0em 2em 0em">
      <button id="driver_button" class="ui green button">Driver</button>
      <div class="or"></div>
      <button id="rider_button" class="ui green button">Rider</button>
</div>

<div id="driver_field">
      <div class="fields">
        {{> Text_Form_Control label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}
      </div>
      <div class="fields">
        {{> Select_Form_Control label="Number of Seats" placeholder="5" value=profile.seats errorMessage=(fieldError "seats")}}
      </div>
    </div>

<div id="rider_field">
      <div class="fields">
        {{> Text_Form_Control label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}
      </div>
      <div class="fields">
        {{> Select_Form_Control label="Number of Seats" placeholder="5" value=profile.seats errorMessage=(fieldError "seats")}}
      </div>
</div>

And the associated Javascript in the respective file can be found in:

Template.Profile_Page.events({
 'click #driver_button'(event, instance) {
    event.preventDefault();
    const driver = instance.getElementById('driver_field');
    const rider = instance.getElementById('rider_field');
    driver.style.display = 'block';
    rider.style.display = 'none';
    console.log('hello');
  },
  'click #rider_button'(event, instance) {
    event.preventDefault();
    const driver = instance.getElementById('driver_field');
    const rider = instance.getElementById('rider_field');
    driver.style.display = 'none';
    rider.style.display = 'block';
  },
})

However, instance doesn't correspond to document. How would one access the divs from the events handler?

1 Answer 1

0

So basically you want is:

  1. To show the relevant section based on what button was clicked.
  2. Get values from the fields.

To show the relevant section based on what button was clicked.

You can use the #if condition inside the template to achieve the condition check. Whatever is inside the #if condition will render if the if block return true. As of now, there is only boolean support for the template's if condition. More explanation here

Whenever one of the button is clicked, you're setting a boolean flag in a Session variable. And this session variable's value is being passed to the template via the helper - which inturn renders what's inside the if blocks based on the truthiness.

Let me know if this explanation is satisfactory. If not, I can reword it better.

Template page:

<template name="Profile_Page">
<div class="ui small buttons" style="margin: 2em 0em 2em 0em">
      <button id="driver_button" class="ui green button">Driver</button>
      <div class="or"></div>
      <button id="rider_button" class="ui green button">Rider</button>
</div>

{{#if driverButtonClicked}}
<div id="driver_field">
      <div class="fields">
        {{> Text_Form_Control label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}
      </div>
      <div class="fields">
        {{> Select_Form_Control label="Number of Seats" placeholder="5" value=profile.seats errorMessage=(fieldError "seats")}}
      </div>
    </div>
{{/if}}

{{#if riderButtonClicked}}
<div id="rider_field">
      <div class="fields">
        {{> Text_Form_Control label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}
      </div>
      <div class="fields">
        {{> Select_Form_Control label="Number of Seats" placeholder="5" value=profile.seats errorMessage=(fieldError "seats")}}
      </div>
</div>
{{/if}}
</template>

Helper

Template.Profile_Page.events({
 'click #driver_button'(event, instance) {
    event.preventDefault();
    Session.set("showDriverForm",true);
  },
  'click #rider_button'(event, instance) {
    event.preventDefault();
    Session.set("showRiderForm", true);
  },
});

Template.Profile_Page.helpers({
  driverButtonClicked: function(){
    return Session.get("showDriverForm");
  },
  riderButtonClicked: function(){
    return Session.get("showRiderForm");
  }
});

Get values from the fields:

Since you are using text fields, you can use a change listener to detect changes to the value in those fields.

Example snipped. (I've added a an id field to uniquely distinguish the form fields.

{{> Text_Form_Control id="carModels" label="Car Model" placeholder="Toyota Tacoma 2016" value=profile.car errorMessage=(fieldError "car")}}
        {{> Select_Form_Control id="yearsOwned" label="Years Owned" placeholder="3" value=profile.year errorMessage=(fieldError "year")}}

Events will contain:

'change #carModels' (event){
    var models=event.target.value;
},
'change #yearsOwned' (event){
  var years=event.target.value;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.