Как инициализировать select2 динамически

я вставляю строки понятий (с элементами выбора и ввода текста) в мой DOM через AJAX. И я хочу инициализировать тех, кто выбирает select2: но я не знаю, как это сделать.

  • Я должен написать JavaScript в каждой строке? (Вставьте html и JS через AJAX)

Я получаю это в каждом запросе AJAX:

<select id="concept0"> 
    <option value="Test"> Test </option>
    <option value="Test2"> Test 2 </option>    
</select>
<script> $("#concept0").select2(); </script>

но я думаю, что это неправильная идея вернуть javascript с HTML в моем ответе AJAX. Есть и другие альтернатива?

спасибо и извините, если мой вопрос немного глупый...

6
ajax javascript jquery jquery-select2 php

2 ответов

Я бы построил поток следующим образом:

  • группа частичные выбирает, чтобы уменьшить количество запросов Ajax
  • добавьте маркеры в частичный HTML с помощью " data -"
  • получить частичный html с AJAX GET;
  • элементы инициализации;
  • [необязательно] отсоединить целевой родительский элемент-причины производительности;
  • добавить элементы к цели;
  • [необязательно] установите цели элемент;
  • инициализации виджетов.

Я сделал моделирование здесь:http://jsbin.com/jotitu/edit?js, выход

ниже небольшое объяснение:

Итак, скажем, у вас есть следующий HTML:

<div id="concept-table-container">
 <table>
   <tr>
     <th>
        No.
     </th>
     <th>
        Name.
     </th>
     <th>
        Option.
     </th>
   </tr>
   <tr>
     <td>1</td>
     <td>abc</td>
     <td></td>
   </tr>
   <tr>
     <td>2</td>
     <td>dce</td>
     <td></td>
   </tr>
   <tr>
     <td>3</td>
     <td>fgh</td>
     <td></td>
   </tr>
 </table>
</div>

группа частичные выбирает, чтобы уменьшить количество запросов Ajax и добавить маркеры в частичный HTML с " data -"

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

<select data-widget="select2" data-row-idx="0"> 
    <option value="Test"> Test </option>
    <option value="Test2"> Test 2 </option>    
</select>
<select data-widget="select2" data-row-idx="1"> 
    <option value="Test"> Test </option>
    <option value="Test2"> Test 2 </option>    
</select>
<select data-widget="select2" data-row-idx="2"> 
    <option value="Test"> Test </option>
    <option value="Test2"> Test 2 </option>    
</select>

получить частичный html с AJAX GET

Я не буду вдаваться в подробности, достаточно сказать, что:

$.get(conceptPartialUrl, successCallback);

элементы инициализации;

var successCallback = function(data){
  var $fragmentEl = initEls(data);
  // Optionally before appending the selects detach the container;
  appendElements($fragmentEl, $containerEl);
  // Initialize the widgets.
  initSelect2Widgets();
};


var initEls = function(data){
  // Create DOM elements - JQuery Way
  var $fragmentEl = $(data);
  // Return the reference
  return $fragmentEl;
};

добавить элементы к цели;

var appendElements = function($fragmentEl, $containerEl){
   var $rows = $containerEl.find('tr');
   $fragmentEl.each(function(){     
      var $el = $(this);


      // some matching - you 
      var idx = $el.data('row-idx');

      // that plus 1 is to skip the header        
      // find the row         
      var $row = $rows.eq(idx+1);         
      // find the cell, empty it and append the element  
      $row .find('td').last().text('').append($el);
   });
};

инициализируем виджеты

var initSelect2Widgets = function(){
  $containerEl.find('[data-widget="select2"]').select2();
};
3

у меня есть другой способ обойти это:

Как вы сказали в своем комментарии, что вы отправляете счетчик в каждом запросе ajax (я надеюсь, что вы используете этот счетчик для генерации id select), вы можете сохранить это в некотором элементе или переменной js перед запросом ajax. Так что при каждом запросе ajax у вас есть уникальное значение счетчика.

чем вы можете инициализировать select2, используя:

$(document).ajaxComplete(function() {
    $(document).find('your-unique-counter-select-id').select2();
});
1