0

我有一个在 jquery-ui 对话框中打开的表单，通过 ajax 提交，以 json 格式读取更新的数据并更新页面。第一次一切正常。在后续运行中，数据库中的数据会正确更新，但页面上的更新将应用于与第一次运行相同的单元格。

使用 Web Developer 工具栏中的“查看生成的源代码”，我可以看到旧表单仍在 DOM 中。所以我怀疑这$("form#hostEdit").find("input#id").val()要么总是找到第一种形式，要么只被评估一次。我对 jQuery 很陌生，所以我不知道该怎么做。该表单是否仍应在 DOM 中？我应该使用不同的选择器吗？完全是别的东西吗？

$("table.hostgrid a.new").click(function() {
  var id = this.id.substring(3);
  var $dialog = $('<div></div>')
  .load('/hosts/new?byte1=${network.byte1}&byte2=${network.byte2}&byte3=${network.byte3}&byte4=' + id);
  var getHostAction = #{jsAction @NetworkHosts.view(':id') /}

  $dialog.dialog({
    autoOpen: false,
    title: 'New host at ${network.byte1}.${network.byte2}.${network.byte3}.' + id,
    width: 500,
    buttons: {
      "Create": function() {
        $.ajax({
          async: true,
          type: 'post',
          url: '/hosts/create',
          data: $("form#hostNew").serialize(),
          success: function(response) {
            $dialog.html(response);
            if ($("div.flashSuccess") != null) {
              $dialog.dialog('destroy');
              $.ajax({
                url: getHostAction({'id': $("form#hostEdit").find("input#id").val()}),
                dataType: 'json',
                success: function(data) {
                  updateHost(data);
                },
                error: function(data, msg, exception) {
                  alert("Error during request: " + msg);
                },
              });                  
            }
          }
        });
      }
    }
  });
  $dialog.dialog('open');

  return false;
});

应用更新的函数：

function updateHost(host) {
  var cell = $("td#dot"+host.byte4);
  cell.fadeOut("fast", function() {
    cell.find("span.hostname").text(host.hostname).attr("title", host.description);
    cell.removeClass().addClass(host.agegroup);
    if (host.type) 
      cell.addClass(host.type.toLowerCase());
    if (host.is_dhcp)
      cell.addClass("dhcp");
    if (host.is_service)
      cell.addClass("service");

    cell.fadeIn("fast");
  });
}
4

3 回答 3

1

您的怀疑是正确的，$("form#hostEdit")确实是找到了您加载的第一个表单，这是因为对话框小部件的行为方式。

当您这样做时：$dialog.html(response);，您正在将该 HTML 响应加载到 DOM 中，对话框元素（<div>您创建的）所在的位置，并且当您这样做时：$dialog.dialog('destroy');您正在销毁对话框小部件，而不是其中的内容......它仍然在 DOM 中，只是不再包含在那些对话框容器元素中。

对于您想要的内容，您还需要明确.remove()显示您加载的内容，如下所示：

$dialog.dialog('destroy').remove();

然后您将获得预期的行为，因为在 DOM 中仍然没有具有该重复 ID 的元素。

于 2010-12-15T22:42:26.100 回答
0

没有看到你的 updateHost() 函数做了什么，真的很难确定出了什么问题。无论如何要链接到网络上的功能版本？

一般来说，当涉及到表单时，您希望使用一个 ID 来确保您始终处理正确的表单，尤其是当页面上有多个表单时。其次，如果您尝试替换该表单的内容，那么不，您可能不应该在页面上有两个。您将需要删除第一个并将其替换为从您的第二个 AJAX 调用返回的任何数据。

我肯定要质疑为什么你需要两个 AJAX 调用来完成你正在做的任何事情。后端是否应该无法执行您在前端执行的任何任务并简单地返回最终信息？

此外，如果您要替换表单，则需要使用 live 或 livequery 之类的方法将 click 事件重新绑定到新的 DOM 对象。事件仅在页面首次加载时绑定。

希望这些建议之一有所帮助。

于 2010-12-15T21:46:17.700 回答
0

现在您可以创建一个对话框实例并在销毁对话框后更新其内容或使用您的方法：

var id = $("form#hostEdit").find("input#id").val();
$dialog.remove();

然后在下一个 ajax 请求中使用id变量。

于 2010-12-15T22:47:59.410 回答