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.

Solution

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();
}

Comments

[user16713716]

stackoverflow.com/questions/28674228/… stackoverflow.com/questions/28674228/… stackoverflow.com/questions/28674228/…

[Rohan Kumar]

Try to add your element in your page directly and call it (without using ajax) and check, don't forget to check your console for errors.

[Muthu]

It shows "uncaught exception: query function not defined for Select2 s2id_autogen1" in console

[Muthu]

i need to call only by ajax function.

[Rohan Kumar]

Ok, once you get called it from static page then you can change it with ajax also. Also read this stackoverflow.com/questions/14483348/…

[Muthu]

i have solved it by remove class name to id name. thanks

[TarangP]

really helpful !