Comment ouvrir Modal contextuel dans JSF 2 à l’aide de JQuery

J’ai l’obligation de créer un bouton de commande dans ma page JSF. En cliquant sur ce bouton de commande, il déclenchera une méthode d’action qui effectuera une certaine logique et en fonction du résultat de cette logique, je devrai afficher une fenêtre contextuelle avec deux boutons de commande dessus. Je ne peux utiliser aucune implémentation de JSF (comme RichFaces, IceFaces). Je dois y parvenir uniquement avec JSF 2 et JQuery. C’est possible? Toutes les idées ou pensées me seront très utiles. Oh, il me faut append le bouton et la même logique sur plusieurs pages. J’ai essayé d’utiliser le plug-in SimepleModal mais je n’ai pas réussi à proposer une approche intelligente.

Voici un exemple de travail complet

J’ai utilisé display:none pour masquer le conteneur de dialog h:panelGroup , car la fonction .dialog le rendra visible au besoin.

Vous pouvez également masquer les véritables boutons de commande jsf et y accéder via le bouton de la boîte de dialog avec jquery # selector et appeler le fichier .click dessus, comme je l’ai fait dans le fichier js.

Une dernière chose, utilisée onclick="initDialog(); return false;" pour appeler la fonction de dialog js et append return false afin que le bouton de commande n’essaye pas de naviguer plus loin …

En utilisant la boîte de dialog jQuery UI Dialog, vous obtiendrez un maximum de flexibilité / contrôle sur vos dialogs.

L’exemple consiste en 2 fichiers (un .xhtml et un .js),

J’ai utilisé jQuery et jQueryUI, aucun autre plugin n’est nécessaire

index.xhtml

et scripts.js

 function initDialog() { $("#idOfDialogPlaceHolder").dialog({ modal: true, buttons: { SomeButton: function () { $("#justAButton").click(); }, Close: function () { $(this).dialog("close"); } }, }); }

C’est tout