JSF 2.0 AJAX: Appel d'une méthode d'haricot à partir de javascript avec jsf.ajax.demande (ou d'une autre façon)

Un peu de contexte: je suis personnalisées composant JSF. Le composant est en fait un éditeur de texte et il devrait avoir un bouton "Sauver" pour enregistrer le contenu de la chaîne de l'éditeur. Comme je suis en utilisant le CodeMirror bibliothèque, j'ai besoin de récupérer le contenu (chaîne de caractères) à partir de l'éditeur avec le javascript et l'envoyer au serveur. Donc, dans ce cas je ne peut pas utiliser basé sur XML, JS invocation comme f:ajax.

La question: j'avais l'intention d'envoyer la chaîne avec jsf.ajax.request, mais il ne prend pas directement en charge de l'appel de méthodes sur les haricots. Comment puis-je appeler une méthode d'un bean avec la JSF en AJAX manière?

Il y a au moins deux façons de contourner ce problème:

  • Inclure une forme cachée de la page cachée inputfield. Mise à jour inputfield à partir de javascript et ensuite appeler jsf.ajax.demande de poster ce formulaire. Actions personnalisées peuvent être invoced dans la propriété du getter ou un setter si nécessaire.
  • Faire la demande auprès de raw XMLHttpRequest (ou peut-être avec l'aide d'une autre bibliothèque JS). Créer une servlet et l'appeler.

Les deux façons sont maladroits et ce dernier éclate de JSF portée.

Suis-je raté quelque chose? Comment faites-vous ces?

Il y a un tout à fait la même question, mais les réponses données ne se réfèrent à XML AJAX invocations. Il est également une autre question similaire, mais qui fait référence à XML AJAX appelle ainsi.

  • Exactement comment êtes-vous construire? Comme UIComponent ou <ui:composition> ou <composite:implementation>?
  • Celle-ci est construite tout simplement sur le dessus de ui:composition. Fondamentalement, j'ai un textarea là, que j'initialise avec JS invocation dans script élément. J'ai aussi un commandButton qui devrait fonctionner comme le bouton Enregistrer. Pourquoi importe-t-il si je suis en utilisant des composants composites ou de composants uicomponents?
  • Avec UIComponent vous pouvez simplement étendre UIInput et JSF prendra en charge la mise à jour du modèle de valeurs. Mais après réflexion, une fois de plus, c'est bien sûr délicat lorsqu'il s'agit d'une 3ème partie HTML/CSS/JS en fonction de l'éditeur. Avez-vous considéré comme un fullworthy composant JSF? E. g. PrimeFaces p:editor.
  • Bon point pour l'extension de UIInput, mais vous avez probablement raison, que dans ce cas ce n'est pas une vraiment une option. J'ai fait une rapide recherche sur les composants et également trouvé p:editor. Malheureusement, aucune des composants électriques parfaitement à nos besoins, donc j'ai eu à prendre cette voie.
  • Il y a un moyen d'appeler JSF Backing Bean méthode de Javascript
InformationsquelleAutor Tuukka Mustonen | 2010-09-14
  1. 15

    Je ne pouvais pas trouver comment appeler les haricots directement avec javascript, mais ici, c'est un hack autour de l'appel de f:ajax-déclaration de javascript:

    1) Créer une forme cachée avec des champs pour toutes les données que vous souhaitez envoyer vers le serveur. Inclure un h:commandButton ainsi:

    <h:form id="hiddenForm" style="display: none;">
    <h:inputHidden id="someData" value="#{someBean.someData}" />
    <h:commandButton id="invisibleClickTarget">
        <f:ajax execute="@form" listener="#{someBean.myCoolActionOnServer()}" />
    </h:commandButton>
</h:form>

    Comme d'habitude, listener attribut, #{someBean.myCoolActionOnServer()} dans ce cas, se réfère à la méthode que vous souhaitez exécuter sur le serveur.

    2) Dans certains autres bouton onclick à appeler pour votre javascript spéciaux ET cliquez sur la gâchette bouton via javascript:

    <h:commandButton value="Click me" onclick="populateTheForm('hiddenForm'); document.getElementById('hiddenForm:invisibleClickTarget').click(); return false;" />

    populateTheForm() doit remplir les données dans hiddenForm champs.

    C'est une simplification de mon cas, mais devrait fonctionner. Toujours à la recherche pour plus de conventient approche, si.

    • Comme alternative, vous pourriez tout aussi bien laisser à l'écart la <h:commandButton> et l'utilisation <f:ajax> à l'intérieur de <h:inputHidden> qui est exécutée sur change événement. C'est moins de code.
    • Oui, ça devrait fonctionner si l'utilisateur veut transférer un champ seulement (bien, dans ce cas, ce que je fais). Avec plusieurs champs dans le formulaire, je pense que cela pourrait déclencher un comportement indésirable, avec appel AJAX lancement avant les autres les champs pourraient être mis à jour.
    • ...sauf si on met que f:ajax pour le champ qui est la dernière mise à jour. Yup, qui ferait l'affaire. Merci pour vos suggestions une fois de plus, BalusC.
    • J'ai essayé en mettant le f:ajax directement à l'intérieur de h:inputHidden. Le résultat est "<f:ajax> Impossible de joindre <f:ajax> à la non-ClientBehaviorHolder parent". Ce n'est donc pas possible.
    • Il y a un petit problème avec votre code: Vous êtes à la fermeture de la h:commandButton dans la même ligne que vous êtes en l'ouvrant...
    • En effet, la correction de la faute de frappe, merci pour cette remarque.

    InformationsquelleAutor Tuukka Mustonen
  2. 1

    J'ai fait cette tâche à plusieurs reprises. Yo n'avez pas besoin de multiplier les champs cachés. Vous pouvez utiliser uniquement un champ caché, convertir toutes les valeurs d'entrée pour objet JSON via JSON.stringify et mis dans ce domaine. Sur le côté serveur - désérialiser objet JSON (il y a beaucoup de Java libs pour qu') à une classe Java. C'est tout.

    • C'est bon à savoir, bien que faites-vous en bénéficier? Ayant plusieurs champs JSF n'conversions/validations automatiquement, votre code est plus typé statiquement (bien que l'approche suce toujours). Soins à s'ouvrir un peu?
    InformationsquelleAutor Oleg