alternative to JQuery form.submit() to do ajax post

Question

Hello,

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

have you tried $.post() or $.ajax()?

"Approve": function() {
      var form = $('#userapprove');
      $.post(form.attr('action'), form.serialize());
      $(this).dialog("close");
}

Answer 2

imho, MS MVC AJAX is broken. I have found that it is far better to use jquery to submit the form like this:

$.ajax({
                        type: $("#UserApprove").attr("method"),
                        url: $("#UserApprove").attr("action"),
                        data: $("#UserApprove").serialize(),
                        success: function(data, textStatus, XMLHttpRequest) {
                            $("#SomeDiv").html(data); //replace the reports html.

                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {

                            alert("Yikers! The AJAX form post didn't quite go as planned...");
                        }
                    });

Make sure that you are using a partial to render the data and that you use Request.IsAjaxRequest() to send the data to the partial.

See my post here for more complete code.

Answer 3

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. `

Answer 4

If you want to stick with the MVC Ajax helper, you should add a Confirm message to your AjaxOptions. This will use the standard javascript confirmation dialog to display your message and only proceed if the action is confirmed. If you want to use a jQuery UI dialog, then I'd suggest using a normal form and having the dialog submit using .ajax() or .post() in the "Approve" button handler. Essentially, you'd be writing the same code that the helper method is inserting to do the post using AJAX then replacing the contents of the target with the returned HTML.