CODEWITHSUNDEEP
ember.jsjquery-select2
Deewendra Shrestha
Deewendra Shrestha

Reputation: 2465

dynamically setting selected option in ember.select which uses select2 lib

I am having difficulty to show the selected option appear on the select2 component when using it with ember. This is how my controller looks like:

AS_ANALYTICS.Exercise = Ember.Object.extend({
    id: null,
    name: null
});

AS_ANALYTICS.SelectedExercise = Ember.Object.extend({
    exercise: null,
    changed:function(){
        if(this.exercise.id!==null){

        }
    }.observes('exercise')
});

AS_ANALYTICS.selectedExercise = AS_ANALYTICS.SelectedExercise.create();

AS_ANALYTICS.ExerciseController = Ember.ArrayController.create({
    content:[],

    setContent:function(exercises){
        //each array controller has content property by default
        //selects seems to only use this property for some reason
        this.set('content',exercises);
        if(exercises.length==1){
           //SOMETHING IS OFF HERE!
            console.log(AS_ANALYTICS.ExerciseController.objectAt(0).get('id'));
            AS_ANALYTICS.selectedExercise.set('exercise',AS_ANALYTICS.ExerciseController.objectAt(0));
            $('#exerciseId').select2({
               width:'300px'
            }).select2('val',AS_ANALYTICS.ExerciseController.objectAt(0).get('id'));
       }
   },

    populateExercisesForClient:function(customerId){
        var self = this;
        jQuery.getJSON(AS.baseURL+'analytics/listCustomerExercisesJson',{"id":customerId}, function(json) {
            var exercises = [], i = 0,len = json.length;

            for(;i<len;i++){
                exercises.push(AS_ANALYTICS.Client.create({"id":json[i].id,"name":json[i].name}));
            }
            self.setContent(exercises);
        });
    }
});

I call populateExercisesForClient, which makes an ajax request to populate the content. When I click on the select2 component, on the drop down I can see that the option is highlighted but somehow the select shows 'please select...' by default instead of the text of the selected option.

My view code is :

AS_ANALYTICS.Select2SelectView = Ember.Select.extend({
    prompt: 'Please select...',
    classNames: ['input-xlarge'],

didInsertElement: function() {
    var elem = this.$();
    Ember.run(function() {
        Ember.run.scheduleOnce('afterRender', this, function(){
            elem.select2({
                width:'300px'
            });
        });
    });
},

willDestroyElement: function () {
    var elem = this.$();
    elem.select2("destroy");
}});

You help will be highly appreciated. Thanks.

UPDATE : enter image description here This is what I am talking about, the option is selected but the text doesnot appear on top of select, even after when I used the select view that "buuda" suggested and still same issue!

Upvotes: 1

Views: 3258

Answers (1)

buuda
buuda

Reputation: 1427

I wrote a select2 view that extends Ember.Select. You can find the gist here. You can use in it place of Ember.Select.

I am not sure what is going wrong with your example, but you are having the controller manipulate the view, which is not good form. Have the view observe the controller content and update upon change.

Upvotes: 2

Related Questions