如何更新select2类型的x可编辑源

Question

Here is what i am trying http://jsfiddle.net/wQysh/347/

JS :

$.fn.editable.defaults.mode = 'inline';

var count = 4, sources = [];

for(var i = 1; i <= count; i++){
    sources.push({ id : i, text : 's-'+String(i) })
}

var getSource = function() {
    //i want this function must be called whenever available options is rendred. to ensure NO references issues, i used JSON.parse
    return JSON.parse(JSON.stringify(sources));
};

var getQuery = function(options){
    options.callback({ results : getSource() });
};

var getInitSel = function(multiple) {
    return function(el, cb){
        var t, toSet = [], sc = getSource();
        el[0].value.split(',').forEach(function(a){
            t = _.findWhere(sc, { id : Number(a.trim()) });
            if(t) toSet.push(t);
        });
        cb(multiple ? toSet : (toSet.length ? toSet[0] : null));
    };
};


$('#controller').click(function(e){
    count++;
    sources.push( {id : count, text : 's-'+String(count) });
    $('#username').editable('option', 'source', getSource()); //  <---------------- THIS LINE HAS NO EFFECT SO PRODUCING UNDESIRED RESULT
    //with above line, the source option should get updated and should be handing the new records to render. but nothing happens such.
    $('#username').editable('setValue', [1, count]);
});

$('#username').editable({  //to keep track of selected values in multi select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    source : getSource(),
    value : [1,2],
    emptytext: 'None',
    select2: {
        multiple : true,
        initSelection : getInitSel(true),
        query :getQuery
    }
});

//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!'; 
        } else {
           this.responseText = '';  
        }
    }
});

I am just trying to update the source option of editable element via a controller. But the view doesn't reflect the same.

Any solution??

Answer 1

just added display function with iDkey as 'id'

$('#username').editable({  //to keep track of selected values in multi select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    source : getSource(),
    value : [1,2],
    emptytext: 'None',
    display: function(value, sourceData) {
       //display checklist as comma-separated values
       var html = [],
           checked = $.fn.editableutils.itemsByValue(value, getSource(), 'id');  // it was needed to send 'id' as idKey otherwise it was fetching with value
       if(checked.length) {
           $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
           $(this).html(html.join(', '));
       } else {
           $(this).empty(); 
       }
    },
    select2: {
        multiple : true,
        initSelection : getInitSel(true),
        query :getQuery
    }
});

here is working code http://jsfiddle.net/wQysh/351/

Every time we 'setValue' to editable or on close event editable's 'display' function is called.

in display function existing values is checked by this function

$.fn.editableutils.itemsByValue

where the third parameter accepts the idKey. If we do not provide third parameter while calling this function, it by default takes 'value' as idKey. and 'value' as idKey should not be used when we are using to load array data. ref : http://ivaynberg.github.io/select2/#data_array .