2012-05-22 12 views
8

Sto cercando di sostituire il javascript conferma(). Ho trovato la funzione jquery dialog() che può essere completamente personalizzata. Il problema è che non posso farlo restituire true o false.jQuery Finestra di dialogo UI con ritorno booleano - vero o falso

Ecco il mio codice:

$('#delBox').dialog(
     { autoOpen: false, resizable: false, modal: true, closeOnEscape: true, width: 300, height: 'auto', title: 'Deletar registro', 
      buttons: { 
       "Ok": function() { 
        return true; 
       }, "Cancelar": function() { 
        $(this).dialog("close"); 
        return false; 
       } 
      }, 
      open: function() { 
       var buttonsSet = $('.ui-dialog-buttonset').find("button:contains('Ok')"); 
       buttonsSet.attr("class", "ui-button ui-state-default"); 
       $('.ui-dialog-titlebar-close span').empty(); 
       $('.ui-dialog-buttonset').find("button:contains('Ok')").button({ 
        text: false, 
        icons: { 
         primary: 'ui-icon-ok' 
        } 
       }); 

       $('.ui-dialog-buttonset').find("button:contains('Cancelar')").button({ 
        text: false, 
        icons: { 
         primary: 'ui-icon-cancel' 
        } 
       }); 
      } 
     }); 

Questo solo restituire un oggetto prima di qualsiasi opzione selezionata:

function deletar() { 
    alert($('#delBox').dialog('open')); 
} 

risposta

27

finestre di dialogo jQueryUI non possono restituire un true o false come sono mostrati sopra altri contenuti, ma senza esecuzione di blocco.

Il meglio che puoi fare è:

  1. fare la scatola modal in modo che nasconde l'altra contenuti

  2. alimentazione callback per essere utilizzato a seconda di quale opzione è selezionata.

Per i punti bonus extra, è possibile creare un oggetto di promessa $.Deferred() e tornare che quando si mostra la finestra di dialogo. È quindi possibile impostare resolve o reject nei gestori di eventi del pulsante.

Questo darebbe netta separazione tra mostra la finestra di dialogo, ed eseguendo le azioni successivamente innescato da esso:

function showDialog() { 
    var def = $.Deferred(); 

    // create and/or show the dialog box here 
    // but in "OK" do 'def.resolve()' 
    // and in "cancel" do 'def.reject()' 

    return def.promise(); 
} 

showDialog().done(function() { 
    // they pressed OK 
}).fail(function() { 
    // the pressed Cancel 
}); 

// NB: execution will continue here immediately - you shouldn't do 
//  anything else now - any subsequent operations need to be 
//  started in the above callbacks. 
+1

+1 Per differite –

+0

pensi che la funzione dovrebbe restituire l'oggetto differita a pieno titolo o un'interfaccia promessa ristretta tramite 'def.promise ritorno()'? –

+0

@AtesGoral sì, 'def.promise()' sarebbe preferibile - buon punto. – Alnitak

7

La prima risposta va bene - ho pensato solo aggiungere un po 'di codice che mostra come è possibile restituire il tasto che è stato cliccato:

function ShowYesNoMessage(title, message) { 
var def = $.Deferred(); 
$("#infoMessage").html(message); 

$("#dialog_infoMessage").dialog({ 
    modal: true, 
    title: title, 
    buttons: { 
     Yes: function() { 
      $("#infoMessage").html(""); 
      $(this).dialog("close"); 
      def.resolve("Yes"); 
     }, 
     No: function() { 
      $("#infoMessage").html(""); 
      $(this).dialog("close"); 
      def.resolve("No"); 
     } 
    } 
}); 
return def.promise(); 
} 


$.when(ShowYesNoMessage("Are you sure", message)).then(
      function(status) { 
       if (status == "Yes") { 
        //do the next step 
       } 
      } 
     ); 
+1

Personalmente per una scelta binaria preferisco la combinazione '.resolve' /' .reject'. Oh, e non c'è bisogno di un '$ .when' se la funzione viene chiamata all'interno di $ .when' restituisce una promessa – Alnitak

+0

Bella aggiunta Alnitak - grazie –

+0

Grazie per la visualizzazione può restituire il valore nella risoluzione. – QMaster

Problemi correlati