How to update a div with Ajax.BeginForm AND execute a javascript function?

Question

I am updating a div with a partial view by using something like this:

<% using (Ajax.BeginForm("Action", "Controller",
               new { id=Model.id },
               new AjaxOptions
               {
                   UpdateTargetId = "divId",
                   InsertionMode = InsertionMode.InsertAfter,
               }))
   {  %>

and its working fine, the returned view gets appened to the div, however I know need to execute a javascript when the post is successful, so I thought: "easy, just add OnSuccess = "MyJsFunc()" " to the AjaxOptions, but after doing this, it stopped working! now the page is refreshed and only the returned partial view is rendered :(, I even tried with a simple Alert("Hi") and its nor working.. how can I get this to work?

(by the way I think this can be a dup of http://stackoverflow.com/questions/1994754/execute-javascript-after-loading-a-mvc-page-using-ajax-beginrouteform but that question got abandoned with no answer)

Answer 1

I kept looking around and found the answer here:

http://stackoverflow.com/questions/695729/assign-a-javascript-function-to-ajaxoptions-onsuccess-property-raise-an-error-a (with the answer that was not selected)

Quoting Atzu

If you have to pass any parameter to the OnSuccess event you may have to write the funcion in this way.

OnSuccess = "function(){exampleFunction('" + param1 + "');}

and it worked for me!

Answer 2

Any reason for not doing it the right way (after all we are in 2010)? Dump MS AJAX where it belongs along with all the Ajax.* helpers which depend on it and write proper code. While using MS AJAX in classic webforms could have been justified because of the UpdatePanels, etc... doing it in a new ASP.NET MVC application today, especially after Microsoft have fully embraced jQuery, seems like a bad idea.

So after the rant here's my recommendation:

<% using (Html.BeginForm("Action", "Controller", new { id = Model.id }) { %>

and then attach the submit handler unobtrusively using jquery in a separate file:

$(function() {
    $('form').submit(function() {
        $.ajax({
            url: this.action,
            type: this.method,
            success: function(result) {
                // feel free to execute any code 
                // in the success callback
                $('#result').html(result);
            }
        });
        return false;
    });
});

or using the excellent jquery form plugin:

$(function() {
    $('form').ajaxForm(function(result) {
        // feel free to execute any code 
        // in the success callback
        $('#result').html(result);
    });
});

Benefits of this approach:

• Unobtrusive
• Clear separation between markup and javascript
• Caching javascript files and decreasing bandwidth usage

Bonus benefit: no headaches.