xeditable & select2 dropdown w/ajax source displaying empty after submitting

Question

I've gotten xeditable and select2 to work with an api call as the source and everything works great EXCEPT the following.

After submitting the select2 dropdown, the value of the table is displayed as EMPTY and requires a page refresh in order to update to the correct value.

Does anyone know how to update the value to the selected select2 dropdown value?

my html:

<td class="eo_role"><a href="#" data-pk={{r.pk}} data-type="select2" data-url="/api/entry/{{r.pk}}/"
data-name="eo_role" data-title="Enter EO_role">{{r.eo_role}}</a></td>

here is my JS:

$('#example .eo_role a').editable( {
    params: function(params) {  //params already contain `name`, `value` and `pk`
      var data = {};
      data[params.name] = params.value;
      return data;
    },
    source: 'http://localhost:8000/api/eo_role/select_two_data/',
    tpl: '<select></select>',
    ajaxOptions: {
        type: 'put'
        },
    select2: {
        cacheDatasource:true,
        width: '150px',
        id: function(pk) {
            return pk.id;
        },
        ajax: {
            url: 'http://localhost:8000/api/eo_role/select_two_data/',
            dataType: "json",
            type: 'GET',
            processResults: function(item) {return item;}    
        }
    },
    formatSelection: function (item) {
        return item.text;
    },
    formatResult: function (item) {
        return item.text;
    },
    templateResult: function (item) {
        return item.text;
    },
    templateSelection : function (item) {
        return item.text;
    }, 
});

Again - everything works (database updates, dropdownlist populates etc.) however the <td> gets updated with "EMPTY" after submitting the dropdown - requiring a page refresh to show the correct value.

Answer 1

I figured out a workaround. I'm SUPER PUMPED.

//outside of everything, EVERYTHING
//test object is a global holding object that is used to hold the selection dropdown lists
//in order to return the correct text.
var test = {};

$('#example .eo_role a').editable( {
    params: function(params) {  //params already contain `name`, `value` and `pk`
      var data = {};
      data[params.name] = params.value;
      return data;
    },

    //MUST be there - it won't work otherwise.
    tpl: '<select></select>',
    ajaxOptions: {
        type: 'put'
        },
    select2: {

        width: '150px',
        //tricking the code to think its in tags mode (it isn't)
        tags:true,
        //this is the actual function that triggers to send back the correct text.
        formatSelection: function (item) {
            //test is a global holding variable set during the ajax call of my results json.
            //the item passed here is the ID of selected item. However you have to minus one due zero index array.
            return test.results[parseInt(item)-1].text;
        },
        ajax: {
            url: 'http://localhost:8000/api/eo_role/select_two_data/',
            dataType: "json",
            type: 'GET',
            processResults: function(item) {
            //Test is a global holding variable for reference later when formatting the selection.
            //it gets modified everytime the dropdown is modified. aka super convenient.
            test = item;
            return item;}    
        }
    },  
});