Comment ouvrir Modal pop-up dans les JSF 2 à l'aide de JQuery

J'ai une exigence que dans mon JSF page, il y aura un bouton de commande, et sur en cliquant sur ce bouton de commande, cela va déclencher une méthode d'action qui permettra d'effectuer une certaine logique et sur la base des résultats de cette logique, je vais avoir à afficher un pop-up avec deux bouton de commande. Je peux ne pouvez pas utiliser la mise en œuvre de l'ACI (comme RichFaces, IceFaces), j'ai besoin d'atteindre cet objectif qu'en utilisant JSF 2 et JQuery. Est-il possible? Toutes les idées ou les pensées sera très utile pour moi. Oh une autre chose que j'ai besoin d'ajouter le bouton et la même logique en plusieurs pages. J'ai essayé d'utiliser le SimepleModal plug-in, mais n'a pas réussi à venir avec une approche intelligente.

RichFaces et ICEfaces ne sont pas JSF implémentations. Il sont JSF bibliothèques de composants. Qu'est-ce exactement est la raison pour laquelle vous avez besoin de passer des jours et des semaines pour homebrew quelques centaines de lignes de code pour atteindre l'exigence au lieu de simplement en utilisant un prête-à-l'utilisation d'une bibliothèque de composants pour cela?
La raison derrière est de construire la logique par moi-même que de compter sur des tiers les codes.
C'est vraiment possible, ça va être beaucoup de travail. Votre question est trop ouverte pour donner une réponse appropriée. Tout ce que je peux suggérer, c'est de prendre un coup d'oeil dans le code source du composant open source bibliothèques, pour apprendre, par exemple. En attendant, j'avais repenser si JSF est vraiment le bon choix pour vous: stackoverflow.com/questions/4421839/...

OriginalL'auteur user1220373 | 2012-02-24

  1. 4

    Ici est un exemple de travail

    J'ai utilisé display:none pour masquer la h:panelGroup boîte de dialogue contenant la cause .boîte de dialogue fonction de rendre visible lorsque son besoin d'être

    Vous pouvez également masquer le réel jsf boutons de commande et d'y accéder via le bouton du dialogue avec jquery # sélecteur et invoquer la .cliquez sur comme je l'ai fait dans le fichier js.

    Une dernière chose , utilisé onclick="initDialog(); return false;" pour appeler la boîte de dialogue js fonction et a ajouté return false si le bouton de commande l'habitude d'essayer de naviguer loin...

    En utilisant l'INTERFACE utilisateur de jQuery boîte de Dialogue vous permettra d'obtenir un maximum de flexibilité et de contrôle sur les dialogues.

    L'exemple se compose de 2 fichier (un .xhtml et un .js) ,

    J'ai utilisé jQuery et jQueryUI , pas besoin dans tous les autres plugins à tous les

    index.xhtml

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view>
    <h:head>
        <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
        <script language="javascript" src="scripts.js"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
    </h:head>
    <h:body>
        <h:panelGroup id="idOfDialogPlaceHolder" style="display:none">
            <h:form prependId="false">
                <h:outputText value="Some Text"></h:outputText>
                <h:commandButton id="justAButton" onclick="alert('wow')" style="display:none"></h:commandButton>
            </h:form>
        </h:panelGroup>
        <h:form prependId="false">
               <h:commandButton id="dialogClickBtn" value="Click to display dialog" onclick="initDialog(); return false;"></h:commandButton>
        </h:form>

    </h:body>
</f:view>
</html>

    et scripts.js

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

    Que c'est

    Est-il possible de mettre en œuvre ce sans <h:panelGroup id="idOfDialogPlaceHolder" style="display:none">? Il suffit de passer le message à l'javascript comme une méthode en java argument?
    tu veux dire comme simple js confirmer ? w3schools.com/js/tryit.asp?filename=tryjs_confirm , vous ne pouvez pas , (sauf si vous utilisez certains tiers plugin jquery) - par exemple projectshadowlight.org/jquery-easy-confirm-dialog

    OriginalL'auteur Daniel