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    lt ul gt       lt li gt ITEM  lt a href  url to remove  gt   lt span gt  itemId lt  span gt       lt li gt ITEM  lt a href  url to remove  gt  lt span gt  itemId lt  span gt       lt li gt ITEM  lt a href  url to remove  gt  lt span gt  itemId lt  span gt   lt  ul gt    lt div id  confirmDialog  gt Are you sure  lt  div gt    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 · Answer

I know this question is old but this was my first time I had to use a confirmation dialog. I think this is the shortest way to do it.

$(element).onClick(function(){ // This can be a function or whatever, this is just a trigger
  var conBox = confirm("Are you sure ?");
    if(conBox){ 
        // Do what you have to do
    }
    else
        return;
});

I hope you like it :)

User · Answer

I ve created a my own function for a jquery ui confirm dialog  Here is the code  function myConfirm dialogText  okFunc  cancelFunc  dialogTitle          lt div style  padding  10px  max-width  500px  word-wrap  break-word   gt     dialogText     lt  div gt    dialog       draggable  false      modal  true      resizable  false      width   auto       title  dialogTitle     Confirm       minHeight  75      buttons          OK  function              if  typeof  okFunc      function               setTimeout okFunc  50                       this  dialog  destroy                   Cancel  function              if  typeof  cancelFunc      function               setTimeout cancelFunc  50                       this  dialog  destroy                            Now to use this in your code  simply write following  myConfirm  Do you want to delete this record     function          alert  You clicked OK         function          alert  You clicked Cancel            Confirm Delete       Go on

User · Answer

NOTE  Not enough rep to comment but BineG s answer works perfectly in resolving postback issues with ASPX pages as highlighted by Homer and echo   In honor  here s a variation using a dynamic dialog       submit-button   bind  click   function ev        var  btn     this       ev preventDefault            lt div   gt    html  Are you sure    dialog           modal  true          title   Confirmation           buttons                 text   Ok               click  function                      btn trigger  click confirmed                      this  dialog  close                                           text   Cancel               click  function                       this  dialog  close                                    show

User · Answer

This is my solution   i hope it helps anyone  It s written on the fly instead of copypasted so forgive me for any mistakes       btn   on  click   function ev       ev preventDefault         dialog dialog  open         dialog find   btnConfirm   on  click   function               trigger click under different namespace so             click handler will not be triggered but native            functionality is preserved             btn   trigger  click confirmed              dialog find   btnCancel   on  click   function            dialog dialog  close                Personally I prefer this solution     edit  Sorry   i really shouldve explained it more in detail  I like it because in my opinion its an elegant solution   When user clicks the button which needs to be confirmed first the event is canceled as it has to be   When the confirmation button is clicked the solution is not to simulate a link click but to trigger the same native jquery event  click  upon the original button which would have triggered if there was no confirmation dialog  The only difference being a different event namespace  in this case  confirmed   so that the confirmation dialog is not shown again  Jquery native mechanism can then take over and things can run as expected  Another advantage being it can be used for buttons and hyperlinks  I hope i was clear enough

User · Answer

I found the answer by Paul didn t quite work as the way he was setting the options AFTER the dialog was instantiated on the click event were incorrect  Here is my code which was working  I ve not tailored it to match Paul s example but it s only a cat s whisker s difference in terms of some elements are named differently  You should be able to work it out  The correction is in the setter of the dialog option for the buttons on the click event     document  ready function              dialog   dialog           modal  true          bgiframe  true          width  500          height  200          autoOpen  false                   lb   click function e             e preventDefault            var theHREF     this  attr  href                 dialog   dialog  option    buttons                  Confirm    function                     window location href   theHREF                              Cancel    function                       this  dialog  close                                           dialog   dialog  open                    Hope this helps someone else as this post originally got me down the right track I thought I d better post the correction

User · 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   lt div id  dialog-confirm  title  Empty the recycle bin   gt     lt p gt  lt span class  ui-icon ui-icon-alert  style  float left  margin 12px 12px 20px 0   gt    lt  span gt These items will be permanently deleted and cannot be recovered  Are you sure  lt  p gt   lt  div gt    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 · 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      lt div id  dialog  title  Confirmation Required  gt    Are you sure about this   lt  div gt    lt script type  text javascript  gt      document  ready function             dialog   dialog         autoOpen  false        modal  true                      confirmLink   click function e        e preventDefault        var targetUrl     this  attr  href             dialog   dialog         buttons              Confirm    function               window location href   targetUrl                      Cancel    function                 this  dialog  close                                       dialog   dialog  open           lt  script gt    lt a class  confirmLink  href  http   someLinkWhichRequiresConfirmation com  gt Click here lt  a gt   lt a class  confirmLink  href  http   anotherSensitiveLink  gt Or  you could click here lt  a gt    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 · Answer

Simple and short solution that i just tried and it works        confirm   click function           this  removeClass  confirm          this  text  Sure           this  unbind        return false          then just add the class  confirm  to your a link and it works

User · Answer

As of 03 22 2016  the download on the page linked to doesn t work  I m leaving the link here in case the developer fixes it at some point because it s a great little plugin  The original post follows  An alternative  and a link that actually works  jquery confirm     It may be too simple for your needs  but you could try this jQuery confirm plugin  It s really simple to use and does the job in many cases

User · Answer

So many good answers here    Here is my approach  Similiar to eval   usage   function functionExecutor functionName  args       functionName apply this  args      function showConfirmationDialog html  functionYes  fYesArgs           dialog   html html           dialog   dialog           buttons                                   text  YES                   click  function                        functionExecutor functionYes  fYesArgs                         this  dialog  close                                       class  green                                               text  CANCEL                   click  function                           this  dialog  close                                       class  red                                           And the usage looks like   function myTestYesFunction arg1  arg2       alert  You clicked YES   arg1 arg2      function toDoOrNotToDo        showConfirmationDialog  Dialog text   myTestYesFunction    My arg 1   My arg 2

User · Answer

I was looking for this to use on link-buttons within an ASP NET Gridview  GridView Control build in Commands  So the  Confirm  action in the dialog needs to activate a script generated by the Gridview control at run-time  this worked for me        DeleteBtnClass   click function  e         e preventDefault         var inlineFunction     this  attr  href                   dialog   dialog            buttons                  Yes   function                       eval inlineFunction      eval   can be harmful                                    No   function                         this  dialog  close

User · Answer

Well this is the answer of your  questions      lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 0 Transitional  EN  gt  lt HTML gt   lt HEAD gt   lt TITLE gt Santa Luisa lt  TITLE gt   lt style gt      body margin 0 padding 0 background-color  ffffff       a link  color black       a visited  color black     a hover  color red     a active  color red    lt  style gt    lt  HEAD gt   lt body gt    lt link rel  stylesheet  href  jquery themes base jquery ui all css  gt       lt script src  jquery-1 4 4 js  gt  lt  script gt        lt script src  external jquery bgiframe-2 1 2 js  gt  lt  script gt       lt script src  ui jquery ui core js  gt  lt  script gt        lt script src  ui jquery ui widget js  gt  lt  script gt       lt script src  ui jquery ui mouse js  gt  lt  script gt       lt script src  ui jquery ui draggable js  gt  lt  script gt       lt script src  ui jquery ui position js  gt  lt  script gt        lt script src  ui jquery ui resizable js  gt  lt  script gt       lt script src  ui jquery ui dialog js  gt  lt  script gt        lt link rel  stylesheet  href  demos css  gt       lt script gt      var lastdel        function                  dialog    dialog               autoOpen  false modal  true closeOnEscape  true                          confirmLink   click function e                e preventDefault                var lastdel     this  attr  href                               si   click  function                     dialog   dialog  close                window location href  lastdel                           no   click  function                     dialog   dialog  close                              lt  script gt    lt SCRIPT LANGUAGE  JavaScript  gt   lt  --         var currentimgx          var cimgoverx 200-6          var cimgoutx 200            function overbx obj           color   FF0000           width  3px           obj style borderTopWidth   width          obj style borderTopColor  color          obj style borderTopStyle   solid            obj style borderLeftWidth   width          obj style borderLeftColor  color          obj style borderLeftStyle   solid            obj style borderRightWidth   width          obj style borderRightColor  color          obj style borderRightStyle   solid            obj style borderBottomWidth   width          obj style borderBottomColor  color          obj style borderBottomStyle   solid             currentimgx style width cimgoverx  px           currentimgx style height cimgoverx  px                function outbx obj           obj style borderTopWidth    0px              obj style borderLeftWidth    0px           obj style borderRightWidth    0px           obj style borderBottomWidth    0px            currentimgx style width cimgoutx  px           currentimgx style height cimgoutx  px           function ifocusx obj           color   FF0000           width  3px           obj style borderTopWidth   width          obj style borderTopColor  color          obj style borderTopStyle   solid            obj style borderLeftWidth   width          obj style borderLeftColor  color          obj style borderLeftStyle   solid            obj style borderRightWidth   width          obj style borderRightColor  color          obj style borderRightStyle   solid            obj style borderBottomWidth   width          obj style borderBottomColor  color          obj style borderBottomStyle   solid               function iblurx obj           color   000000           width  3px           obj style borderTopWidth   width          obj style borderTopColor  color          obj style borderTopStyle   solid            obj style borderLeftWidth   width          obj style borderLeftColor  color          obj style borderLeftStyle   solid            obj style borderRightWidth   width          obj style borderRightColor  color          obj style borderRightStyle   solid            obj style borderBottomWidth   width          obj style borderBottomColor  color          obj style borderBottomStyle   solid              function cimgx obj           currentimgx obj              function pause millis       var date   new Date        var curDate   null       do   curDate   new Date          while curDate-date  lt  millis              -- gt   lt  SCRIPT gt   lt div id  dialog  title  CONFERMA L AZIONE  style  text-align center   gt       lt p gt  lt FONT  COLOR   000000  style  font-family Arial font-size 22px font-style bold COLOR red   gt CONFERMA L AZIONE  lt BR gt POSSO CANCELLARE lt BR gt QUESTA RIGA   lt  FONT gt  lt  p gt        lt p gt  lt INPUT TYPE  submit  VALUE  SI  NAME    id  si  gt  -- gt  lt INPUT TYPE  submit  VALUE  NO  NAME    id  no  gt  lt  p gt   lt  div gt      lt TABLE CELLSPACING  0  CELLPADDING  0  BORDER  0  WIDTH  100   height  100   gt   lt TR valign  top  align  center  gt       lt TD gt       lt FONT COLOR  red  style  font-family Arial font-size 25px font-style bold color red   gt Modifica Dettagli  lt font style  font-family Arial font-size 20px font-style bold background-color yellow color red   gt  amp nbsp 298 amp nbsp  lt  font gt  lt font style  font-family Arial font-size 20px font-style bold background-color red color yellow   gt dsadas amp nbsp sadsadas amp nbsp  lt  font gt  amp nbsp  lt  FONT gt       lt  TD gt   lt  TR gt    lt tr valign  top  gt       lt td align  center  gt           lt TABLE CELLSPACING  0  CELLPADDING  0  BORDER  0  WIDTH    gt           lt TR align  left  gt                lt TD gt                   lt TABLE CELLSPACING  0  CELLPADDING  0  BORDER  0  WIDTH    gt                    lt TR align  left  gt                       lt TD gt                       lt font style  font-sixe 30px   gt  lt span style  color red   gt 1 lt  span gt  lt  font gt  lt br gt  lt TABLE class  tabela  CELLSPACING  0  CELLPADDING  0  BORDER  1  WIDTH  800px  gt  lt TR style  color white background-color black   gt  lt TD align  center  gt DATA lt  TD gt  lt TD align  center  gt CODICE lt  TD gt  lt TD align  center  gt NOME NOMI lt  TD gt  lt TD  align  center  gt TESTO lt  TD gt  lt td gt  amp nbsp  lt  td gt  lt td gt  amp nbsp  lt  td gt  lt  TR gt  lt TR align  center  gt  lt TD gt 12 22 2010 amp nbsp  lt  TD gt  lt TD gt 298 amp nbsp  lt  TD gt  lt TD gt daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa lt  TD gt  lt TD gt  lt A HREF  modificarigadiario php codice 298   style  font-weight bold color red font-size 30px   gt Modifica lt  A gt  lt  TD gt  lt TD gt  lt A HREF  JavaScript void 0     style  font-weight bold color red font-size 30px   onclick      dialog   dialog  open       dialog   animate   backgroundColor    aa0000   color    fff   width  250    2000  lastdel  cancellarighe php codice 298 amp id 1  alert lastdel    class  confirmLink  gt Cancella lt  A gt  lt  TD gt  lt TR align  center  gt  lt TD gt 22 10 2010 amp nbsp  lt  TD gt  lt TD gt 298 amp nbsp  lt  TD gt  lt TD gt dfdsfsdfsf lt  TD gt  lt TD gt  lt A HREF  modificarigadiario php codice 298   style  font-weight bold color red font-size 30px   gt Modifica lt  A gt  lt  TD gt  lt TD gt  lt A HREF  JavaScript void 0     style  font-weight bold color red font-size 30px   onclick      dialog   dialog  open       dialog   animate   backgroundColor    aa0000   color    fff   width  250    2000  lastdel  cancellarighe php codice 298 amp id 2  alert lastdel    class  confirmLink  gt Cancella lt  A gt  lt  TD gt  lt  TABLE gt  lt font style  font-sixe 30px   gt  lt span style  color red   gt 1 lt  span gt  lt  font gt  lt br gt                        lt  TD gt                   lt  TR gt                    lt  TABLE gt               lt  TD gt           lt  TR gt           lt  TABLE gt       lt  td gt   lt  tr gt   lt  tbody gt  lt  table gt     lt  body gt   lt  html gt    make sure you have jquery 1 4 4 and jquery ui

User · Answer

Easy way with a touch of javascript      myButton   click function event        var cont   confirm  Continue         if cont               do stuff here if OK was clicked         return true               If cancel was clicked button execution will be halted      event preventDefault

User · 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    lt div id  confirmDelete  title  Delete User   gt  lt  div gt     Image link    lt img src  img delete png  alt  Delete User  onclick  confirmDelete   lt    username   gt     lt    id   gt       gt    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 · Answer

As much as I hate to use eval  it seemed like the easiest way for me  without causing a lot of problems depending on different circumstances  Similar to the javascript settimeout function    lt a href     onclick  javascript confirm  do function params      gt Confirm lt  a gt   lt div id  dialog-confirm  title  Confirm  style  display none   gt       lt p gt Are you sure you want to do this  lt  p gt   lt  div gt   lt script gt  function confirm callback            dialog-confirm    dialog           resizable  false          height 140          modal  false          buttons                 Ok   function                        this   dialog   close                     eval callback                             Cancel  function                        this   dialog   close                     return false                                     function do function params       console log  approved       lt  script gt

User · 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 · 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    lt ul gt   lt li gt  lt a href     gt Hi 1 lt  a gt  lt  li gt   lt li gt  lt a href     gt Hi 2 lt  a gt  lt  li gt   lt li gt  lt a href     gt Hi 3 lt  a gt  lt  li gt   lt li gt  lt a href     gt Hi 4 lt  a gt  lt  li gt   lt  ul gt    It removes the whole li element  you can adapt it at your needs

User · 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   lt div id   Model DialogId  title   Model DialogTitle  gt     Model DialogMessage  lt  div gt    lt script type  text javascript  gt      function              Model DialogId   dialog         autoOpen  false        modal  true                  Model JQueryClickSelector   click function  e          e preventDefault          var sTargetUrl     this  attr   Model UrlAttribute                Model DialogId   dialog           buttons                Model ButtonConfirmText   function                  window location href   sTargetUrl                             Model ButtonCancelText   function                    this  dialog  close                                                Model DialogId   dialog  open                   lt  script gt    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    lt a title  Delete  class  SyLinkDelete  href   UserDefinedList DeleteEntry Params  gt       lt img class  SyImageDelete  alt  Delete  src   Images DeleteHS png  border  0  gt   lt  a gt

User · Answer

ul li a   live  click   function  e                e preventDefault                     lt div gt  lt  div gt    appendTo  body                        html   lt div gt  lt h6 gt Are you sure about this  lt  h6 gt  lt  div gt                         dialog                           modal  true  title   Delete message   zIndex  10000  autoOpen  true                          width   auto   modal  true  resizable  false                          buttons                                Confirm  function                                           obj  removeAttr  onclick                                                                         obj  parents   Parent   remove                                       this  dialog  close                                     window location reload                                                               No  function                                        this  dialog  close                                                                                     Cancel  function  event  ui                                  this  remove                                                                   return false

User · Answer

Another variation of the above where it checks if the control is either a  asp linkbutton  or  asp button  which renders as two different html controls  Seems to work just fine for me but haven t tested it extensively             document  on  click     confirm   function  e                e preventDefault                var btn     this                   dialog   dialog  option    buttons                      Confirm   function                          if  btn is  input                                                          var name   btn attr  name                              doPostBack name                                                else                           var href   btn attr  href                            window location href   href                                              this  dialog  close                                        Cancel   function                            this  dialog  close                                                       dialog   dialog  open

User · Answer

I ran into this myself and ended up with a solution  that is similar to several answers here  but implemented slightly differently  I didn t like many pieces of javascript  or a placeholder div somewhere  I wanted a generalized solution  that could then be used in HTML without adding javascript for each use  Here is what I came up with  this requires jquery ui    Javascript     function           a confirm   button   click function e         e preventDefault         var target     this  attr  href        var content     this  attr  title        var title     this  attr  alt             lt div gt     content     lt  div gt     dialog         draggable  false        modal  true        resizable  false        width   auto         title  title        buttons             Confirm   function               window location href   target                      Cancel   function                 this  dialog  close                                            And then in HTML  no javascript calls or references are needed    lt a href  http   www google com      class  confirm     alt  Confirm test     title  Are you sure   gt Test lt  a gt    Since the title attribute is used for the div content  the user can even get the confirmation question by hovering over the button  which is why i didn t user the title attribute for the tile   The title of the confirmation window is the content of the alt tag  The javascript snip can be included in a generalized  js include  and simply by applying a class you have a pretty confirmation window

User · Answer

I know this is an old question but here is my solution using HTML5 data attributes in MVC4    lt div id  dialog  title  Confirmation Required  data-url   Url Action  UndoAllPendingChanges    Home    gt    Are you sure about this   lt  div gt    JS code       dialog   dialog       modal  true                    autoOpen  false      buttons             Confirm   function                  window location href     this  data  url                        Cancel   function                    this  dialog  close                             TheIdOfMyButton   click function  e        e preventDefault            dialog   dialog  open

User · Answer

Very popular topic and google finds this for  jquery dialog close which event was clicked  query  My solution handles YES NO ESC KEY X events properly  I want my callback function be called no matter how dialog was disposed   function dialog YES NO sTitle  txt  fn            dialog-main   dialog           title  sTitle          resizable  true            height 140          modal  true          open  function       this  data  retval   false     this  text txt              close  function evt                var arg1     this  data  retval    true              setTimeout function     fn arg1      30                      buttons                 Yes   function       this  data  retval   true     this  dialog  close                    No   function        this  data  retval   false     this  dialog  close                          - - - -  dialog YES NO  Confirm Delete    Delete xyz item    function status       alert  Dialog retval is     status         It s easy to redirect browser to a new url or perform something else on function retval

[jquery] How to implement "confirmation" dialog in Jquery UI dialog?

Examples related to jquery

Examples related to jquery-ui

Examples related to dialog

[jquery] How to implement "confirmation" dialog in Jquery UI dialog?

Examples related to jquery

Examples related to jquery-ui

Examples related to dialog

Examples related to modal-dialog