xeditable & select2 드롭 다운 제출 후 빈 표시

Question

api 호출을 소스로 사용하면 xeditable 및 select2을 사용할 수 있으며 모든 기능은 다음을 제외하고 훌륭하게 작동합니다.

select2 드롭 다운을 제출하면 표 값이 EMPTY으로 표시되고 올바른 값으로 업데이트하려면 페이지 새로 고침이 필요합니다.

누구도 선택한 select2 드롭 다운 값으로 값을 업데이트하는 방법을 알고 있습니까?

내 HTML : 다시

$('#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; 
    }, 
}); 

- 모든 작품 (데이터베이스 업데이트, 드롭 다운리스트 채워집니다 등) 그러나 <td>가 "EMPTY"으로 업데이트되는 드롭 다운을 제출 한 후 :

여기

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

내 JS입니다 - 올바른 값을 표시하려면 페이지 새로 고침이 필요합니다.

Answer 1

해결 방법을 찾았습니다. 나는 슈퍼 펌프 야.

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

나는 그 동일한 문제에 직면했다. 에 대한 X-편집 가능한 소스 코드를 찾는

: 나는 그런 식으로 처리

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

당신이 볼 수 있듯이, 다른 한 Statment는 상황과, 어떤 코드 (만 2 개 댓글)하지 않고있다 우리에게는 문제가 있습니다. 내 해결책은 누락 된 코드를 추가하는 것입니다.

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

태그 모드를 사용하지 않으면 문제가 해결되었습니다. 나는 지금까지 원치 않는 행동을 감지하지 못합니다. 예제 코드 :

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