ASP MVC5 – Delete confirmation with Ajax & jQuery UI Dialog - ajax

Question

I want to use JQuery UI Dialog to confirm my delete action, i tried some tutorial on the internet but i still having the redirection to the delete page confirmation instead of showing the confirmation dialogue:
here my scripts implementation:
<link href="#Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-2.1.0.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
width: 500,
modal: true,
buttons: {
"Delete this item": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("[data-dialog-confirm]").click(function (e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog-confirm").dialog('option', 'buttons', {
"Yes":
function () {
$.get(theHREF, null, function () { refreshList() });
$(this).dialog("close");
}, "No":
function () { $(this).dialog("close"); }
});
$("#dialog-confirm").dialog("open");
});
my confirmation div :
<div id="dialog-confirm" title="Delete the item?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>
</div>
and my action link that invoke the delete confirmation dialogue
#Html.Raw(#Html.ActionLink(".", "DeleteDemandeLocation", new { id = item.Publication_ID }, new { data_dialog_confirm = "true" }).ToHtmlString().Replace(".", "<img src=\"/Content/Images/Delete.png\" style=\"margin-left:0px; width:19px; height:19px\" />")) |
Finally my delete action/controller side :
//
// GET: /DemandeLocation/Delete/5
public ActionResult DeleteDemandeLocation(int id)
{
return View(db.PublicationSet.Find(id));
}
//
// POST: /DemandeLocation/Delete/5
[HttpPost]
public ActionResult DeleteDemandeLocation(int id, DemandeLocation demandeLocation)
{
try
{
var demandeLocationGetById = db.DemandeLocations.Find(id);
if (demandeLocationGetById != null)
db.DemandeLocations.Remove(demandeLocationGetById);
db.SaveChanges();
return RedirectToAction("ListDemandeLocation");
}
catch
{
return RedirectToAction("Error");
}
}

Answer 1

You have forgotten to return false from the click handler
$("[data-dialog-confirm]").click(function (e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog-confirm").dialog('option', 'buttons', {
"Yes":
function () {
$.get(theHREF, null, function () { refreshList() });
$(this).dialog("close");
}, "No":
function () { $(this).dialog("close"); }
});
$("#dialog-confirm").dialog("open");
return false;
});

Answer 2

Try this:
$(document).ready(function(){
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
width: 500,
modal: true,
buttons: {
"Delete this item": function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("[data-dialog-confirm]").click(function (e) {
e.preventDefault();
var theHREF = $(this).attr("href");
$("#dialog-confirm").dialog('option', 'buttons', {
"Yes":
function () {
$.get(theHREF, null, function () { refreshList() });
$(this).dialog("close");
}, "No":
function () { $(this).dialog("close"); }
});
$("#dialog-confirm").dialog("open");
});
});