xeditable & select2 dropdown w/ajax source display

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;}    
        }
    },  
});  

Answer 2

I faced that same issue. I handle it that way:

In x-editable source code look for:

   value2html: function(value, element) {
     var text = '', data,
     that = this;
     if(this.options.select2.tags) { //in tags mode just assign value
       data = value;
       //data = $.fn.editableutils.itemsByValue(value, this.options.select2.tags, this.idFunc);
       } else if(this.sourceData) {
          data = $.fn.editableutils.itemsByValue(value, this.sourceData, this.idFunc);
       } else {
          //can not get list of possible values
          //(e.g. autotext for select2 with ajax source)
       }

As you can see, there is else statment, without any code (only 2 comments) that is the situation, with which we have a problem. My solution is to add missing code:

(...) else {
      //can not get list of possible values
      //(e.g. autotext for select2 with ajax source)
      data = value;
}

That's fix problem without tags mode enabled. I do not detect any unwanted behaviors so far. Example code:

jQuery('[data-edit-client]').editable({
    type: 'select2',
    mode: 'inline',
    showbuttons: false,
    tpl: '<select></select>',
    ajaxOptions: {
        type: 'POST'
    },
    select2: {
        width: 200,
        multiple: false,
        placeholder: 'Wybierz klienta',
        allowClear: false,
        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 window.cacheData[parseInt(item)].text;
        },
        ajax: {
            url: system.url + 'ajax/getProjectInfo/',
            dataType: 'json',
            delay: 250,
            cache: false,
            type: 'POST',
            data: {
                projectID: system.project_id,
                action: 'getProjectClients',
                customer: parseInt(jQuery("[data-edit-client]").attr("data-selected-company-id"))
            },
            processResults: function (response) {
                window.cacheData = response.data.clients;
                return {
                    results: response.data.clients
                };
            }
        }
    }
});