Intercept ajax partialview with jQuery in MVC 3 form

I am using an ajax form in MVC 3. This is my view:

<div id="form_container"> 
    @{ Html.RenderPartial("_FormPartial"); }
</div>

This is the form partial view:

using (Ajax.BeginForm("Register", "Account", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "form_container", LoadingElementId = "loading", OnBegin = "animate" }))
{...code...}

My "Register" action on my "Account" controller returns the same partialview when there is an error. But when the form 开发者_StackOverflow中文版is submitted correctly I replace the form partialview with another partial view like so:

<h1>Success!<h1>

I want the <h1> to be intercepted by jQuery and rendered with a fadeIn(). document.ready() doesn't work neither do the OnCompleted/OnSuccess properties on the ajax form since its partial view isn't there anymore.

What is the best way to achieve this?

Why can't you use the OnSuccess callback, like this:

@using (Ajax.BeginForm(
    "Register", 
    "Account", 
    new AjaxOptions { 
        HttpMethod = "POST", 
        LoadingElementId = "loading", 
        OnBegin = "animate", 
        OnSuccess = "success" 
    }
))
{
    ...
}

and your success callback:

function success(result) {
    // Because I have removed the UpdateTargetId property from the AjaxOptions
    // we have to manually inject the resulting partial HTML into the DOM

    var success = $('<div/>').html(result).find('h1').length > 1;
    if (success) {
        // TODO: do some fancy effect such as fadeIn
        // I really suck at this effects part, so there's
        // probably a better way to do this
        $('#form_container').html(result).hide().fadeIn(2000);
    } else {
        $('#form_container').html(result);
    }
}