x-editable on shown event dropdown (<select />) source refresh

Question

I'm trying to change a x-editable source data just before it is shown so that my dropdown menu entries are always fresh even if source changes.

Here is a link to explain: http://jsfiddle.net/XN7np/3/

// my source that can change over time
var source = [{'value': 1, 'text': 'fine'}, {'value': 2, 'text': 'bad'}];

$('#my_select').editable({
    'mode'  : 'inline',
    'source': source,
});

$('#my_select').on('shown', function(ev, editable) {
    // now changing my source just before dropdown is shown
    source = [{'value': 1, 'text': 'GOOD'}, {'value': 2, 'text': 'FU'}];

    //$(editable).editable('option', 'source', source); NOT WORKING
    //$('#my_select').editable('option', 'source', source); NOT WORKING
    //$(this).editable('option', 'source', source); NOT WORKING
});

any idea?

Answer 1

I do not see it in the documentation, but you can pass a function to the source parameter like this:

var source = [{'value': 1, 'text': 'fine'}, {'value': 2, 'text': 'bad'}];

$('#my_select').editable({
    'mode'  : 'inline',
    'source': function() {
        return source;
    },
});

This way it always uses the updated source array. I updated your fiddle: http://jsfiddle.net/XN7np/4/

Answer 2

This line works:

$('#my_select').editable('option', 'source', source);

You have to use double quote for "value" and "text", instead of single quote 'value', 'text' for any xeditable source, like source2:

 var source2 = [{"value": 1, "text": "fine111"}, {"value": 2, "text": "bad22"}];


 $('#change').click(function(e) {
    $('#my_select').editable('option', 'source', source2)
 });

copy above code to your fiddle example and see how it works.

Answer 3

<span class="editable ea-appsch-agntid" data-type="select" data-source="URL" data-value="">agntname</span>