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

Question

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.

Answer 1

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.