what is wrong with my jquery ajax form post?

what is wrong with my jquery ajax form post?

$("button[name='advocate-create-button']").on("click", function () {
$.ajax({
url: '/Vendor/AdvocateCreate',
type: 'post',
dataType: 'json',
data: $('form#advocate-create-form').serialize(),
success: function() {
$(".modal_overlay").css("opacity", "0");
$(".modal_container").css("display", "none");
}
}).done(function (data) {
var $target = $("#advocate-list-view");
var $newHtml = $(data);
$target.replaceWith(data);
$newHtml.effect("highlight");
});
return false;
});
Almost got this, just need a slight assist to get it done...I'm trying to
post form data to '/Vendor/AdvocateCreate' and once it saves, I want the
dialogue to go away and the list behind it to be updated.
The list behind it is the AdvocateList view and pulls its data from
AdvocateList method in the same controller
AdvocateCreate method
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AdvocateCreate(Advocate advocate, int page = 1)
{
if (!ModelState.IsValid) return View(advocate);
db.Advocates.Add(advocate);
db.SaveChanges();
var userId = WebSecurity.GetUserId(User.Identity.Name);
var model = (from a in db.Advocates.ToList()
where a.VendorId == userId
select a).ToPagedList(page, 15);
if (Request.IsAjaxRequest()) return
PartialView("_AdvocateListPartial", model);
return View(model);
}
the form tag is thus: <form class="form" id="advocate-create-form">
The create method does get called, the data does get saved, but the lines
under success: do not fire and the data in #advocate-list-view is not
updated
thanks