jQueryが間違ったフォームデータを送信します

Question

jQueryを使用してjQuery UIダイアログを表示し、そこにフォームがあります。次に、jQueryのajax関数を使用してフォームデータを送信します。問題はここにあります....私は編集ボタン付きのテーブルにたくさんのものを持っています。この編集ボタンは、jQueryのUIダイアログを表示して、フィールドを編集して変更を送信できるようになっています。

私は自分の変更を加えてから、送信中にテーブルの最初のリンクからデータを送信します。ここで

は、私は日のために、この問題を解決しようとしてきたと私は問題が何であるかを見つけることができないよう

$('.edit_task').each(function() { 
var $link = $(this); 
var $dialog = $('<div></div>') 
    .load($link.attr('href')) 
    .dialog({ 
     autoOpen: false, 
     title: "Edit Task", 
     width: 700, 
     height: 550, 
     modal: true, 
     buttons: { 
      "Save": function() { 
       $.ajax({ 
        url: $link.attr('href'), 
        type: "POST", 
        data: $("#EditTaskForm").serialize(), 
        dataType: "html", 
        async: true, 
        cache: false, 
        error: function() 
        { 
         alert("Error: An error occured while trying to update a task."); 
        }, 
        success: function() 
        { 

         $(this).dialog('close'); 
         location.reload(); 
        } 
       }); 
      }, 
      "Cancel": function() { $(this).dialog('close'); } 
     } 
}); 

$link.click(function() { 
    $dialog.dialog('open'); 

    return false; 
}); 
}); 

私のJSコードがどのように見えるかです。

編集：

あなたが

var $dialog = $('<div></div>') 

を行う

は、Idは例えば

var $dialog = $('<div id="myDiv"></div>') 

、その後でこれを試すことを与える：ここではこれを試してみてください、フォームのHTML http://pastebin.com/knh1AVGk

Answer 1

ですアヤックスビット：

data: $("#myDiv").find('form').serialize() 

Answer 2

上記の行は、新しいdivを作成し、身体に追加けどjQueryが静止しているされていない内部のフォームをロードしているときはいつでもあなたの編集リンク上click犯人はこのライン

var $dialog = $('<div></div>')

ですそれは文書の断片の中にあります。次回に編集リンクをクリックすると、新しいdivが作成され、同じ書式がドキュメントフラグメントに再度読み込まれます。したがって、同じIDを持つページに複数の編集フォームがあり、$("#EditTaskForm").serialize()を使用すると、常に最初のフォームデータが取得されます。

解決策は、divをIDまたはクラスで維持して、ダイアログボックスでフォームを読み込むことです。このコードを試してください。

$('.edit_task').each(function() { 
    var $link = $(this); 

    //This part of the code will fix the issue 
    var $formContainer = $('#editFormContainer'); 
    if($formContainer.length == 0){ 
     $formContainer = $('<div id="editFormContainer"></div>') 
         .appendTo(document.body); 
    } 

    console.log($("#EditTaskForm").length); 

    var $dialog = $formContainer 
     .load($link.attr('href')) 
     .dialog({ 
      autoOpen: false, 
      title: "Edit Task", 
      width: 700, 
      height: 550, 
      modal: true, 
      buttons: { 
       "Save": function() { 
        $.ajax({ 
         url: $link.attr('href'), 
         type: "POST", 
         data: $("#EditTaskForm").serialize(), 
         dataType: "html", 
         async: true, 
         cache: false, 
         error: function() 
         { 
          alert("Error: An error occured while trying to update a task."); 
         }, 
         success: function() 
         { 

          $(this).dialog('close'); 
          location.reload(); 
         } 
        }); 
       }, 
       "Cancel": function() { $(this).dialog('close'); } 
      } 
    }); 

    $link.click(function() { 
     $dialog.dialog('open'); 

     return false; 
    }); 
}); 

Answer 3

var idCounter = new Date().getTime(); 
var customDialog = $('<span id='+ (idCounter++) +' ></span>') <- unique Id 
.dialog({.... 
. 
. 
. 
buttons:[{ 
    text: save 
    click: function() { 
     $.ajax({ 
     type:'POST' 
    url: '/config/update_services/', 
     dataType: 'json', 
     cache: false, 
     data: $('#form').serialize(), 
     success: function(data) { 
      $('#form').remove();     <--- this helps will remove the form making sure the new form is there 
      customDialog.dialog('close'); 
      /// do otherstuff 
    },  
    }) 
    } 

}] 

})