Question

我正在使用jQuery来创建一个jQuery UI对话框，其中有一个表单。然后我使用jQuery的ajax函数来提交我的表单数据。问题在于......我在一个带有编辑按钮的表中有很多东西。这个编辑按钮应该打开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，并在文档片段中再次加载相同的表单。现在，页面上有多个具有相同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 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>')

给它一个例如

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

然后在ajax位中尝试这个：

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

jQuery提交错误的表单数据

3 个答案: