select2 jquery plugin not working after ajax calling for HTML content change

Question

i did called ajax function for html div change, In that div change content have 'select2' jquery class to select box. After ajax loaded that select2 jquery plugin not working properly.

This my js:

$('body').on('click', '.portlet > a.reloadcontent', function(e) {
   $.ajax({
      type: "GET",
      cache: false,
      url: url,
      dataType: "html",
      success: function(res) {
          $('#colpart').find('.portlet-body').html(res);
      }
   });
});

This my HTML:

<div id="#colpart">
    <a href="#" data-url="columnspage.html" class="reloadcontent" data-load="true">Columns</a>
    <div class="portlet-body"></div>
</div>

columnspage.html

<select class="form-control select2me" data-placeholder="">
     <option value=""></option>
     <option value="1">Column 1</option>
 </select>

select2me class for select2 jquery plugin.

Answer 1

You need to initialize select after success callback, because your drop down is added dynamically in DOM,

success:function(res){
   $('#colpart').find('.portlet-body').html(res);
   // reinit your plugin something like the below code.
   $('.select2me').select2();
}