i'm working with Semantic UI on Meteor. I have some modules like dropdown fields in my code. everything is on to get data, but I would like to clearthe dropdown like I could clear the text fields, but it doesn't work ..
Someone can help me please ?
here is my code:
Meteor.subscribe('brands');
Template.deliveryForm.helpers({
brands: function() {
return Brands.find({}, {fields: {'brand':1}});
}
});
Template.deliveryForm.events({
'submit .new-delivery': function(event) {
event.preventDefault();
var date = event.target.date.value;
var brand = event.target.brand.value;
var description = event.target.description.value;
Deliveries.insert({
date: date,
brand: brand,
description: description,
createdAt: new Date()
});
event.target.date.value = "";
event.target.brand.value = "";
event.target.description.value = "";
}
});
Template.deliveryForm.rendered = function(){
$('select.dropdown').dropdown({ });
}
Thanks for the help
Here is the template code:
<template name="deliveryForm">
<form class="ui form new-delivery">
<div class="four inline fields">
<div class="wide three field">
<label>Date</label>
<input type="date" name="date" placeholder="Date">
</div>
<div class="wide four field">
<label>Marque</label>
<select class="ui search dropdown" name="brand">
<option value="">Selectionner Marque</option>
{{#each brands}}
<option value="{{brand}}">{{brand}}</option>
{{/each}}
</select>
</div>
<div class="wide eight field">
<label>Description</label>
<input type="text" name="description" placeholder="Description">
</div>
<button class="ui button icon right labeled teal" type="submit" name="submit"><i class="right checkmark icon"></i>Valider</button>
</div>
</form>
</template>
From Semantic UI dropdown docs, you can clear your dropdown this way:
Template.deliveryForm.rendered = function(){
$('select.dropdown').dropdown('clear');
}
Hope this works :)
EDIT
Your code, and my example, needs to be wrapped inside Meteor.defer
(some refs 1, 2, 3), because the DOM isn't ready during the execution of rendered
callback.
Template.deliveryForm.rendered = function(){
Meteor.defer(function() {
$('select.dropdown').dropdown('clear');
});
}
Hope this works now :)