jquery ui finestra di dialogo come conferma

Question

Sto tentando di replicare la casella 'conferma' di javascript utilizzando la finestra di dialogo jquery. Questo è il mio codice,

function customConfirm(customMessage) { 
     $("#popUp").html(customMessage); 
     $("#popUp").dialog({ 
      resizable: false, 
      height: 240, 
      modal: true, 
      buttons: { 
       "OK": function() { 
        $(this).dialog("close"); 
        alert(true); 
        return true; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
        alert(false); 
        return false; 
       } 
      } 
     }); 
    } 

Ma quando ho provato ad avvisare questo metodo, mostra "indefinito". Non sta aspettando la visualizzazione del popup. Come posso rendere questa funzione customConfirm in attesa dell'input dell'utente (ok/cancel) ?. Il mio bisogno è che, il metodo customConfirm() restituisca true di false in base all'input dell'utente.

Answer 1

Quello che dovete fare è usare jQuery.deferred/promessa.

http://api.jquery.com/deferred.promise/

In questo esempio, asyncEvent

1) crea un jquery differita oggetto

2) è la logica per risolvere/rifiutare, il tuo OK/Cancel

3) restituisce una oggetto deferred.promise(), che può quindi essere utilizzato con $ .quando per determinare se un oggetto posticipato viene risolto o rifiutato (ok/annulla).

Cosa si dovrebbe fare è

1) creare un jQuery differita oggetto

2) avviare il dialogo, con ok/annullare l'impostazione del deferred.resolve/rifiutare

3) restituire un differito .promise() dell'oggetto,

4) Utilizzare l'oggetto promessa differito con $ .quando http://api.jquery.com/jQuery.when/

function customConfirm(customMessage) { 
    var dfd = new jQuery.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       dfd.resolve(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       dfd.reject(); 
      } 
     } 
    }); 
    return dfd.promise(); 
} 

$.when(customConfirm('hey')).then(
    function() { 
    alert("things are going well"); 
}, 
function() { 
    alert("you fail this time"); 
}); 

Si potrebbe anche solo usare determinazione e determinare se la conferma è vero o falso nel $ .when,

function customConfirm(customMessage) { 
    var dfd = new jQuery.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       dfd.resolve(true); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       dfd.resolve(false); 
      } 
     } 
    }); 
    return dfd.promise(); 
} 

$.when(customConfirm('hey')).then(
    function(confirm) { 

    if(confirm){alert("things are going well");} 
    else{alert("you fail this time");} 
}); 

Speranza che aiuta.

Answer 2

È necessario caricare la finestra di dialogo sulla funzione di pronto per il documento. Chiamata finestra aperta sul customConfirm funzione,

function customConfirm(customMessage) { 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog("open"); 
    } 

    $(document).ready(function(){ 
    $("#popUp").dialog({ 
     resizable: false, 
     autoOpen: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       return true; 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       return false; 
      } 
     } 
    }); 

    }); 

Answer 3

Questo è quello che faccio usando zepto con moduli differiti e callback, funziona come un fascino. dovrebbero essere simili per jQuery o si può semplicemente importare i moduli differiti e richiamate nel tuo html

function customConfirm(customMessage) { 
    var d = new $.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 300, 
     modal: true, 
     buttons: { 
      "Yes": function() { 
       $(this).dialog("close"); 
       d.resolve() 
      }, 
      "No": function() { 
       $(this).dialog("close"); 
       d.reject(); 
      } 
     } 
    }); 
return d.promise(); 
} 

customConfirm("Do you Want to delete the File?") 
.then(function(){ 
    console.log("You Clicked Yes") 
}) 
.fail(function(){ 
    console.log("You Clicked No") 
});