niklai
August 17, 2016, 4:38pm
1
I have this helper for the inputs
Template.editplan.helpers({
editPlans: function() {
var currentPlan = FlowRouter.getParam('_id');
return Plans.findOne({_id: currentPlan});
}
});
<div class="row">
<div class="twelve columns">
<label>Price</label>
<input type="text" value="{{editPlans.price}}" class="u-full-width" placeholder="Price" name="price" id="price">
</div>
</div>
What helper i need for the select element
> <div class="row">
> <div class="twelve columns">
> <label>Default Plan</label>
> <select name="is_default" id="is_default" class="u-full-width">
> <option value="0">No</option>
> <option value="1">Yes</option>
> </select>
> </div>
> </div>
You could create a helper that returns the options. Like so (assuming the document has a field is_default)
Template.editplan.helpers({
is_default_options: function() {
var currentPlan = Plans.findOne( FlowRouter.getParam('_id') );
if(currentPlan) {
return currentPlan.is_default
? "<option value=0>No</option><option selected value=1>Yes</option>"
: "<option selected value=0>No</option><option value=1>Yes</option>"
;
}
}
});
and then include the options as HTML with {{{ }}}
<div class="row">
<div class="twelve columns">
<label>Default Plan</label>
<select name="is_default" id="is_default" class="u-full-width">
{{{is_default_options}}}
</select>
</div>
</div>
niklai
August 17, 2016, 7:28pm
3
with that code output aways Yes
You need to adjust it to test for your Plan documents current flag.
niklai
August 18, 2016, 7:18am
5
I want to get data from db no html ?
TL;DR Share the structure of a document in your plans collection and someone might be able to help.
You store the state of a plan, if it should be default or not, in the database, correct? And when you display the form you want to show the SELECT with the correct option. So you need to update the code in my response with the correct field (as I said, I was assuming your document has a field is_default). Without seeing the structure of your Plan collections documents, it is nearly impossible to help.
niklai
August 18, 2016, 6:25pm
7
This is test sample crud functionality similar to my app
Collections
Jobs = new Mongo.Collection(‘jobs’);
Router
FlowRouter.route('/', {
name: 'home',
action() {
BlazeLayout.render("layout", {main: "info"});
}
});
FlowRouter.route('/form', {
name: 'form',
action() {
BlazeLayout.render("layout", {main: "form"});
}
});
FlowRouter.route('/editform/:_id', {
name: 'editform',
action() {
BlazeLayout.render("layout", {main: "editform"});
}
});
Main.html
<head>
<title>Test</title>
</head>
<template name="layout">
{{> Template.dynamic template=main}}
</template>
<template name="info">
<div class="col-md-7">
<h4>Job Info</h4>
<a href="/form" class="btn btn-primary">Add Job</a>
<br><br>
<table class="table table-bordered">
<thead>
<tr>
<th>Company Name</th>
<th>Job</th>
<th>Salary</th>
<th>Active</th>
<th>Manage</th>
</tr>
</thead>
<tbody>
{{#each jobs}}
<tr>
<td>{{name}}</td>
<td>{{job}}</td>
<td>{{salary}}</td>
<td>{{active}}</td>
<td>
<a href="/editform/{{_id}}" class="btn-success btn btn-xs">Edit</a>
<button id="deletejob" class="btn-danger btn btn-xs">Delete</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</template>
Form.html
<template name="form">
<div class="container">
<div class="col-md-5">
<form class="form-horizontal" id="addjob">
<div class="form-group">
<label for="name">Company Name</label>
<input type="text" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="job">Job</label>
<input type="text" name="job" id="job" class="form-control">
</div>
<div class="form-group">
<label for="salary"></label>
<label>Salary</label>
<input type="text" name="salary" id="salary" class="form-control">
</div>
<div class="form-group">
<label for="active">Active</label>
<select class="form-control" id="active" name="active">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
<a href="/" class="btn btn-default">Back</a>
</form>
</div>
</div>
</template>
EditForm.html
<template name="editform">
<div class="container">
<div class="col-md-5">
<form class="form-horizontal" id="editjob">
<div class="form-group">
<label for="name">Company Name</label>
<input type="text" value="{{editjob.name}}" name="name" id="name" class="form-control">
</div>
<div class="form-group">
<label for="job">Job</label>
<input type="text" value="{{editjob.job}}" name="job" id="job" class="form-control">
</div>
<div class="form-group">
<label for="salary"></label>
<label>Salary</label>
<input type="text" value="{{editjob.salary}}" name="salary" id="salary" class="form-control">
</div>
<div class="form-group">
<label for="active">Active</label>
<select class="form-control" id="active" name="active">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<input type="submit" class="btn btn-primary" value="Save">
<a href="/" class="btn btn-default">Back</a>
</form>
</div>
</div>
</template>
Main.js
Template.info.helpers({
jobs: function(){
return Jobs.find({});
}
});
Template.editform.helpers({
editjob: function(){
var currentJob = FlowRouter.getParam('_id');
return Jobs.findOne({_id: currentJob});
}
});
Template.form.events({
'submit #addjob': function(event){
event.preventDefault();
var name = event.target.name.value;
var job = event.target.job.value;
var salary = event.target.salary.value;
var active = event.target.active.value;
Jobs.insert({
name: name,
job: job,
salary: salary,
active: active
});
toastr.success('Job Added');
FlowRouter.go('/');
}
});
Template.editform.events({
'submit #editjob': function(event){
event.preventDefault();
var name = event.target.name.value;
var job = event.target.job.value;
var salary = event.target.salary.value;
var active = event.target.active.value;
Jobs.update({
_id: FlowRouter.getParam('_id')
}, {
$set: {
name: name,
job: job,
salary: salary,
active: active
}
});
toastr.success('Jobs Updated');
FlowRouter.go('home');
}
});
Template.info.events({
'click #deletejob': function(){
if(confirm('Are You Sure')){
Jobs.remove(this._id);
toastr.success('Job Deleted');
return false;
}
return false;
}
});