3

jquery/ajaxフォームを使用した複数のフォーム送信で問題が発生しています。サーバーにフォーム送信のすべてのインスタンスを印刷することでこれを見つけ、フォームが1回正しく送信され、次に複数回正しく送信されることを確認しました。

明確にするために、このコードは最初の送信で100％正しく機能しますが、テーブルの別の行をクリックして新しいダイアログを作成/送信すると、複数回送信されることになります。

イベントバインディングに関係していると思いますが、修正に問題があります。任意の洞察や助けをいただければ幸いです。

ボタンのIDは「save-flag-button」です

// When someone clicks on the flag column in my table, a dialog pops up //
// on the condition that a flag does not exist. //
$(function() {
  $('.flag').click(function() {
    var cellId = "flag" + String(this.getAttribute("data-client-rel"));
    if (this.getAttribute("data-flag-exists") == '0') {

      // create dialog
      var dialog = flagDialog('Create Flag');

      // Making the form ajax
      $("form", dialog).ajaxForm(function(success, data) {
        if (success) {
          $("#" + cellId).attr("data-flag-exists", '1');
          $("#" + cellId).attr("data-flag-content", data["flag_state"]);
          $("#" + cellId).text(data["flag_state"]);
          $("#flag-dialog").dialog("close");
        } else {
          alert("Failed to submit flag. Please retry.");
        }
      });
    } else { }

    }).hover(function() {
      if (this.getAttribute("data-flag-exists") == '0') {
        this.innerHTML = '<span style="color: #4183C4;">Create flag!</span>';
      }}, function() {
        this.innerHTML = this.getAttribute("data-flag-content");
      })
    });

// jquery dialog code //
function flagDialog(dialogTitle) {
  var dialog = $("#flag-dialog").dialog({
    autoOpen: false,
    autoResize: true,
    modal: true,
    minHeight: 300,
    minWidth: 450,
    position: "center",
    title: dialogTitle,
    buttons: [{
      id: "flag-cancel-button",
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
        }
      },
      {
      id:"save-flag-button",
      text: "Submit",
      click: function() {
        $("#flag-dialog").dialog("destroy");
        // $("#client-relationship-flag-form").submit();
        }
      }],
    close: function() {
      //$("#notes-text").text("");
    }
  });

  // Unbinding buttons here //
  $("#save-flag-button, #flag-cancel-button").unbind();
  $("#save-flag-button").unbind('click').click(function() {
    $("#client-relationship-flag-form").submit();
  });
  $("#flag-cancel-button").click(function() {
     $("#flag-dialog").dialog("close");
  });

  dialog.dialog("open");
  return dialog;
};
4

1 に答える 1

5

ajaxFormバインディングは1回だけ実行する必要があります。$（document）.readyイベントにajaxFormバインディングを配置し、ロジックを再構築してみてください。ajaxFormは、 .flag要素をクリックするたびにバインドされ、以前にバインドされたすべてのajaxFormは、後続のすべてのクリックイベントで呼び出されます。

于 2012-06-14T00:57:02.887 に答える