JSF - Comment implémenter un JavaScript "Etes-vous sûr?" invite pour un <h: commandButton>

Question

Dans ma webapp JSF 1.2 j'ai une page avec un <h:commandButton> qui invoque une méthode d'action sur un bean backing. Cette action entraînera le retrait/le remplacement des données dans la base de données. Je souhaite donc éviter toute situation où l'utilisateur clique accidentellement sur le bouton de commande.

Je voudrais mettre en œuvre un simple "Êtes-vous sûr?" invite avec "Oui/Non" ou "OK/Annuler" options en utilisant JavaScript. Je ne suis pas génial avec JavaScript et je n'ai jamais mélangé JavaScript avec JSF auparavant. Quelqu'un peut-il fournir un extrait de code pour me montrer comment implémenter cela?

Voici le morceau de ma page JSP où je déclare le bouton de commande:

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

SOLUTION:

La solution fournie par BalusC a travaillé très bien. Je voulais aussi mentionner qu'il est facile d'utiliser le texte d'un regroupement de ressources comme texte d'invite. Sur ma page, je charge le groupe de ressources avec un élément comme celui-ci:

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

Le <f:loadBundle> doit être à l'intérieur de votre <f:view>. Ensuite, j'ajoute le code fourni par BalusC à mon élément de bouton de commande, mais substitue une chaîne de mon ensemble de ressources pour le 'Êtes-vous sûr?' texte, comme ceci:

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

La ligne dans mon fichier de ressources anglais (juste un fichier texte avec des paires clé/valeur) ressemble à ceci:

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

Answer 1

Utilisez la fonction JavaScript confirm(). Il renvoie une valeur boolean. Si elle renvoie false, l'action par défaut du bouton sera bloquée, sinon elle sera poursuivie.

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

Comme il retourne déjà boolean, il n'y a absolument pas besoin de l'envelopper autour dans un if un suggéré par d'autres réponses.

Answer 2

Je ne sais pas quel événement vous Je vais devoir écouter (onclick je suppose) comme je n'ai jamais utilisé JSF. Générallement parlant, cela devrait fonctionner.

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

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

Answer 3

Vous pouvez ajouter le javascript à l'onclick du bouton.

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

Answer 4

Cela devrait fonctionner. Idéalement, il devrait être dans un fichier de 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>