AjaxOptions OnComplete - ajax

Question

I wanted to use OnComplete, since I needed to modify the view before it was updated with the data from the Ajax call. As it says here: MSDN, it should be pretty straight forward.
However, it didn't work and after some investigation it seems that OnComplete fires before OnSucess but after the view is updated.
Code used for testing:
#{
AjaxOptions options = new AjaxOptions {OnSuccess = "onSuccess",
OnComplete = "onComplete", UpdateTargetId = "Update"};
}
#Ajax.ActionLink("Hit it", "Action", options)
<div id="Update"></div>
<script type="text/javascript">
function onSuccess() {
alert('onSuccess: ' + $('#Update').html());
}
function onComplete() {
alert('onComplete ' + $('#Update').html());
}
</script>
public ContentResult Action()
{
return Content("Content");
}
Am I missing something here or what's up?

Answer 1

Try this in your View:
#Ajax.ActionLink("Hit it", "Action", new AjaxOptions() { OnSuccess="done"} )
<div id="Update"></div>
Controller Action:
public ContentResult Action()
{
return Json(new { content="content" }, JsonRequestBehavior.AllowGet);
}
JavaScript:
function done(data) {
var message = data;
if (typeof message["content"] !== "undefined") {
$('#Update').html(message["content"]);
} else {
alert("error");
}
}
You can pass a Json result from your Controller and get that message in your View via JavaScript and update your div.

Answer 2

The issue is that the UpdateTargetId is actioned before the OnSuccess handler is triggered.
If you want to to update the view before or perform extra steps before the content is updated, then remove the updatetargetid from the AjaxOptions and handle the update yourself in the OnSuccess handler. You will get full control over when the view is updated then.
function onSuccess(result, status, xhr)
{
// put in your view update code here.
// and then
$("#Update").html(result);
}

Answer 3

OnComplete is fired when ajax call completed and response data has been instantiated but page has not yet updated