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);
  });
});

ご了承ください

  • 設定した変数はクロージャに保持されるため、コールバック関数が変数にアクセスできます ( と の使用を比較してください$alertArea) $saveButon。そもそも「何かを渡す」必要はありません。
  • .record-idは CSS クラスになりました。ドキュメント内に同じ HMTL ID を持つ複数の要素を含めることはできません
  • いずれにせよ、ID からセレクターを構築する必要はありません。( および を介しclosest()てfind()) 使用できる構造的なコンテキストが常に存在します。
  • preventDefault()フォームが誤って 2 回送信されないように使用します。
于 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を1回呼び出すだけで取得できるため、このメソッドの方がおそらく高速です。target_id

于 2013-03-13T23:16:58.637 に答える