Not sure if this is one of the work around's that you have already thought of or how this might affect the performance in your application. But Initializing each .team
element individually works.
I'm going to look into a little more to see if I can find a better way to do it, but here is the current solution:
$('a.team').each(function(){
$(this).editable({
ajaxOptions: {
dataType: 'json',
type: 'POST'
},
emptytext: 'TBD',
placement: 'bottom',
success: function (response, newValue) {
return editableResponse(response, newValue);
},
select2: {
allowClear: true,
placeholder: 'Select a team',
width: '200px',
id: function (item) {
return item.id;
},
ajax: {
dataType: 'json',
results: function (data, page) {
return { results: data };
}
},
}
});
});
http://jsfiddle.net/trevordowdle/k9b3d/11/
A better work around would be to initialize editable
without the source data attribute:
<a href="#" class="team" data-type="select2" data-pk="1" data-getSource="/list" data-value="100" data-text="Team A" data-name="home" data-title="Update home team" data-url="/post">Team A</a>
And then add it after initialization for every .team
by setting the source via option
:
$('a.team').each(function(){
$(this).editable('option','source',$(this).data('getSource'));
});
But unfortunately it does not work when setting the source
this way.. The best solution I could find is the one above.
Looks like there are a couple of bugs with X-editable here:
When initializing multiple select editables with different sources
. And setting the source with the option
method.