ASP MVC5 – Delete confirmation with Ajax & jQuery UI Dialog

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");
        }
    }

Slicksim · Accepted Answer · 2014-06-02 10:01:14Z

2

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;

});

answered Jun 2, 2014 at 10:01

Slicksim

7,17230 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

404NotFound Over a year ago

i've modified the function by adding the return! but once i click on the delete icon, it redirect me to another view : localhost:50412/DemandeLocation/DeleteDemandeLocation instead of showing the confirmation dialogue

Slicksim Over a year ago

If you put a debug point in the click handler, does it get hit? can you confirm that the return false is actually hit?

V0r1c · Accepted Answer · 2014-06-02 14:55:56Z

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");
           });
      });

Collectives™ on Stack Overflow

ASP MVC5 – Delete confirmation with Ajax & jQuery UI Dialog

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related