How to implement "confirmation" dialog in Jquery UI dialog?

Question

I am try to use JQuery UI Dialog to replace the ugly javascript:alert() box. In my scenario, I have a list of items, and next to each individual of them, I would have a "delete" button for each of them. the psuedo html setup will be something follows:


    ITEM  $itemId
    
ITEM $itemId
    
ITEM $itemId


Are you sure?

In JQ part, on document ready, I would first setup the div to be a modal dialog with necessary button, and set those "a" to be firing to confirmation before to remove, like:

$("ul li a").click(function() {
  // Show the dialog    
  return false; // to prevent the browser actually following the links!
}

OK, here's the problem. during the init time, the dialog will have no idea who (item) will fire it up, and also the item id (!). How can I setup the behavior of those confirmation buttons in order to, if the user still choose YES, it will follow the link to remove it?

user_73274 · Answer

I just had to solve the same problem. The key to getting this to work was that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you want to use this for more than one link). This is because the target URL for the link must be injected into the event handler for the confirmation button click. I used a CSS class to indicate which links should have the confirmation behavior.

Here's my solution, abstracted away to be suitable for an example.


  Are you sure about this?




Click here
Or, you could click here

I believe that this would work for you, if you can generate your links with the CSS class (confirmLink, in my example).

Here is a jsfiddle with the code in it.

In the interest of full disclosure, I'll note that I spent a few minutes on this particular problem and I provided a similar answer to this question, which was also without an accepted answer at the time.

user_58289 · Answer

Will this do?

$("ul li a").click(function(e) {
  e.preventDefault();
  $('#confirmDialog').show();

  var delete_path = $(this).attr('href');

  $('#confirmDialog a.ok').unbind('click'); //  just in case the cancel link 
                                            //  is not the  only way you can
                                            //  close your dialog
  $('#confirmDialog a.ok').click(function(e) {
     e.preventDefault();
     window.location.href = delete_path;
  });

});

$('#confirmDialog a.cancel').click(function(e) {
   e.preventDefault();
   $('#confirmDialog').hide();
   $('#confirmDialog a.ok').unbind('click');
});

user_239819 · Answer

As above. Previous posts got me on the right track. This is how I've done it. The idea is to have an image next to every row in the table (generated by PHP script from database). When an image is clicked, the user would get redirected to the URL, and as a result, the appropriate record would be deleted from the database while showing some data related to the clicked record within jQuery UI Dialog.

The JavaScript code:

$(document).ready(function () {
  $("#confirmDelete").dialog({
    modal: true,
    bgiframe: true,
    autoOpen: false
  });
});

function confirmDelete(username, id) {
  var delUrl = "/users/delete/" + id;
  $('#confirmDelete').html("Are you sure you want to delete user: '" + username + "'");
  $('#confirmDelete').dialog('option', 'buttons', {
    "No": function () {
      $(this).dialog("close");
    },
    "Yes": function () {
      window.location.href = delUrl;
    }
  });
  $('#confirmDelete').dialog('open');
}

Dialog div:

Image link:

This way you can pass over the PHP loop values into the dialog box. The only downside is using GET method to actually perform the action.

user_24054 · Answer

How about this:

$("ul li a").click(function() {

el = $(this);
$("#confirmDialog").dialog({ autoOpen: false, resizable:false,
                             draggable:true,
                             modal: true,
                             buttons: { "Ok": function() {
                                el.parent().remove();
                                $(this).dialog("close"); } }
                           });
$("#confirmDialog").dialog("open");

return false;
});

I have tested it at this html:


Hi 1
Hi 2
Hi 3
Hi 4

It removes the whole li element, you can adapt it at your needs.

user_2099690 · Answer

Personally I see this as a recurrent requirement in many views of many ASP.Net MVC applications.

That's why I defined a model class and a partial view:

using Resources;

namespace YourNamespace.Models
{
  public class SyConfirmationDialogModel
  {
    public SyConfirmationDialogModel()
    {
      this.DialogId = "dlgconfirm";
      this.DialogTitle = Global.LblTitleConfirm;
      this.UrlAttribute = "href";
      this.ButtonConfirmText = Global.LblButtonConfirm;
      this.ButtonCancelText = Global.LblButtonCancel;
    }

    public string DialogId { get; set; }
    public string DialogTitle { get; set; }
    public string DialogMessage { get; set; }
    public string JQueryClickSelector { get; set; }
    public string UrlAttribute { get; set; }
    public string ButtonConfirmText { get; set; }
    public string ButtonCancelText { get; set; }
  }
}

And my partial view:

@using YourNamespace.Models;

@model SyConfirmationDialogModel


  @Model.DialogMessage

And then, every time you need it in a view, you just use @Html.Partial (in did it in section scripts so that JQuery is defined):

@Html.Partial("_ConfirmationDialog", new SyConfirmationDialogModel() { DialogMessage = Global.LblConfirmDelete, JQueryClickSelector ="a[class=SyLinkDelete]"})

The trick is to specify the JQueryClickSelector that will match the elements that need a confirmation dialog. In my case, all anchors with the class SyLinkDelete but it could be an identifier, a different class etc. For me it was a list of:

user_3058419 · Answer

Out of the box JQuery UI offers this solution:

$( function() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Delete all items": function() {
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      }
    });
  } );

HTML


  
 These items will be permanently deleted and cannot be recovered. Are you sure?

You can further customize this by providing a name for the JQuery function and passing the text/title you want displayed as a parameter.

Reference: https://jqueryui.com/dialog/#modal-confirmation

user_559441 · Answer

Well this is the answer of your questions...



Santa Luisa






    

    
    

    
    
    
    

    
    

    
    



    CONFERMA L`AZIONE:
POSSO CANCELLARE
QUESTA RIGA ?

     -->






    
    Modifica/Dettagli: 298 dsadas sadsadas  
    



    
        
        

            
                

                
                    
                    1
DATA CODICE NOME/NOMI TESTO    
12/22/2010  298  daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa Modifica Cancella
22/10/2010  298  dfdsfsdfsf Modifica Cancella
1

make sure you have jquery 1.4.4 and jquery.ui

user_15277840 · Answer

<pre><code><input type="button" value="Delete" onclick="Delete(@item.id)" / >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<script type="text/javascript">
    function Delete(id) {
        if (confirm("Are you sure ?") == true) {
            $.get("/Stud/StudDelete", {
                id: id
            }, function(res) {
                if (res) {
                    location.reload();
                }
            });
        }
    }
</script>
</code></pre>

How to implement "confirmation" dialog in Jquery UI dialog?

24 Answers