附加表在生产中不起作用答案

【问题标题】：Appending a Table not Working in Production附加表在生产中不起作用
【发布时间】：2017-08-07 15:03:25
【问题描述】：

我正在使用 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 个错误。

混合内容：页面通过 HTTPS 加载，但请求的样式表不安全 http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&subset=latin-ext,latin。此请求已被阻止；内容必须通过 HTTPS 提供

1:2639 未捕获的类型错误：row.app 不是函数
在 Object.success (1:2639)
在 j (jquery.min.js:2)
在 Object.fireWith [as resolveWith] (jquery.min.js:2)
在 x (jquery.min.js:4)
在 XMLHttpRequest.b (jquery.min.js:4)

【问题讨论】：

这很可能是 AJAX 问题。你检查过控制台的错误吗？
在生产环境中，您通常通过查看日志文件来进行调试，如果您使用某些框架，那么您已经有了日志。
@RoryMcCrossan - 感谢您的提示。我不认为生产版本的控制台会向外界显示错误。我已经用控制台捕获的内容更新了问题。
@Keloo - 谢谢，我会尝试查找日志。
这两个错误都应该被修复，但是第二个错误是你的问题的原因。但是，由于您没有提供足够的信息，我们无法真正帮助您解决问题。

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

鉴于错误消息，您似乎在代码中的某处输入了row.app 的拼写错误；可能你在某个地方不小心撞到了 return 并将线路一分为二。

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

【讨论】：