Question

I have a mvc2 application with a view like this

    <% using (Ajax.BeginForm("UserApprove", new { id = Model.id }, new AjaxOptions() { UpdateTargetId = "statusLights", OnSuccess = "HideButtons" }, new { id = "UserApprove" }))
   {%>

<input type="button" value="Approve" onclick="$('#dialogApprove').dialog('open')" />
<div id="dialogApprove" title="Confirm">
    <p>
        Are you sure you want to approve this request?
    </p>
</div>
<% } %>

FYI, the controller returns a partial view back.

I used to not have the jquery dialog and just simple a

<input type="Submit" value="Approve" /> 

that used to work fine

I added the jquery dialog and I have something like this to initialize the dialog.

 $("#dialogApprove").dialog({
        autoOpen: false,
        draggable: true,
        resizable: false,
        buttons: {
            "Cancel": function() {

                $(this).dialog("close")
            },
            "Approve": function() {
                $("#UserApprove").submit();
                $(this).dialog("close");
            }
        }
    });

The $(“#UserApprove”).submit(); does not seem to be doing an ajax post. It comes back with just the text from the partial view returned in a new page.

I dont want to use the jquery form plugin which has .ajaxSubmit(). Is there any other way to force an ajax post from the jquery dialog “approve” button?

Answer 1

Try:

$("#dialogApprove").dialog({
    autoOpen: false,
    draggable: true,
    resizable: false,
    buttons: {
        "Cancel": function() {

            $(this).dialog("close")
        },
        "Approve": function() {
            $.post($("#UserApprove").attr('action'), $("#UserApprove").serialize(), 
                   function(result) {
                    // result will be your partial view
                    $(this).dialog("close");
                   }
            );
        }
    }
});

This will post your form and return the partial view in the callback. `