Select2 functionality lost after submit

Question

I am using below scrip in site.js to populate bootstrap modal form:-
$(function () {
var placeholderElement = $('#modal-placeholder');
$(document).on('click', 'button[data-bs-toggle="ajax-modal"]', function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});
alert("site");
placeholderElement.on('click', '[data-bs-save="modal"]', function (event) {
event.preventDefault();
alert("save");
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = new FormData(form.get(0));

        $.ajax({ url: actionUrl, method: 'post', data: dataToSend, processData: false, contentType: false }).done(function (data) {  
            var newBody = $('.modal-body', data);  
            placeholderElement.find('.modal-body').replaceWith(newBody);  
  
            var isValid = newBody.find('[name="IsValid"]').val() === 'True';  
            if (isValid) {  
                var notificationsPlaceholder = $('#notification');  
                var notificationsUrl = notificationsPlaceholder.data('url');  
                $.get(notificationsUrl).done(function (notifications) {  
                    notificationsPlaceholder.html(notifications);  
                });  
  
                var tableElement = $('#contacts');  
                var tableUrl = tableElement.data('url');  
                $.get(tableUrl).done(function (table) {  
                    tableElement.replaceWith(table);  
                });  
  
                placeholderElement.find('.modal').modal('hide');  
            }  
        });  
    });  
})  

--------
my partialview using below scrip for Select2 functionality:-
<link href="~/lib/select2/css/select2.css" rel="stylesheet" />
<script src="~/lib/select2/js/select2.js"></script>

<script type="text/javascript">  
    $(document).ready(function () {  
        
        $('#ddlCustGroup').select2({  
            dropdownParent: $('#customer_model'),  
            placeholder: "Customer Group",  
            allowClear: true,  
            theme: "classic",  
            dropdownPosition: 'below'  
  
        });  
        $("body").on("change", "#ddlCustGroup", function () {  
  
            $("input[name=CUST_GROUP]").val($(this).find("option:selected").text());  
            $(this).valid();  
        });  
  
        //----Customer Region  
  
        $('#ddlCustomers').select2({  
            dropdownParent: $('#customer_model'),  
            placeholder: "Customer Region",  
            allowClear: true,  
            theme: "classic",  
            dropdownPosition: 'below'  
        });  
        $("body").on("change", "#ddlCustomers", function () {  
            $("input[name=CUST_REGN]").val($(this).find("option:selected").text());  
            $(this).valid();  
        });  
  
        //----Customer Sales Organization  
  
        $('#ddlSalesOrg').select2({  
            dropdownParent: $('#customer_model'),  
            placeholder: "Sales Organization",  
            allowClear: true,  
            theme: "classic",  
            dropdownPosition: 'below'  
        });  
  
        $("body").on("change", "#ddlSalesOrg", function () {  
            $("input[name=SALES_ORG]").val($(this).find("option:selected").text());  
            $(this).valid();  
        });  
  
        //----Customer Inco-Terms  
        $('#ddlInco').select2({  
            dropdownParent: $('#customer_model'),  
            placeholder: "Inco-Terms",  
            allowClear: true,  
            theme: "classic",  
            dropdownPosition: 'below'  
        });  
        $("body").on("change", "#ddlInco", function () {  
            $("input[name=INCO_TERMS]").val($(this).find("option:selected").text());  
            $(this).valid();  
        });  
  
        //----Customer Bill Currency  
        $('#ddlCurrency').select2({  
            dropdownParent: $('#customer_model'),  
            placeholder: "Billing Currency",  
            allowClear: true,  
            theme: "classic",  
            dropdownPosition: 'below'  
        });  
        $("body").on("change", "#ddlCurrency", function () {  
            $("input[name=BILL_CURCY]").val($(this).find("option:selected").text());  
            $(this).valid();  
        });  
        alert("666");  
    });  
</script>  

Answer 1

Hi @anil kumar ,

You can refer to the following code, after changing the partial view content via the Ajax, you can find the elements from the partial view and then re-attach the select2 function/event (the same with other element function/event in the partial view):

[Note] You might need to add the select2 reference in the main page, instead of in the partial view.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 2

After loading a partial, you need to recreate all the select2’s in the partial.