Multiple XEditable Select2 elements with different dynamically loaded lists: only the first URL data-source is bound

Viewed 8097

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.

1 Answers
Related