Question

我有一个需要做两件事的javascript： 1.发送要在数据库中更新的数据 2.在show模式下更新我的html表单位置。 3.更新我的表格行以反映更新的数据。

我的javascript只做1和2：

$(".form-commands .save").live("click", function () {
    var f = $(".form-edit");
    var sf = f.serialize();
    $.post(this.href,
        sf,
        function (response) {
            f.html(response);
        });
    // I need to do something here to update the html table row...
    return false;
});

我认为解决方案是调用另一个只渲染表行元素的操作。我怎么能这样做？

-

表格行的创建方式如下：

<tr id="h62">
  <td>Ford</td>
  <td>Focus</td>
</tr>

其中62是此记录的“id”。

工作代码，但丑陋：

$(".form-commands .save").live("click", function () {
    var f = $(".form-edit");
    var sf = f.serialize();
    var handle = $(".form-edit #Handle")[0].value;
    var itemLink = this.attributes["edititem"].value;
    var row = $("#grid #h" + handle);

    $.post(this.href,
        sf,
        function (response) {
            $("#form-edit").html(response);
            $.get(itemLink,
                sf,
                function (response) {
                    row.replaceWith(response);
                });
        });

    return false;
});

Answer 1

你需要做这样的事情：

$(".form-commands .save").live("click", function (evt) {
    //Capture the jQuery event object and call preventDefault() to stop the default click action
    evt.preventDefault();
    var f = $(".form-edit");
    var sf = f.serialize();
    $.post(this.href,
        sf,
        function (response) {
            f.html(response);
        });
    //UPDATE THE ROWS
    $('#h62 td:eq(0)').text(newVehicleMakeName);
    $('#h62 td:eq(1)').text(newVehicleModelName);
});

我不确定您的代码中车辆数据的来源。如果您从控制器中将其传回，则需要将此行移至成功回调中。

此外，您通常应该永远不会返回false，您应该将jQuery事件捕获为param并调用preventDefault（）。如果您的单击处理程序使用return false来阻止浏览器导航，则会打开解释器无法访问return语句并且浏览器将继续执行锚标记的默认行为的可能性。这是造成问题的原因，而不是因为您使用了点击vs提交。使用event.preventDefault（）的好处是你可以将它添加为处理程序中的第一行，从而保证锚点的默认行为不会触发。

Answer 2

好吧，我只是重新加载页面或调用ajax例程（以适用者为准）重新加载数据，没有简单的方法来执行此操作。事实上我并不知道你使用的方法（f.html（响应）），我仍然对这个解决方案持怀疑态度:)）

好吧，如果你真的只想更新那一行：

1）您需要知道在javascript代码中知道更新行的ID。在此示例中，此值为“h62”（不带引号）。

2）给你的TD提供类名，例如

<tr id="h62">
    <td class="brand">Ford</td>
    <td class="model">Focus</td>
</tr>

3）使用jquery更新。假设您在名为“rowId”的变量中保存行的id：

$('#'+rowId).find('.brand').html(response.brand);
$('#'+rowId).find('.model').html(response.model);

这将结束这个过程。

Asp net mvc和javascript响应

2 个答案: