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

Question

Я использую jQuery, чтобы вызвать диалоговое окно jQuery UI, и в нем есть форма. Затем я использую функцию 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;
});
});

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

Редактировать: вот форма HTML http://pastebin.com/knh1AVGk

Answer 1

Виновником является эта строка

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 2

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

}]  

})

Answer 3

Попробуйте:

Где вы делаете

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

, дайте этому Id, например

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

, затем попробуйте это в бите ajax:

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