Blaze selected attribute not working - Alternative Solution


In this post, I will guide you through an alternative solution for the issue we all had faced at least once with DROPDOWNS.
Being an newbee I would like to show what I did then

Problem is concerned with make a particular item selected in dropdown when dropdown shows up,
We are using Meteor with Blaze



What We Tried

  1. Step: Creating Helpers.
<select id="last_used_edit">      
 <option value="" disabled selected>Year</option>
 <option value="1"  selected="{{option3Selected 'Option 1'}}"  >Option 1</option>
 <option value="2"  selected="{{option3Selected 'Option 2'}}"  >Option 2</option>
 <option value="3" selected="{{option3Selected 'Option 3'}}"  >Option 3</option>
 <option value="4" selected="{{option3Selected 'Option 4'}}" >Option 34</option> 
 </select>


Step 2: Create edit event on icon on which a model should pop up where we are supposed to show the selected value corresponding to the value stored in database.

Step 3: we tried calling helpers explicitely and succeed in that though. but the solution seems to be far more than we think of. Actually, this approach makes helpers calling not one time as expected but four time because of four time declaration in the HTML code.

Here is the question we had posted on Forums

https://forums.meteor.com/t/selected-not-working-in-dropdown-blaze/40857/5
Result Status: NOT FOUND


Alternative Solution : SEMANTIC UI DROPDOWN


Step 1:
  • meteor add semantic:ui-dropdown
  • meteor add semantic:ui-transition
Step 2.

    <div class="code ui selection dropdown">
    <input type="hidden" name="test" value="" />
    <div class="text">Test</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" data-value="">Not Selected</div>
        <div class="item" data-value="A">A</div>
        <div class="item" data-value="B">B</div>
    </div>

Step 3:
Setting Selected
$(".ui.dropdown").dropdown("set selected", "A");

Getting Selected.
var data = $('.ui.dropdown').dropdown('get value');


I hope you would like this post. Stay tuned for more

Comments

Popular posts from this blog

Upload Image in Meteor

What makes an Android App Sucessful?