I have the following which binds multiple anchor elements with the class 'team' to be x-editable select2 inputs. Each a.team has a different data-source (differing on the ID passed to the Web service so that the applicable list of teams is returned), but unfortunately, once the first a.team is bound, that data-source URL is used for all subsequent a.team inputs on the page (and therefore, the wrong list of teams is bound to each subsequent x-editable select2 input).
Is it possible to "reset" the data property of the select2 so that it respects each data-source for each a.team element? Or any other solutions?
$('a.team').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 };
}
},
}
});
Multiple a.team anchors on a page like the following:
<a href="#" class="ur-team label label-inverse" data-type="select2" data-pk="@match.Id" data-source="@Url.Action("GetTeams", "Teams", new { scheduleId = match.ScheduleId })" data-value="@match.AwayTeamId" data-text="@match.AwayTeam" data-name="away" data-title="Update away team" data-url="@Url.Action("UpdateTeam", "AdminMatches")">@match.AwayTeam</a>
Note: I have verified that only the ID from the first x-editable select2 input is used for all other select2 AJAX calls. In other words, it is not a data caching issue (it's a "once its bound, all other data-source references are ignored" issue).
UPDATE: Here's a quick and dirty fiddle that replicates the issue: http://jsfiddle.net/ovalsquare/k9b3d/8/ . Note that both end up being bound to the list2 instead of list and then list2.