JSF - Come implementare un JavaScript "Sei sicuro?" richiede un <h: commandButton>

Question

Nella mia webapp JSF 1.2 ho una pagina con un <h:commandButton> che richiama un metodo di azione su un backing bean. Questa azione causerà la rimozione/sostituzione dei dati nel database, quindi desidero evitare situazioni in cui l'utente fa clic accidentalmente sul pulsante di comando.

Vorrei implementare un semplice "Sei sicuro?" richiedere le opzioni "Sì/No" o "OK/Annulla" utilizzando JavaScript. Non sono eccezionale con JavaScript e non ho mai combinato JavaScript con JSF in precedenza. Qualcuno può fornire uno snippet di codice per mostrarmi come implementarlo?

Ecco il pezzo della mia pagina JSP in cui dichiaro il pulsante di comando:

<h:commandButton 
    id="commandButtonAcceptDraft" 
    title="#{bundle.tooltipAcceptDraft}" 
    action="#{controller.actionReplaceCurrentReportWithDraft}" 
    image="/images/checkmark.gif"> 
</h:commandButton> 

SOLUZIONE:

La soluzione fornita da BalusC funzionato bene. Volevo anche menzionare che è facile usare il testo da un gruppo di risorse come testo del prompt. Sulla mia pagina, ho caricare il pacchetto di risorse con un elemento come questo:

<f:loadBundle basename="com.jimtough.resource.LocalizationResources" var="bundle" /> 

Il <f:loadBundle> deve essere all'interno del vostro <f:view>. Quindi aggiungo il codice fornito da BalusC al mio elemento pulsante di comando, ma sostituisco una stringa dal mio gruppo di risorse per "Sei sicuro?" il testo, in questo modo:

<h:commandButton 
    id="commandButtonAcceptDraft" 
    title="#{bundle.tooltipAcceptDraft}" 
    action="#{controller.actionReplaceCurrentReportWithDraft}" 
    image="/images/checkmark.gif" 
    onclick="return confirm('#{bundle.confirmationTextAcceptDraft}')"> 
</h:commandButton> 

La linea nel mio file di risorse inglese (solo un file di testo con le coppie chiave/valore) si presenta così:

# text displayed in user prompt when calling confirm() 
confirmationTextAcceptDraft=This will overwrite the current report and cannot be undone. Are you sure? 

Answer 1

Utilizzare la funzione JavaScript confirm(). Restituisce un valore boolean. Se restituisce false, l'azione predefinita del pulsante verrà bloccata, altrimenti verrà proseguita.

<h:commandButton onclick="return confirm('Are you sure?')" /> 

Poiché si ritorna già boolean, non c'è assolutamente alcuna necessità di avvolgerla intorno in un if un suggerito da altre risposte.

Answer 2

Non sono sicuro di quello che si evento Dovrò ascoltare (onclick suppongo) come non ho mai usato JSF. In generale, dovrebbe funzionare.

var element = document.getElementById('commandButtonAcceptDraft'); 

element.onclick = function(e){ 
    return confirm('Are you sure etc...'); 
}; 

Answer 3

È possibile aggiungere il javascript al clic sul pulsante.

<h:commandButton 
    id="commandButtonAcceptDraft" 
    title="#{bundle.tooltipAcceptDraft}" 
    action="#{controller.actionReplaceCurrentReportWithDraft}" 
    onclick="return confirm('Are you sure?')" 
    image="/images/checkmark.gif"> 
</h:commandButton> 

Answer 4

Questo dovrebbe funzionare. Idealmente dovrebbe essere in un file di script java.

<h:commandButton 
    id="commandButtonAcceptDraft" 
    title="#{bundle.tooltipAcceptDraft}" 
    action="#{controller.actionReplaceCurrentReportWithDraft}" 
    image="/images/checkmark.gif" 
    onclick="if (!confirm('Are you sure?')) return false"> 
</h:commandButton>