javascript - 附加一个在生产中不起作用的表

Question

我正在使用 Bootstrap 创建一个网站，其中一个表的行已删除，并在按下按钮后重新填充了新数据。它在 Visual Studio 的 Google Chrome 设置中的测试环境中工作，但在实时服务器上部署后，该表将留空，并且在从 Web 访问时不会附加。 AJAX 调用正在运行，因为表外的字段正在更新，所以我认为这可能是测试 Chrome 和实时 Chrome 之间的 Java 脚本问题。这是我的第一个网站，所以我什至不确定如何测试一个特定的实时应用程序。有谁知道是什么原因造成的，或者有人能指出我正确的方向吗？提前致谢!

表格:

<div class="row">
    <table id="dt_products" class="table table-striped">
        <thead>
            <tr>
                <th class="text-center">Product ID</th>
                <th class="text-center">Price</th>
                <th class="text-center">Margin</th>
            </tr>
        </thead>
        <tbody>
            @if (Model.Products.Any())
            {
                for (var i = 0; i < 12; i++)
                {
                    <tr>
                        <td class="text-center">@Html.DisplayFor(m => m.Products[i].ProductID)</td>
                        <td class="text-center">@Html.TextBoxFor(m => m.Products[i].Price, "{0:c}")</td>
                        <td class="text-center">@Html.TextBoxFor(m => m.Products[i].Margin, "{0:c}")</td>
                    </tr>
                }
            }
        </tbody>
    </table>
</div>

AJAX 调用:

$(function () {
    $("#ProductDate").change(function () {
        var $productValue = $("#ProductDate").val(),
            $startDate = $(".productReleaseDate"),
            $pID = { iD: $productValue };
            $('#dt_products tbody tr').remove();
            $.ajax({
                type: "GET",
                url: '@Url.Action("GetProducts", "Sales")',
                data: $pID,
                success: function (data) {
                    //Fill data
                    var pattern = /Date\(([^)]+)\)/;
                    var results = pattern.exec(data[0].ProductDate);
                    var $dt = new Date(parseFloat(results[1]));
                    $startDate.text(($dt.getMonth() + 1) + "/" + $dt.getDate() + "/" + $dt.getFullYear());
                    for (var i = 0; i < data.length; i++) {
                        var row = $('<tr></tr>');

                        idCell = $('<td class="text-center"></td>').append(data[i].ProductID);
                        row.append(idCell);

                        idCell = $('<td class="text-center"></td>').append(Number(data[i].Price).toFixed(2));
                        row.append(idCell);

                        idCell = $('<td class="text-center"></td>').append(data[i].Margin);
                        row.append(idCell);

                        $('#dt_products tbody').append(row);
                    }
                }
            });
    }).change();
});

编辑:使用生产版本中的控制台错误，发现了 2 个错误。

Mixed Content: The page was loaded over HTTPS, but requested an insecure stylesheet http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&subset=latin-ext,latin. This request has been blocked; the content must be served over HTTPS

1:2639 Uncaught TypeError: row.app is not a function
at Object.success (1:2639)
at j (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at x (jquery.min.js:4)
at XMLHttpRequest.b (jquery.min.js:4)

Answer 1

根据错误消息，您似乎在代码中的某处输入了 row.app 错字；可能你在某处不小心按下了返回键并将行一分为二。

我建议在您的项目中为 row.app 进行全局查找，以找到错误的确切位置。