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.

stackoverflow.com/questions/28674228/… stackoverflow.com/questions/28674228/… stackoverflow.com/questions/28674228/… — user16713716
– user16713716, Commented Aug 20, 2021 at 12:16

Rohan Kumar · Accepted Answer · 2015-02-23 12:52:37Z

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, 2015 at 12:52

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rohan Kumar Over a year ago

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 Over a year ago

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

Muthu Over a year ago

i need to call only by ajax function.

Rohan Kumar Over a year ago

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 Over a year ago

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

|

klawrow · Accepted Answer · 2018-07-24 21:38:11Z

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, 2018 at 21:38

klawrow

13 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related