0

I am using Bootstrap 4 and Select2 jQuery plugin in my webpage. It is working perfectly in my website. But when calling an another page contenting Select2 class of select input is not working.

Plugin Initiated at main page as -

<script type="text/javascript" language="javascript">
$(function () {
    //Initialize Select2 Elements
    $('.select2').select2()
    $('.select2-selection').css('border','0px')
    $('.select2-container').children().css('border','0px')

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })
})
</script>

My Ajax page contain below input elements -

<select class="select2" style="width: 100%;" id="emp" name="emp">
<option value="">-- Select employee --</option>
<option value="E001">Employee 1</option>
<option value="E002">Employee 2</option>
</select>

I am unable to figure out the issue why it not working on Ajax Called page. Anybody please give answer? Thanks in advance.

Nimesh
  • 104
  • 8
  • check this one related your question https://stackoverflow.com/questions/28674228/select2-jquery-plugin-not-working-after-ajax-calling-for-html-content-change – Maulik Oct 28 '22 at 06:49
  • Thanks for the information. I have tried your reference but still not working for my case. Can you please post an answer with code? Thanks in advance! – Nimesh Oct 28 '22 at 13:48

1 Answers1

2

In my opinion, you can call the select2 plugin function again after ajax called, I think. Try it, maybe the mistake fixed. Hope it helps. thanks

RedGhost
  • 122
  • 5
  • Thank you my friend. It works now. I called / initiated the select2 plugin along with the Ajax call as you suggested and got it working perfectly!!! – Nimesh Oct 28 '22 at 14:37