I try to build Xeditable Select2 Ajax Multiple Select Options but I got following error in console.
My Select2 version is 4.0.3
My Xeditable version is 1.5.1
Error:
jQuery.Deferred exception: Cannot read property 'slice' of undefined TypeError: Cannot read property 'slice' of undefined
at d.a.removePlaceholder (http://www.aa.lk/js/select2.min.js:2:10575)
at d.j [as removePlaceholder] (http://www.aa.lk/js/select2.min.js:1:4456)
at d.a.append (http://www.aa.lk/js/select2.min.js:2:10380)
at d.j [as append] (http://www.aa.lk/js/select2.min.js:1:4456)
at e. (http://www.aa.lk/js/select2.min.js:1:9378)
at e.d.invoke (http://www.aa.lk/js/select2.min.js:1:5094)
at e.d.trigger (http://www.aa.lk/js/select2.min.js:1:4913)
at e.trigger (http://www.aa.lk/js/select2.min.js:2:29479)
at http://www.aa.lk/js/select2.min.js:2:27951
at Object.f.transport.d.status.0.d.status.e.trigger.message (http://www.aa.lk/js/select2.min.js:2:4227) undefined
Javascript Code:
$.fn.editable.defaults.mode = 'inline';
$('#country').editable({
select2: {
placeholder: 'Select a Requester',
multiple: true,
id: function (item) {
return item.id;
},
ajax: {
url: '/php/friendtag.php',
dataType: 'json',
data: function (term, page) {
return { query: term };
},
results: function (data, page) {
return { results: data };
}
},
templateResult: function (item) {
return item.text;
},
templateSelection : function (item) {
return item.text;
},
current: function (item, callback) {
return $.get('/php/friendtag.php', { query: item.val() }, function (data) {
callback(data);
}, 'json'); //added dataType
}
},
tpl:'',
emptytext: 'Empty Friends'
});
HTML Code:
How to solve this problem?
This is Ajax Result:
[{"id":"5","text":"dvd"},{"id":"2","text":"aa"},{"id":"3","text":"bb"},{"id":"6","text":"dd"}]