Return a JSON result after deleting an item - ajax

Question

I'm developing a web application with MVC 3 and want to return a message to the user after he has deleted an item successfully.
MyWallController method looks like this:
[HttpPost]
public ActionResult DeleteAlbum(Guid albumId)
{
try
{
this.albumService.DeleteAlbum(albumId);
return Json(new { success = true, msg = "Album successfully deleted" }, JsonRequestBehavior.AllowGet);
}
catch (FPSException e)
{
return Json(new { success = false, msg = e.Message });
}
catch (Exception)
{
throw new HttpException(500, "Error while deleting album");
}
}
The link:
<a class="open-DeleteAlbumDialog" href="http://localhost:2941/MyWall/DeleteAlbum?albumId=0f49b1ad-8ec1-4fca-b8e2-28bdbf47824e">Delete</a>
The JavaScript:
$(function () {
$(document).on('click', '.open-DeleteAlbumDialog', function () {
var answer = confirm('Are you sure you want to delete this album?')
if (answer) {
$.post(this.href, function (data) {
if (data.success) {
// do something
} else {
// do something else
}
});
}
else return false;
});
However the function defined inside post is never called and what I get is a "the resource cannot be found". But the item has been deleted successfully.
All kinds of help is appreciated.

Answer 1

Your link is still working. You need to preventDefault:
$(function () {
$(document).on('click', '.open-DeleteAlbumDialog', function (e) {
e.preventDefault();
var answer = confirm('Are you sure you want to delete this album?')
if (answer) {
$.post(this.href, function (data) {
if (data.success) {
// do something
} else {
// do something else
}
});
}
});