It is not possible to fill in the fields inside the handle if the operator
I have a modal with some fields and based on some values in other fields, they may or may not appear.
So the fields look like
<div class="row">
<select class="form-control" id="ddlNewInputType" placeholder="Enter your input type">
<option value="input">Input</option>
<option value="formula">Formula</option>
</select>
</div>
{{#if isFormula }}
<div class="row">
<input type="text" id="txtNewInputFormula" placeholder="Enter formula">
</div>
{{/if}}
There is a helper that determines if the txtNewInputFormula textbox is displayed
isFormula: ->
return Template.instance().isFormula.get();
isFormula is a ReactiveVar that populates when the dropdown changes
'change #ddlNewInputType': (e,t) ->
isFormula = $(e.currentTarget).val() == 'formula'
t.isFormula.set(isFormula);
Basically, the rule is that the input type = input does not display the formula field, and if the input type = formula, display the formula field.
When my modal box is loaded, it is for either a new or an existing object. If it is an existing entity, I pre-populate the modal with values in a database like this
'click #btnEditInput': ->
$('#addInputModal').modal()
$('#txtNewInputName').val(this.name)
$('#txtNewInputFormula').val(this.formula)
$('#ddlNewInputType').val(this.inputType)
$('#ddlNewInputType').change()
The problem is with every field, except for the txtNewInputFormula padding. I suspect the txtNewInputFormula is not populating because it is inside a handlebar if statement and this has not been evaluated yet and therefore the HTML element does not exist.
How can I get around this? How can I fill HTML element inside IF statement?
source to share
You probably pointed out correctly in your diagnostics, have you tried using the descriptor syntax to interactively populate an input text value with the appropriate data?
Something like that:
{{#if isFormula }}
<div class="row">
<input type="text" id="txtNewInputFormula" placeholder="Enter formula" value="{{formula}}">
</div>
{{/if}}
Putting an input value into a reactive helper will set it regardless of when the DOM element is eventually created.
Generally speaking, when you try to manipulate jQuery to change the DOM and traverse Blaze, you might run into problems.
source to share
I agree with @saimeunt, you shouldn't be manipulating the DOM with jQuery like this. You should look for a wrapper to add modal templates to the DOM and provide data.
However, if you want your code to work, you can.
Basically, you want to defer the update until #txtNewInputFormula
the next reset.
'click #btnEditInput': ->
formula = this.formula
Tracker.afterFlush ->
$('#txtNewInputFormula').val(formula)
return
$('#txtNewInputName').val(name)
$('#ddlNewInputType').val(this.inputType).change()
$('#addInputModal').modal()
return
source to share
Another solution is using the autoform package .
In the schema, you can define that a field depends on another field. Then, when you call
{{#autoform collection=...}}{{afInputField...}}...{{/autoform}}
, it will show or hide the corresponding files.
It can be found here with two fields A and B: B will display if A will be selected:
Schemas:
FieldValueIs = new Mongo.Collection("FieldValueIs");
FieldValueIs.attachSchema(new SimpleSchema({
a: {
type: String,
allowedValues: ["foo", "bar"]
},
b: {
type: String
}
}));
HTML form:
{{#autoForm collection="FieldValueIs" type="insert" id="FieldValueIsForm"}}
{{> afQuickField name="a" options="allowed" noselect=true}}
{{#if afFieldValueIs name="a" value="foo"}}
{{> afQuickField name="b"}}
{{/if}}
{{/autoForm}}
source to share
Have you looked into the content of the if content in your own template and filled it with the template's rendered function ? I am assuming it is a meteor because of your tag.
This is of course only partial code, but something like:
HTML:
<template name="someTemplate">
//....
<div class="row">
<select class="form-control" id="ddlNewInputType" placeholder="Enter your input type">
<option value="input">Input</option>
<option value="formula">Formula</option>
</select>
</div>
{{#if isFormula }}
{{>formulaInput}}
{{/if}}
//....
</template>
<template name="formulaInput">
<div class="row">
<input type="text" id="txtNewInputFormula" placeholder="Enter formula">
</div>
</template>
JS:
Template.formulaInput.rendered = function(){
//do the populating
}
The called function is called when the function is displayed, which in this case would be when the helper function isFormula
returns true. The Meteorite manual contains excellent information on how Blaze / Template works.
source to share