C# .NET EF Core 3, How to run a JS/jQuery script after a partial has been loaded via AJAX?

Question

The scenario is:

I have a view that has search criteria and a search button. It can search for Accounts, policies, and other entities. When you choose criteria and what entities you want to search for, you click SEARCH button and that action does POST to a method which then returns a partial view that replaces a div on the view:

<form id="searchForm" asp-action="Search" data-ajax="true" data-ajax-method="POST" data-ajax-update="#searchResults" data-ajax-mode="replace">

Now, the partial views contain DataTables which I need to implement pagination for, in JS. I need some JS code to be executed when the partial has been fully loaded, and this code will be different for different partials (as search will load different ones depending on what search criteria/entity you have selected)

This is the example code that should run as the partial is loaded:

var colDefs = [
            { orderable: false, targets: [11] }
        ];

        var columns = [
            { data: "CustomerId", name: "CustomerId" },
            { data: "Name", name: "Name" },
            { data: "Type", name: "Type" },
            { data: "BranchOrFirstName", name: "BranchOrFirstName" },
            { data: "Address", name: "Address" },
            { data: "PostCode", name: "PostCode" },
            { data: "Telephone", name: "Telephone" },
            { data: "Email", name: "Email" },
            { data: "CustomerSince", name: "CustomerSince" },
            { data: "NoOfPolicies", name: "NoOfPolicies" },
            {
                data: null,
                render: function(data, type, full, meta) {
                    return '<div class="container"><a class="btn btn-sm btn-default" href="/customers/edit/' + full.CustomerId +'">@Html.Resource("Results")</button></div>';
                }
            }
        ];

        if (typeof createDataTable == "function") {

            var ajaxData = {
                AccountPostCode : "@Model.CustomerSearchCriteria.AccountPostCode",
                AccountSurname : "@Model.CustomerSearchCriteria.AccountSurname",
                AccountTelephone : "@Model.CustomerSearchCriteria.AccountTelephone",
                AccountEmail : "@Model.CustomerSearchCriteria.AccountEmail"
            }

            createDataTable("#customerSearchResultsTable", "@Url.Action("GetCustomerResults")", colDefs, columns, ajaxData);
            }

        });

Is this even possible or should I start looking into implementing pagination server side?

Answer 1

If I understood it correctly you are struggling to run JS Code once the Partial View is rendered. I think this link will help you trigger event once rendering is complete jQuery ready event not fired on partial page load

If you want to trigger and event (like click event) from partial view once its re loaded you may face some issues. To solve this I used following piece of code.

// attach An event or function you want to fire with **body element**
$("body").on("click", "#btnSubmitSearchCriteria", function (event) {

    // Whatever JS code you want to excute

});

this will allow you to trigger a JS event even after the PartialView is reloaded.