.NET MVC & jQuery-UI form inside a model dialog

Question

I'm tearing my hair out trying to figure out why I'm encountering this issue. I'm using a jQuery-ui model dialog box as a pop-up form for updating data. This works just fine and dandy until I try to place a div inside of the dialog div that contains the actual form. Opening the modal works fine, but when I press the "cancel" button, I get this error in the javascript console:

Uncaught TypeError: Object [object Object] has no method 'dialog'

Also, the window never closes. Finally, if I press the "X" button in the top right of the modal, the window will close fine, but I'll get the same error when I try to open the modal again.

Here's the relevant code:

Divs in the view:

<div id="TacticInstanceModal" title="Update Tactic">
    <div id="addEditTacticsInstanceContent">
    </div>
</div>

Javascript to initialize the dialog and also populate the inner-div:

var addEditTacticInstance = '@Url.Action("Edit", "TacticInstance")';
$('#updateTacticInstanceButton').live("click", function () {
    $('#TacticInstanceModal').dialog({
        resizable: false,
        modal: true,
        buttons: {
            Save: function () {
                $(this).dialog("close");
                SaveTacticInstance();
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $.get(addEditTacticInstance,
        { id: $(this).parent().parent().find('.tacticInstanceIdField').val() },
        function (data) {
            $('#addEditTacticsInstanceContent').html(data);
        });
});

Action to load the partial view:

public ActionResult Edit(int id = 0)
    {
        try
        {
            TacticInstance ti = null;

            if (id != 0)
            {
                ti = tacticInstanceRepository.GetSingle(x => x.TacticInstanceId == id);
                ti.Tactic = tacticRepository.GetSingle(t => t.TacticId == ti.TacticId);
            }
            else
            {
                ti = new TacticInstance();
                ti.TacticInstanceId = 0;
            }

            TacticInstanceViewModel tacticInstance = new TacticInstanceViewModel
            {
                TacticId = ti.TacticId,
                TacticInstanceId = ti.TacticInstanceId,
                StartDate = ti.StartDate,
                EndDate = ti.EndDate,
                CompletedDate = ti.CompletedDate,
                PropertyEnrollmentId = ti.PropertyEnrollmentId,
                TacticName = ti.Tactic.Name

                //TODO: Implement Assets
            };

            return PartialView("_AddEdit", tacticInstance);
        }
        catch (EntityException e)
        {
            ErrorSignal.FromCurrentContext().Raise(e);
            return View("Error");
        }
        catch (Exception ex)
        {
            ErrorSignal.FromCurrentContext().Raise(ex);
            return View("Error");
        }
    }

Partial View:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    @Html.Hidden("TacticInstance_TacticId", @Model.TacticId)
    @Html.Hidden("TacticInstance_InstanceId", @Model.TacticInstanceId)
    @Html.Hidden("TacticInstance_PropertyEnrollmentId", @Model.PropertyEnrollmentId)

   <div class="editor-label">
        @Html.LabelFor(model => model.TacticName, new { @style= "font-weight:bold" } )
    </div>
    <div class="editor-field">
        @Html.Label("TacticInstance_Name", Model.TacticName.ToString(), new { id = "TacticInstance_Name" })
    </div>

    <div class="editor-label">
       @Html.LabelFor(model => model.StartDate, new { @style= "font-weight:bold" } )
    </div>
    <div class="editor-field">
        @Html.Label("TacticInstance_StartDate", String.Format("{0:MM/dd/yyyy}", Model.StartDate), new { id = "TacticInstance_StartDate" })
    </div>

    <div class="editor-label">
          @Html.LabelFor(model => model.EndDate, new { @style= "font-weight:bold" } )
    </div>
    <div class="editor-field">
        @Html.Label("TacticInstance_EndDate", String.Format("{0:MM/dd/yyyy}", Model.EndDate), new { id = "TacticInstance_EndDate" })
    </div>
    <div class="editor-label">
         @Html.LabelFor(model => model.CompletedDate, new { @style= "font-weight:bold" } )
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.CompletedDate, new { id = "TacticInstance_CompletedDate" })
        @Html.ValidationMessageFor(model => model.CompletedDate)
    </div>
Html.EndForm();
}

The strangest thing about this, is that if I comment out the ajax .get in the javascript but copy/paste the generated partial-view HTML into the div on the view, it works just fine. This leads me to believe that the issue is somewhere in the get but I've tried multiple techniques of injecting the html to no avail.

Answer 1

You do not need Html.EndForm(); this is producing a second </form> at the end of the html output. Also check that your are not returning any javascript libraries in your partial view.