JQuery Bestätigungsdialog

Question

ich für einen Weg suchen, einen wiederverwendbaren „bestätigen“ Dialog mit JQuery ..

Dies ist der Teil von der MeineAnw Klasse zu implementieren, um den Dialog zu öffnen:

/** 
* @param text string Message to display 
*/ 
getConfirmationDialog: function(text) { 
    MyApp.confirmDialog = $('<div><p>' + text + '</p></div>'); 
    MyApp.confirmDialog 
    .dialog({ 
     modal: true, 
     autoOpen: false, 
     title: 'Please confirm', 
     width: 300, 
     height: 180, 
     buttons: { 
      'OK': function() { 
       return true; 
      }, 
      Cancel: function() { 
       $(this).dialog('close'); 
       return false; 
      } 
     } 
    }); 

    MyApp.confirmDialog.dialog('open'); 
}, 

In einer anderen Klasse I tun:

/** 
* Clear system cache 
* 
* @param url string Backend URL 
*/ 
clearCache: function(url) { 

    dialog = MyApp.getConfirmationDialog('Clear cache?'); 

    //dialog returns true.. 
    if (dialog) { 
     MyApp.admin.dashboard.doClearCache(); 
    } 

}, 

Aber ich habe keine Ahnung, das die „richtige“ Art und Weise zu tun .. der Dialog nicht einen Wert zurückgeben kann oder?

Answer 1

jQuery ui bietet keine praktische Möglichkeit, die Ereignisse der Dialogschaltflächen zu ändern.

Ich würde ein pubsub Muster verwenden, winzige pubsub Plugin von Cowboyba here oder Phiggins Aufwand here. Es ist sauberer als zu versuchen, die JQuery-UI Getter und Setter verwenden, um zu versuchen, die Schaltflächen und ihre Klickereignisse zu ändern, und wenn Sie eine große App machen wird Ihnen in vielen anderen Orten helfen.

Sie können das Ereignis für das Klicken auf den OK-Button veröffentlichen und dann andere Handler an- und abmelden, um das Ereignis anzuhören.

Quick Demo hier, um die Funktionalität zu zeigen.

Answer 2

Ich denke, ich verstehe, was Sie sagen. Schauen Sie sich meine jsfiddle attempt an und schauen Sie, ob es Ihnen überhaupt hilft. Ich denke, es macht, was du versuchst.

Answer 3

1. Erstellen Sie die Bestätigungsklasse.

   // ist unterhalb der Bestätigung Klasse Skelett

   function ConfirmDialog() { 
        this.showMessage = function(message, callback, argument) { 
   
         var $dialog = $('<div></div>') 
          .html(message) 
          .dialog({ 
           modal: true, 
           closeOnEscape: true, 
           buttons: { 
            Yes: function() { 
             if (callback && typeof(callback) === "function") { 
              if (argument == 'undefined') { 
               callback(); 
              } else { 
               callback(argument); 
              } 
              } 
   
             $(this).dialog("close"); 
             }, 
   
             No: function() { 
              $(this).dialog("close"); 
             } 
            } 
           }); 
          $dialog.dialog("open"); 
         } 
        } 
   

2. in Objekt vom Typ confirmDialog und Ort erstellen .jsp

   CONFIRM_DIALOG = new ConfirmDialog(); 
   

3. eine Rückruf Nachricht mit einem param erstellen.

   function saved(what) { 
       alert("Saved: " + what);   
   } 
   

4. Nennen Sie es, wo immer Sie es brauchen.

   CONFIRM_DIALOG.showMessage("Do you wish to marry?", saved, "Life"); 
   

Arbeit erledigt !!

Answer 4

Ich habe die Bestätigungsbox in Jquery erfolgreich implementiert. Stellen Sie sicher, dass Sie die Jquery-Bibliothek und CSS INCLUDED in Ihrem Code haben, bevor Sie dies versuchen (jquery-ui-1.8.16.custom.css, jquery-1.6.2.js, jquery-ui-1.8.16.custom.min. js). Der Hauptunterschied zwischen JAVASCRIPT CONFIRM BOX UND DIESE BOX, die wir mit DIV erstellen - ist, dass - JAVASCRIPT CONFIRM auf Benutzereingabe wartet, nachdem Benutzer JA/NEIN die nächste Zeile wird ausgeführt, hier müssen Sie dies in ja, oder NO BLOCK - ** der nächsten Zeile Code nach der showConfirm() wird sofort ausführen * so vorsichtig sein

/** add this div to your html 

*/

var $confirm; 
var callBack; 
var iconStyle = '<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 50px 0;"></span>'; 
var messageStyleStart = '<span align="center" style="font-family:arial, verdana, sans-serif;font-size:9.3pt;">'; 
var messageStyleEnd = '</span>'; 


$(document).ready(function(){ 
    $('#confirmDialog').dialog({ 
      autoOpen: false, 
      modal: true 
    }); 


    //jquery confirm box -- the general alert box 
    $confirm = $('<div style="vertical-align:middle;"></div>') 
    .html('This Message will be replaced!') 
    .dialog({ 
     autoOpen: false, 
     modal: true, 
     position: 'top', 
     height:300, 
     width: 460, 
     modal: true, 
     buttons: { 
      Ok : function() { 
       $(this).dialog("close"); 
       if(null != callBack) 
        callBack.success(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       if(null != callBack) 
        callBack.fail(); 
      } 
     } 
    }); 

}); 

    function showConfirm(message,callBackMe,title){ 
    callBack = null; 
    $confirm.html(""); // work around 
    $confirm.html(iconStyle + messageStyleStart +message + messageStyleEnd); 
    if(title =='undefined'|| null ==title) 
     $confirm.dialog("option", "title", "Please confirm"); 
    else 
     $confirm.dialog("option", "title", title); 
    var val = $confirm.dialog('open'); 
    callBack = callBackMe; 
    // prevent the default action 
    return true; 
} 

    // Now for calling the function 
// create a Javascript/jSOn callback object 

var callMeBack = { 
        success: function() 
          { // call your yes function here         
           clickedYes(); 
           return; 
          }, 
        fail: function(){ 
           // call your 'no' function here 
           clickedNo(); 
           return ; 
          } 
       }; 


    showConfirm("Do you want to Exit ?<br/>"+ 
        ,callMeBack1,"Please Answer"); 

Answer 5

Der Code belo w ist meine Lösung für dieses Problem. Ich dokumentierte Nutzung innerhalb der Funktion, sondern wird hier betonen:

$.ConfirmDialog('Do you want to continue?', 'Continue Title', function() { alert('yes'); }, function() { alert('no'); }, null); 

keine spezielle Einrichtung erforderlich, schließen Sie einfach die „ConfirmDialog“ Codeblock auf Ihrer Seite (Ich habe mein in meinem app.js) und rufen Sie mit der einzigen Zeile über. Genießen!

$.ConfirmDialog = function (message, title, callbackYes, callbackNo, callbackArgument) { 
    /// <summary> 
    ///  Generic confirmation dialog. 
    /// 
    ///  Usage: 
    ///   $.ConfirmDialog('Do you want to continue?', 'Continue Title', function() { alert('yes'); }, function() { alert('no'); }, null); 
    ///   $.ConfirmDialog('Do you want to continue?', 'Continue Title', function(arg) { alert('yes, ' + arg); }, function(arg) { alert('no, ' + arg); }, 'please'); 
    ///</summary> 
    ///<param name="message" type="String"> 
    ///  The string message to display in the dialog. 
    ///</param> 
    ///<param name="title" type="String"> 
    ///  The string title to display in the top bar of the dialog. 
    ///</param> 
    ///<param name="callbackYes" type="Function"> 
    ///  The callback function when response is yes. 
    ///</param> 
    ///<param name="callbackNo" type="Function"> 
    ///  The callback function when response is no. 
    ///</param> 
    ///<param name="callbackNo" type="Object"> 
    ///  Optional parameter that is passed to either callback function. 
    ///</param> 

    if ($("#modalConfirmDialog").length == 0) 
     $('body').append('<div id="modalConfirmDialog"></div>'); 

    var dlg = $("#modalConfirmDialog") 
     .html(message) 
     .dialog({ 
      autoOpen: false, // set this to false so we can manually open it 
      dialogClass: "confirmScreenWindow", 
      closeOnEscape: true, 
      draggable: false, 
      width: 460, 
      minHeight: 50, 
      modal: true, 
      resizable: false, 
      title: title, 
      buttons: { 
       Yes: function() { 
        if (callbackYes && typeof (callbackYes) === "function") { 
         if (callbackArgument == null) { 
          callbackYes(); 
         } else { 
          callbackYes(callbackArgument); 
         } 
        } 

        $(this).dialog("close"); 
       }, 

       No: function() { 
        if (callbackNo && typeof (callbackNo) === "function") { 
         if (callbackArgument == null) { 
          callbackNo(); 
         } else { 
          callbackNo(callbackArgument); 
         } 
        } 

        $(this).dialog("close"); 
       } 
      } 
     }); 
    dlg.dialog("open"); 
}; 

Answer 6

Siehe oben die Antwort von Vinay für die Bestätigungstasten. Ich habe es wiederverwendet, um einen einfachen, aber wiederverwendbaren Dialog mit einer OK-Schaltfläche für normale Zwecke zu erstellen und die Bestätigung zu bestätigen. Sie können auch einen benutzerdefinierten Titel und Inhalt im laufenden Betrieb festlegen.

<div id="yeah" title="Alert"> 
    <p id="yeah_msg">&nbsp;</p> 
</div> 

<button id="click_me">Show it</button> 

<script type="text/javascript"> 
    function dlg(msg, callback, title){ 
     if(callback == undefined){ 
      callback = null; 
     } 
     if(title == undefined){ 
      title = 'Alert'; 
     } 

     $("#yeah_msg").html(msg); 
     $("#yeah").dialog('option', 'title', title); 

     if(callback){ 
      $("#yeah").dialog('option', 'buttons', { 
       "Ok": function() { 
        $(this).dialog("close"); 
        if(null != callback) callback.success(); 
       }, 
       'Cancel': function(){ 
        $(this).dialog("close"); 
        if(null != callback) callback.fail(); 
       } 
      }); 
     }else{ 
      $("#yeah").dialog('option', 'buttons', { 
       "Ok": function() { 
        $(this).dialog("close"); 
       } 
      }); 
     } 

     $("#yeah").dialog("open"); 
    } 

    $(document).ready(function(){ 
     //create dialog 
     $("#yeah").dialog({ 
      autoOpen: false, 
      modal: true, 
      show: 'blind', 
      hide: 'explode', 
      resizable: false 
     }); 

     //show dialog 
     $('#click_me').click(function(){ 
      dlg('title', {success: function(){ console.log('yipee'); }, fail: function(){ console.log('nopee'); } }); 
     }); 
    }); 
</script> 

Answer 7

Whoa warum ist das so komplex? Hier ist ein einfacher Weg

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