1

我有一个显示多条记录的页面，我正在尝试编写一个单击处理程序来处理通过 ajax 帖子提交对单个记录的更改。我正在使用 done()、fail() 和 always() 来管理结果。

当 ajax 调用返回时，我想对提交的记录进行一些更新——例如，放置一条保存的消息，重新启用该记录的提交按钮等——但除非我知道提交的特定记录的 ID。

我想做的是将目标记录的 ID 传递到 done() 中，以便 done() 中的代码可以对最初调用它的记录进行必要的更改。

这是我的代码，它显示了我在做什么，但它不起作用，因为变量target_id在这些函数中没有值。如何将该变量传递给这些函数？

$("#container").on("click", ".save-button", function(e) {

  if ($(this).hasClass('disabled')) {return;}

  var button_html = $(this).html();
  $(this).html('Please wait...');
  $(this).addClass('disabled');

  var target_id = $(this).parents(".record-form").find("#record-id").val();

  var form_poster = $.post("user_form_submit.php", target_form.serialize());

  form_poster.done(function(response_object) {

    var result = response_object['result'];

    if (result=='success') {
      var alert_area = $("#" + target_id + " .alert-area").html("Record Updated");
    } else {
      var alert_area = $("#" + target_id + " .alert-area").html("Record Not Found");
    }

  });

  form_poster.fail(function() {
    var alert_area = $("#" + target_id + " .alert-area").html("An Error Occurred");
  });

  form_poster.always(function() {
    $("#" + target_id + " .save-button").removeClass('disabled');
    $("#" + target_id + " .save-button").html(button_html);
  });

});
4

3 回答 3

2

这应该可行，我认为问题出在您的id属性上，它们必须是唯一的。这整行：

var target_id = $(this).parents(".record-form").find("#record-id").val();

可能只是：

var target_id = $("#record-id").val();

但我的猜测是你有几个带有 id 的元素record-id，你应该使用一个类。

于 2013-03-13T23:13:27.500 回答
1

这是您的代码的简化版本。你做了太多无用的样板。

$("#container").on("click", ".save-button", function(e) {
  var $saveButton = $(this),
      $recordForm = $saveButton.closest(".record-form"),
      $alertArea = $recordForm.find(".alert-area");

  $saveButton.addClass('disabled').html('Please wait...');

  e.preventDefault();

  $.post("user_form_submit.php", $recordForm.serialize())
  .done(function(response_object) {
    var result = response_object['result'];
    if (result == "success") {
      $alertArea.html("Record Updated");
    } else {
      $alertArea.html("Record Not Found");
    }
  })
  .fail(function() {
    $alertArea.html("An Error Occurred");
  })
  .always(function() {
    $saveButon.removeClass('disabled').html(button_html);
  });
});

注意

  • 您设置的变量保存在闭包中，因此您的回调函数可以访问它们（比较$alertAreaand的使用$saveButon）。首先，您不需要“传递任何东西”。
  • .record-id现在是 CSS 类，文档中不能有多个具有相同 HMTL ID 的元素
  • 无论如何，您都不需要从 ID 构建选择器，总有可以使用的结构上下文（通过closest()和find()）。
  • 使用preventDefault()这样表单就不会意外提交两次。
于 2013-03-13T23:27:41.783 回答
0

这是在黑暗中拍摄，因为我无法测试

只需将变量设置var context为this

$("#container").on("click", ".save-button", function(e) {
  var context = this;

  if ($(this).hasClass('disabled')) {return;}

  this.button_html = $(this).html();
  $(this).html('Please wait...');
  $(this).addClass('disabled');

  this.target_id = $("#record-id").val();

  this.form_poster = $.post("user_form_submit.php", target_form.serialize());


  this.form_poster.done(function(response_object) {

    var result = response_object['result'];

    if (result=='success') {
      var alert_area = $("#" + context.target_id + " .alert-area").html("Record Updated");
    } else {
      var alert_area = $("#" + context.target_id + " .alert-area").html("Record Not Found");
    }

  });

  this.form_poster.fail(function() {
    var alert_area = $("#" + context.target_id + " .alert-area").html("An Error Occurred");
  });

  this.form_poster.always(function() {
    $("#" + context.target_id + " .save-button").removeClass('disabled');
    $("#" + context.target_id + " .save-button").html(button_html);
  });

这是一个概念证明：jsFiddle

此方法可能更快，因为您只需调用 jQuery 一次即可获取target_id

于 2013-03-13T23:16:58.637 回答