Select2 и обратный вызов initSelection

При загрузке страницы я пытаюсь использовать initSelection для выбора ID 60 (заданное значение поля ввода). Кажется, я не могу заставить его работать нормально.

Сценарии PHP отлично работают и возвращают правильные значения, но как я могу заставить JS правильно выполнить обратный вызов?

JavaScript:

$(document).ready(function() {
    $('#editAlbumArtistId').select2({
            placeholder: 'Search names',
            ajax: {
                url: "/jQueryScripts/jQuerySelectListArtists.php",
                dataType: 'json',
                quietMillis: 100,
                data: function (term, page) {
                    return {
                        term: term, //search term
                        page_limit: 10 // page size
                    };
                },
                results: function (data, page) {
                    return {results: data.results};
                }

            },
            initSelection: function(element, callback) {

            var id = $(element).val();
            if(id !== "") {
                $.ajax("/jQueryScripts/jQuerySelectListArtists.php", {
                    data: {id: id},
                    dataType: "json"
                }).done(function(data) {
                    callback(data);
                });
            }
        }
    });
});

HTML:

<p>
    <input type='hidden' value="60" data-init-text='Search names' name='editAlbumArtistId' id='editAlbumArtistId' style="width:180px;"/>
</p>

Каждый раз, когда я обновляю страницу, я вижу, что PHP script выполняется и возвращает правильный идентификатор и текст. Однако поле не обновляется, и я серьезно пробовал все, что мог придумать.

Я использую Select2 3.4.3.

Любая помощь будет принята с благодарностью.

Ответы

Ответ 1

Наконец решил! Я полагал, что select2 не хотел массив, так как это одно значение, поэтому я выбрал первый элемент массива data.results.

callback(data.results[0]);

И если вы установили несколько: true, просто примите весь массив результатов;

callback(data.results);

Ответ 2

Вы также можете использовать это для меньшего кода:

    initSelection: function(element, callback) {
        return $.getJSON("/jQueryScripts/jQuerySelectListArtists.php?id=" + element.val(), null, function(data) {
            return callback(data[0]);
        });
    }

Я видел этот пример в вики Select2, но мне приходилось иметь дело с обратным вызовом (данными) и обратным вызовом (данные [0]), как и вы.

Ответ 3

Помните: свойства - это строка.

Посмотрите формат json:

{ 'id': 1, 'text': 'work' }

{ id: 1, text: 'dont work' }

С# ASP.NET MVC Code:

@Html.HiddenFor(m => m.uniqueCode)

Код Javascript:

$("#ddlCustomer").select2({
            allowClear: true,
            ajax: {                    
                type: 'GET',
                url: '/Customer/jsonLoadSelect2',
                data: function (params) {
                    return {
                        uniqueCode: params.term
                    };
                },
                traditional: true,
                dataType: 'json',
                processResults: function (data) {
                    $("#ddlCustomer").empty();
                    $.each(data, function (index, value) {
                        $("#ddlddlCustomer").append('<option value=' + value.id + '>' + value.text + '</option>')
                    });
                    return {
                        results: data
                    };                        
                }
            },
            escapeMarkup: function (markup) { return markup; }, 
            minimumInputLength: 0,
            cache: true,
            initSelection: function(element, callback) {
                var id = $(element).val();
                if (id !== "") {
                    $.ajax("/Customer/jsonLoadSelect2/" + id, {
                        dataType: "json"
                    }).done(function (data) { callback({ 'id': id, 'text': $('#uniqueCode').val() }) });
                }
            }
        });