handling errors in form on jquery ui dialog

Question

i am using jquery ui dialog and displaying a form:

$("#detailView").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    width: 1000,
    modal: true,
    buttons: {
        'Close': function () {
            closeModalPopup();
        }
    }
});

i have a button inside my form (not the dialog buttons). When i click this button, i send ajax to the server using this code below:

 $('.button').live('click', function () {

    $.post('/MyController/Update', $("#myForm").serialize(), function (data) {

        if (data == "Update Complete") {
            closeModalPopup();
        }
        else {
            $("#detailView").html(data);
        }
    }, "html");
});

if the post is successful, i return "Update Complete" which just goes and closes the jquery ui dialog.

the issue is that when it fails and i have an error i do this in my controller action:

        if (!validationResult.IsValid)
        {
            validationResult.AddToModelState(ModelState, null);
            return PartialView("DetailContent", hireRequest);
        }
        else
        {
            return Content("Update Complete");
        }

this should hit the "else" case in the javascript callback and show the new content in the dialog but what seems to be happening is that the content of the partialresult shows up on the full underlying page (as opposed to the modal dialog where i want it)

any suggestions on whats going wrong here?

Answer 1

You should probably create another container (a DIV for example), to be the target of your AJAX call, within your #detailView container so that the modal dialog created by JQuery won't be overwritten.