Заполните поле ввода тега Select2 данными из запроса AJAX с помощью библиотеки jQuery, редактируемой в X-формате.

Question

Я остро нуждаюсь в некоторой помощи от экспертов JavaScript. Последние 7 часов я потратил на попытки сотен комбинаций кода, чтобы получить базовое поле ввода выбора тегов для работы с библиотекой. x-editable а также select2,

Я создаю приложение Project Management, в котором данные о задачах проекта отображаются во всплывающем окне Modal Div. В модальной задаче все поля задач будут доступны для редактирования с возможностью оперативного редактирования на месте с использованием AJAX.

Я использую:

• JQuery редактировать на месте библиотеки под названием X-Editable - http://vitalets.github.io/x-editable/
• Выпадающая выборка библиотеки jQuery Select2 - https://select2.github.io/
• JQuery MockAjax библиотека, позволяющая моделировать ответы на запросы AJAX. https://github.com/jakerella/jquery-mockjax

Я настроил базовую демонстрацию JSFiddle, чтобы поэкспериментировать только с этим вопросом Stackru. У меня нет тысяч строк кода из моего реального приложения, однако у меня есть большинство библиотек третьей части, которые используются на странице. Причина в том, чтобы убедиться, что ни один из них не влияет на результаты.

Демонстрация JSFiddle: http://jsfiddle.net/jasondavis/Lusbqfhs/

Цель:

• Настроить X-editable а также Select2 в поле, чтобы позволить пользователям выбирать и вводить в теги для задачи проекта.
• Доступна загрузка Tag записи с внутреннего сервера, который будет возвращать ответ JSON с Tag ID number а также Tag Name и использовать эти данные для заполнения Selection2 поле ввода, чтобы позволить пользователю выбрать несколько тегов.
• Разрешите пользователю также вводить новый тег, и он будет публиковать и сохранять новые теги в серверной части!
• Когда выбраны теги и нажата кнопка сохранения, список выбранных тегов с идентификатором будет сохранен обратно в базу данных.

Проблемы:

Теперь я попробовал сотни вариантов вариантов и кодовых комбинаций из моих исследований за последние 7 часов. Кажется, я не могу заставить эту базовую функциональность работать, и большинство найденных примеров, похоже, больше не работают правильно!

На этой демонстрационной странице для библиотеки x-editable http://vitalets.github.io/x-editable/demo-plain.html?c=inline в нижней части примеров в таблице, где написано Select2 (режим тегов), что мне нужна функциональность! Мне просто нужно загрузить доступные теги из запроса AJAX, и все документы утверждают, что он может сделать это без проблем!

Это раздел документации от X-Editable за Select2 поля - http://vitalets.github.io/x-editable/docs.html

Это также ссылки на Select2 документация и утверждает, что все параметры в Select2 могут быть установлены и использованы, а также расположены здесь - https://select2.github.io/options.html

я использую MockAjax библиотека для имитации ответа AJAX на страницах типа JSFiddle для тестирования. В моей демонстрации JSFiddle здесь http://jsfiddle.net/jasondavis/Lusbqfhs/ меня есть 2 настроенных ответа MockAjax....

$.mockjax({
    url: '/getTaskTags',
    responseTime: 400,
    response: function(settings) {
        this.responseText = [
            {id: 1, text: 'user1'},
            {id: 2, text: 'user2'},
            {id: 3, text: 'user3'},
            {id: 4, text: 'user4'},
            {id: 5, text: 'user5'},
            {id: 6, text: 'user6'}
        ];
    }
});

$.mockjax({
    url: '/getTaskTagById',
    responseTime: 400,
    response: function(settings) {
        this.responseText = [
            {id: 1, text: 'user1'},
            {id: 2, text: 'user2'},
            {id: 3, text: 'user3'},
            {id: 4, text: 'user4'},
            {id: 5, text: 'user5'},
            {id: 6, text: 'user6'}
        ];
    }
});

Они оба должны возвращать строку Mock JSON для моего списка выбора, который будет заполнен.

Вот мой код для демонстрации...

$(function(){

    //remote source (advanced)
    $('#task-tags').editable({
        mode: 'inline',
        select2: {
            width: '192px',
            placeholder: 'Select Country',
            allowClear: true,
            //minimumInputLength: 1,
            id: function (item) {
                return item.CountryId;
            },
            // Get list of Tags from AJAX request
            ajax: {
                url: '/getTaskTags',
                type: 'post',
                dataType: 'json',
                data: function (term, page) {
                    return { query: term };
                },
                results: function (data, page) {
                    return { results: data };
                }
            },
            formatResult: function (item) {
                return item.TagName;
            },
            formatSelection: function (item) {
                return item.TagName;
            },
            initSelection: function (element, callback) {
                return $.get('/getTaskTagById', { 
                    query: element.val()
                }, function (data) {
                    callback(data);
                });
            } 
        } 
    });


});

Теперь в демоверсии, когда вы щелкаете по полю, чтобы выбрать Теги, он просто "загружается" и никогда не получает результат. Глядя на консоль, кажется, что мой запрос MockAjax не работает, однако работает второй, поэтому я не уверен, что не так с моим запросом AJAX?

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

Спасибо

Answer 1

X-Editable использует Select2 3.5.2, который не использует jQuery.ajax() напрямую. Он имеет свою собственную функцию ajax и вызывает jQuery.ajax() следующим образом:

transport = options.transport || $.fn.select2.ajaxDefaults.transport
...
handler = transport.call(self, params);

Вот почему $.mockjax({url: '/getTaskTags'... не работает.

Чтобы это работало, вам нужно создать собственную транспортную функцию, что-то вроде этого:

var transport = function (queryParams) {
    return $.ajax(queryParams);
};

и установите опцию транспорта:

   ajax: {
            url: '/getTaskTags',
=> transport: transport,
            type: 'post',
            dataType: 'json',
            data: function (term, page) {
                return { query: term };
            },
            results: function (data, page) {
                return { results: data };
            }
        },