Jquery multi select plugin with meteor

Question

I am using jquery multiSelect plugin (http://harvesthq.github.io/chosen/) with meteor. It works fine. When when the list of options changes dynamically, it shows the old same values in the option list.

<template name="testDynamicSelect">
    <select class="chosen-select">
        {{#each selectList}}
            <option style="width: 300px">{{this}}</option>
        {{/each}}
    </select>
</template>

Helpers

Session.set('selectList',['delhi','pune','chandigarh']);
Session.set('run',true);
Template.testDynamicSelect.helpers({
    selectList:function(){
        return Session.get('selectList')
    }
});

    Template.testDynamicSelect.rendered = function(){
        var instance = this;
        instance.autorun(function(){
            if(Session.get('run')){
                var config = {
                    '.chosen-select': {},
                    '.chosen-select-deselect'  : {allow_single_deselect:true},
                    '.chosen-select-no-single' : {disable_search_threshold:10},
                    '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
                    '.chosen-select-width'     : {width:"95%"}
                }

                for (var selector in config) {
                    $(selector).chosen(config[selector]);
                }
                Session.set('run',false);
                console.log('run select ');
            }
        });
    }

Now in the console, when I type

Session.set('selectList',['delhi','pune','chandigarh','bangalore']);
Session.set('run',true);

I don't get the updated value 'bangalore'.

Answer 1

If you check properly then the option tags are generated dynamically. But it is not shown dynamically in the jquery multi select. The reason being, even if the option tags are generated dynamically, you have not updated the multi-select list.

Read the documentation carefully, you need to trigger the update as follows: $(".chosen-select").trigger("chosen:updated");

Answer 2

Your .rendered() only runs once when the template is rendered, it's not going to react to the change in your run session variable until the template is rendered again.

You need to update the menu in your template helper to have it react to changes in your array of place names.