Несколько элементов XEditable Select2 с различными динамически загружаемыми списками: привязан только первый источник данных URL

У меня есть следующее, которое связывает несколько элементов привязки с классом «команда», чтобы они были редактируемыми x-редактируемыми входами select2. У каждой команды a.team есть свой источник данных (отличающийся идентификатором, переданным веб-службе, чтобы возвращался применимый список команд), но, к сожалению, после привязки первой команды a.team используется этот URL-адрес источника данных. для всех последующих входов a.team на странице (и, следовательно, неправильный список команд привязан к каждому последующему x-редактируемому входу select2).

Можно ли «сбросить» свойство данных select2, чтобы оно учитывало каждый источник данных для каждого элемента a.team? Или какие-то другие решения?

$('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 };
            }
        },
    }
});

Несколько якорей a.team на странице, например:

  <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>

Примечание. Я проверил, что только идентификатор из первого x-редактируемого ввода select2 используется для всех остальных вызовов select2 AJAX. Другими словами, это не проблема кэширования данных (это проблема «после привязки все другие ссылки на источники данных игнорируются»).

ОБНОВЛЕНИЕ: Вот быстрая и грязная скрипка, которая воспроизводит проблему: http://jsfiddle.net/ovalsquare/k9b3d/8/ . Обратите внимание, что оба в конечном итоге привязаны к списку2, а не к списку, а затем к списку2.


jquery jquery-select2 x-editable
person Ted    schedule 20.12.2013    source источник
comment
Можно ли продемонстрировать эту проблему в Fiddle?   -  person Trevor    schedule 27.12.2013
comment
Какая концепция ;-) Быстро соберите один, который воспроизводит проблему (см. обновление). Я могу придумать несколько обходных путей, но ни один из них не является привлекательным, когда может быть что-то более простое (т.е. я упускаю что-то очевидное).   -  person Ted    schedule 27.12.2013

Ответы (1)


arrow_upward
8
arrow_downward

Не уверен, что это один из обходных путей, о котором вы уже подумали, или как это может повлиять на производительность вашего приложения. Но инициализация каждого элемента .team по отдельности работает.

Я собираюсь изучить немного больше, чтобы увидеть, смогу ли я найти лучший способ сделать это, но вот текущее решение:

$('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/

Лучшим обходным решением было бы инициализировать editable без атрибута исходных данных:

<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>

А затем добавить его после инициализации для каждого .team, установив источник через option:

$('a.team').each(function(){
    $(this).editable('option','source',$(this).data('getSource'));
});

Но, к сожалению, это не работает при установке source таким образом. Лучшее решение, которое я смог найти, это то, что указано выше.

Похоже, здесь есть пара ошибок с X-editable:

При инициализации нескольких редактируемых объектов выбора с разными sources. И установка источника методом option.

person Trevor    schedule 27.12.2013
comment
Спасибо, Тревор, особенно за праздники. Ваш лучший обходной путь был одним из вариантов, который я рассматривал, и ваш эксперимент показал, что мой лучший другой вариант тоже не сработает. Я буду работать с решением .each и опубликую его в x-редактируемых проблемах. Еще раз спасибо за ваш вклад. - person Ted; 29.12.2013