Заполните поле ввода Select2 Tag с данными из запроса AJAX, используя библиотеку jQuery, редактируемую X

Question

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

Я создаю приложение управления проектами, которое будет иметь данные задачи проекта, показанные во всплывающем окне 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, чтобы поэкспериментировать с этим вопросом StackOverflow. У меня нет тысяч строк кода из моего фактического приложения, однако у меня есть большинство библиотек 3-й части, которые используются на странице. Причина в том, чтобы убедиться, что ни один из них не мешает результатам.

JSFiddle Демо:http://jsfiddle.net/jasondavis/Lusbqfhs/

Цель:

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

Проблема:

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

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

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

Он также содержит ссылки на документацию Select2 и утверждает, что все параметры в выбор2 можно установить и использовать, а также здесь находится - 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-Редактирование использует ВЫБ.2 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 }; 
      } 
     },