MVC form not submitting from inside JQuery modal

Question

I am having a problem with a form submitted in MVC. it is able to be loaded from 2 different points and from one it submits and the second it does not post back.

It is a partial view loaded inside of a JQuery modal dialog. When I trigger the modal from the home page it will submit fine.

There is another modal which can be launched to allow a user to find a task that would then allow for the launch of a second modal to show the form. When this same form is submitted it does not trigger a post to the controller.

Here is the JQuery script:

$(document).ready(function () {
    var title =$(this).attr("data-dialog-title");

        $(".NoteDialog").live("click", function (e) {

            e.preventDefault();
            if ($(this).attr("data-dialog-title") != "Find Task") 
            {
                if ($(this).attr("data-dialog-id") == "deleteDialog") {
                    $("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        width: 300,
                        position: [600, 50],
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true,
                        buttons: {
                            "Delete": function () {
                                $("#form0").submit();
                                $(this).dialog("close");
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        }
                    })
                .load(this.href);
                }
                else 
                {
                    $("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        width: 800,
                        position: [300, 50],
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true,
                        buttons: {
                            "Save": function () {
                                alert('Handler for .submit() called.');
                                $("#form0").submit();
                                $(this).dialog("close");
                            },
                            Cancel: function () {
                                $(this).dialog("close");
                            }
                        }
                    })
                .load(this.href);
                }
            }
            else 
            {
                $("<div id='formModal'><img src='../../Content/images/ajax-loader.gif' /></div>")
                    .addClass("dialog")
                    .attr("id", $(this).attr("data-dialog-id"))
                    .appendTo("body")
                    .dialog({
                        width: 860,
                        position: [300, 50],
                        title: $(this).attr("data-dialog-title"),
                        close: function () { $(this).remove() },
                        modal: true
                })
                .load(this.href);
            }
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

It is used for launching both modal dialogs. The Alert occurs and the close dialog occurs also so the script is processing, just not submitting.

The partial view creates the form using @using (Ajax.BeginForm("AddTime","TimeTracker", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "TimeForm" }))

The form tag produced both times is:

<form action="/TimeTracker/AddTime?AddID=183336&TypeID=1&_=1328710484230" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#TimeForm" id="form0" method="post">

Is there a different way to submit? I tried having the buttons as part of the form itself which worked but had a different problem; the cancel button wouldn't close the modal correctly, causing multiple modals to be triggered each subsequent launch. If that was able to be remedied, I could sidestep this non-posting issue.

Update: I just found a possible issue/clue when running through the scenario in Firebug with the XHR tab. It appears that the form posts to the FindTask method which is what handles the first modal. It should be posting to the AddTime method which is what occurs when called from the home page.

Why does the AJAX not post to the action specified in the form tag?

It is also sending the post used for the FindTask modal and not the form fields from the AddTime form when submitted.

Answer 1

The issue turned out that MVC was assigning the same form id to both dialog forms. It would submit the first it found which was the wrong one.

Once I assigned a specific ID for the form I was able to direct which form to submit.