jQuery submits wrong form data

Question

I'm using jQuery to bring up a jQuery UI dialog and in it there is a form. I then use the ajax function of jQuery to submit my form data. The problem lies here....I have a bunch of stuff in a table with a edit button. This edit button is supposed to bring up the jQuery UI dialog so I can edit the fields and submit the changes.

I make my changes and then during the submit, it submits data from the first link in my table.

Here is how my JS code looks

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

I've been trying to fix this problem for days and I can't seem to find out what the problem is.

Edit: Here is the form HTML http://pastebin.com/knh1AVGk

Answer 1

The culprit is this line

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

Whenever you click on edit link the above line is creating a new div and loading the form inside which is not appended to a body but jQuery still keeps it inside document fragment. So next time when you click on edit link a new div is created and the same form is loaded again in the document fragment. So now there are multiple edit forms on the page with same id and when you use $("#EditTaskForm").serialize() it will always get the first forms data.

The solution is, you should maintain a div with some id or class to load the form in the dialog box. Try this code.

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

Try this:

Where you do

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

give that an Id e.g

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

then try this in the ajax bit:

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