Search code examples
javascriptmeteormeteor-blazesemantic-uimeteor-helper

Meteor : Clear a field


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>

Solution

  • 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 :)