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>') 

을

가 이드 예를 들어

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

다음에 이것을 시도 것을 제공 : 다음이 시도 형태의 HTML http://pastebin.com/knh1AVGk

Answer 1

입니다 아약스 비트 :

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

Answer 2

범인은

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

는 편집 링크 위의 라인이 새로운 div 작성하고 양식을로드에 click하는 내부 본체에 추가되지 않습니다하지만 jQuery는 여전히 유지 할 때마다이 줄을하다 문서 조각 안에. 다음 번에 편집 링크를 클릭하면 새로운 div이 생성되고 동일한 문서가 문서 조각에 다시로드됩니다. 이제 동일한 id를 가진 페이지에 여러 개의 편집 양식이 있으며 $("#EditTaskForm").serialize()을 사용하면 항상 첫 번째 양식 데이터를 가져옵니다.

해결책은 대화 상자에서 양식을로드하기 위해 ID 또는 클래스가있는 div을 유지해야합니다. 이 코드를 사용해보십시오.

$('.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 
    },  
    }) 
    } 

}] 

})