xeditable & select2 dropdown w/ajax source affichant vide après l'envoi

Question

J'ai obtenu xeditable et select2 pour travailler avec un appel api comme source et tout fonctionne très bien SAUF le suivant. Après avoir envoyé la liste déroulante select2, la valeur de la table est affichée sous la forme EMPTY et nécessite une actualisation de la page afin de mettre à jour la valeur correcte.

Est-ce que quelqu'un sait comment mettre à jour la valeur de la valeur déroulante select2 sélectionnée?

mon 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> 

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

Encore une fois - tout fonctionne (mises à jour de base de données, dropdownlist Remplit etc.) mais la <td> est mise à jour avec "EMPTY" après avoir soumis la liste déroulante - nécessitant une actualisation de la page pour afficher la valeur correcte.

Answer 1

J'ai trouvé une solution de contournement. Je suis 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

J'ai fait face au même problème. Je gère cette façon:

Dans le code source x modifiable look pour:

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

Comme vous pouvez le voir, il y a autre statment, sans aucun code (seulement 2 commentaires) qui est la situation, avec qui nous avons un problème. Ma solution est d'ajouter le code manquant:

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

Ce problème est résolu sans le mode de balises activé. Je ne détecte aucun comportement indésirable jusqu'à présent. Exemple de 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 
       }; 
      } 
     } 
    } 
});