Question

我有一个在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");
  });
}

Answer 1

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

执行此操作时：$dialog.html(response);，您正在将该HTML响应加载到DOM中，其中对话框元素（您创建的<div>）是，并且当您执行此操作时：{{1你正在销毁对话框小部件，而不是其中的内容 ...它仍然在DOM中，而不再包含在那些对话框容器元素中。

根据您的需要，您还需要明确.remove()您加载的内容，例如：

$dialog.dialog('destroy');

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

Answer 2

如果没有看到updateHost（）函数的作用，那么很难确定出现了什么问题。无论如何都要在网络上链接到这个功能版本吗？

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

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

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

希望其中一条建议有所帮助。

Answer 3

现在您可以创建一个对话框实例，只需在销毁对话框后更新其内容或方法：

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

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

ajax更新后续使用的问题

3 个答案: