Adding to x-editable select source with button click

Question

I have using BootstrapTable with X-editable. I have a select box, that I would like to update the source data with a button click. Ideally, I like to get the source from the column, push a value to it and reload it without changing any edits to that column by the user.

Full code: http://jsfiddle.net/rp4nkb46/1/

relevant code:

 $('#addoption').click(function () {
                names.push({value: 5, text: 'Bob'}) 
            $('#table').bootstrapTable('OnRefresh', {});
    });

Answer 1

Use a function to return the names array rather than specifying the array directly in your table setup:

$(function () {
    $('#table').bootstrapTable({
        columns: [{field: 'Contact',
                   title: 'Contact',
                   editable: {
                       type: 'select',
                       source:  function() { return names; }
                   }
                 }],
        data: data
    });
});

It seems that the X-Editable will bind a supplied array once upon creation of the control but will call the function each time.