jQuery отправляет неверные данные формы

Question

Я использую jQuery, чтобы открыть диалоговое окно интерфейса jQuery и в нем есть форма. Затем я использую функцию ajax jQuery для отправки моих данных формы. Проблема здесь. У меня есть куча вещей в таблице с кнопкой редактирования. Эта кнопка редактирования должна отображать диалоговое окно jQuery UI, чтобы я мог редактировать поля и отправлять изменения.

Выполняю свои изменения, а затем во время отправки, он отправляет данные из первой ссылки в моей таблице.

Вот как мой JS код выглядит

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

Я пытался решить эту проблему в течение нескольких дней, и я не могу показаться, чтобы выяснить, в чем проблема.

Edit: Вот это форма HTML http://pastebin.com/knh1AVGk

Answer 1

Попробуйте это:

Где вы

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

дают, что Id например

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

попробуйте это бит ajax:

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

Answer 2

Виновник этой линии

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

Всякий раз, когда вы click на редактирования ссылки выше линии создающей новой div и загружают форму, внутри которой не добавляются к телу, но jQuery до сих пор хранишь это внутри фрагмента документа. Поэтому в следующий раз, когда вы нажмете ссылку на редактирование, будет создан новый div, а в фрагменте документа снова будет загружена одна и та же форма. Итак, теперь на странице с одним идентификатором есть несколько форм редактирования, и когда вы используете $("#EditTaskForm").serialize(), он всегда будет получать данные первых форм.

Решение состоит в том, что вы должны поддерживать 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 
    },  
    }) 
    } 

}] 

})