加载表后调用外部 JavaScript

Question

首先，如果问题已经被问到......并回答了，请接受我的道歉。我亲自查看了多个谷歌结果，但似乎答案与我的理解水平不相关或不可能实现。

在我的无知中，我已经接管了 .Net 中的 MVC WebApp 项目，我需要重新设计 UI。这是一个标准的应用程序，用户可以使用 HTML 输入查询 SQL 数据库，并在屏幕上获得一些结果以供以后操作。

问题是我的C#知识等于0，而我的JavaScript知识在0-10的范围内等于1，所以在解释的时候请把我当小孩子看待。

为了让自己更轻松，我购买了一个基于 Bootstrap Paper Design 的主题。现在，这个附带的可排序表有一些格式化 JavaScript，它最初在页面上，但我把它移了出来，所以现在它是从外部源加载的，带有 HTML <script> 标签。代码如下：

$(document).ready(function () {
    $('#tbl_Customers').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
            [6, 12, 24, -1],
            [6, 12, 24, "All"]
        ],
        responsive: true,
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search records",
        }
    });
});

当表格被硬编码时，格式化 JavaScript 就可以解决问题。我猜这是因为 JavaScript 是在表格之后加载的。不过，我可能是错的。问题是表格是根据用户的输入动态构建的。据我了解，JavaScript 函数收集用户的输入，并将其发送到 C# 控制器。然后它（从 C# 模型）接收格式化为表格的 HTML 字符串，并将其注入现有的<div>。至少这是我认为发生的事情。 JavaScript 代码如下：

   // Search function
    function Search_Customer() {
        // Take values from form fields
        p_ref_number = $('#txt_RefNumber').val();
        p_email = $('#txt_Email').val();
        p_fname = $('#txt_FirstName').val();
        p_lname = $('#txt_LastName').val();
        p_add1 = $('#txt_Address').val();
        p_pcode = $('#txt_Postcode').val();
        p_sch = $('#txt_SchoolCode').val();

        // Display alert if all form fields are empty
        if (isEmpty(p_fname) && isEmpty(p_lname) && isEmpty(p_email) && isEmpty(p_sch) && isEmpty(p_pcode) && isEmpty(p_add1) && isEmpty(p_dat) && isEmpty(p_ref_number)) {
            showAlert('Please add search criteria first');
        }
        else {
            p_Data = passSearchValuesToController();

            // Run search function in Controller
            p_URL = '@Url.Action("Get_Contact_Search_Result")';

            // Display the card with search results
            $.post(p_URL, p_Data, function (data_con) {
                $('#displayCustomerResults').html('');
                $('#displayCustomerResults').append(data_con.display);
            });
        };
    };

数据注入的<div>在这里：

<div id="displayCustomerResults" class="col-md-12"></div>

完成后，表格将显示，但没有第一个函数中的代码应应用的格式。

我可能错了，但我认为这是因为表格是在加载格式化 JavaScript 后添加到页面中的。所以，在这个前提下，我进一步假设我需要一种在添加表后加载脚本的方法。我尝试了几件事，但都失败了。我使用的一种方法是将这三行代码添加到Search_Customer() 函数的if 语句的else 部分。

var tableScript = document.createElement("script");
tableScript.setAttribute("src", "../../Assets/js/custom/search-customer-table.js");
document.body.appendChild(tableScript); 

所以，问题是如何从Search_Customer() 函数的else 部分加载外部脚本。

非常感谢任何建议。如果我错误地假设问题是由加载顺序引起的，那么请指出我正确的方向。

非常感谢。

Answer 1

首先，恭喜您提出的问题表达得非常好！

而不是动态添加实际上通过$(document).ready()的脚本，它只在页面加载时执行一次（这在调用$.post()之前很久就已经发生了），你基本上可以获取内容脚本并在append() 之后立即执行它，就像我在下面的代码中所做的那样（我无法对其进行测试）：

   // Search function
    function Search_Customer() {
        // Take values from form fields
        p_ref_number = $('#txt_RefNumber').val();
        p_email = $('#txt_Email').val();
        p_fname = $('#txt_FirstName').val();
        p_lname = $('#txt_LastName').val();
        p_add1 = $('#txt_Address').val();
        p_pcode = $('#txt_Postcode').val();
        p_sch = $('#txt_SchoolCode').val();

        // Display alert if all form fields are empty
        if (isEmpty(p_fname) && isEmpty(p_lname) && isEmpty(p_email) && isEmpty(p_sch) && isEmpty(p_pcode) && isEmpty(p_add1) && isEmpty(p_dat) && isEmpty(p_ref_number)) {
            showAlert('Please add search criteria first');
        }
        else {
            p_Data = passSearchValuesToController();

            // Run search function in Controller
            p_URL = '@Url.Action("Get_Contact_Search_Result")';

            // Display the card with search results
            $.post(p_URL, p_Data, function (data_con) {
                $('#displayCustomerResults').html('');
                $('#displayCustomerResults').append(data_con.display);

                // Added this 
                $('#displayCustomerResults')
                  .find('#tbl_Customers')
                  .DataTable(
                     {
                        "pagingType": "full_numbers",
                        "lengthMenu": [
                           [6, 12, 24, -1],
                           [6, 12, 24, "All"]
                        ],
                        responsive: true,
                        language: {
                            search: "_INPUT_",
                            searchPlaceholder: "Search records",
                        }
                   });
            });
        };
    };

我的添加做了什么：

1. 假设附加到 ID 为 displayCustomerResults 的元素的 HTML 包含一个 ID 为 tbl_Customers 的元素。
2. 尝试在附加的 HTML 中 find() 一个 ID 为 tbl_Customers 的元素，并将 .DataTable() 所做的任何事情应用于此元素。