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.

https://stackoverflow.com/questions/28674228/select2-jquery-plugin-not-working-after-ajax-calling-for-html-content-change https://stackoverflow.com/questions/28674228/select2-jquery-plugin-not-working-after-ajax-calling-for-html-content-change https://stackoverflow.com/questions/28674228/select2-jquery-plugin-not-working-after-ajax-calling-for-html-content-change — user16713716, Aug 20 '21 at 12:16

score 8 · Accepted Answer · answered Feb 23 '15 at 12:52

8

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

answered Feb 23 '15 at 12:52

Rohan Kumar

40,431
11
76
106

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. – Rohan Kumar Feb 23 '15 at 12:56
It shows "uncaught exception: query function not defined for Select2 s2id_autogen1" in console – Muthu Feb 23 '15 at 13:00
i need to call only by ajax function. – Muthu Feb 23 '15 at 13:04
Ok, once you get called it from static page then you can change it with ajax also. Also read this http://stackoverflow.com/questions/14483348/query-function-not-defined-for-select2-undefined-error – Rohan Kumar Feb 23 '15 at 13:34
i have solved it by remove class name to id name. thanks – Muthu Feb 24 '15 at 05:09
really helpful ! – TarangP Jan 23 '20 at 06:15

score 0 · Answer 2 · answered Jul 24 '18 at 21:38

0

In the ajax success function you need to initialize the select.

Example:

    success: function (html) {
        // your code here
        $(".select2").select2(); // init the select
    }

answered Jul 24 '18 at 21:38

klawrow

1
3

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

2 Answers2

Linked

Related