Select2 Initialization after Modal Load Using Ajax
Hi, We're loading our modal contents via Ajax. And in the body of modal content, there lies a select element that we want to initialize with select2.
We tried applying data-control="select"2 attribute and also tried data-dropdown-parent="#modal_id"
but select2 is not getting initialized.
We even tried to initialize select2 using jQuery with defining parent for select2 but same issue.
$("#select_id").select2({
dropdownParent: "#model_id"
})
we are calling select2 initialization in the "shown.bs.modal" event of the bootstrap modal
if select2 lies in the DOM before loading DOM, it initializes but not after opening modal content via Ajax.
kindly guide us on how to initialize select2 after modal content is loaded over Ajax.
Replies (3)
Hi,
You will need to initialize the newly populated components via Ajax request on Ajax response received using KTComponents.init().
For more info please check Metronic JS Docs.
Regards,
Sean
do I need to add data-control="select"2 and data-dropdown-parent="#modal_id" as well?
Hi,
As following the documentation you will need to add those required attributes and once the HTML code is populated during your ajax request/response you just need to call the global init method to initialize it.
Regard.
