JSF 2.0 AJAX:使用 jsf.ajax.request(或其他方式)从 javascript 调用 bean 方法 [英] JSF 2.0 AJAX: Call a bean method from javascript with jsf.ajax.request (or some other way)

问题描述

一些背景:我正在构建一个自定义 JSF 组件.该组件基本上是一个文本编辑器，它应该有一个保存"按钮，用于保存编辑器的内容字符串.当我使用 CodeMirror 库时，我需要使用 javascript 从编辑器中获取内容(字符串)并发送到服务器.因此，在这种情况下，我不能使用基于 XML 的 JS 调用，例如 f:ajax.

问题:我打算用jsf.ajax.request 发送字符串，但它不直接支持在bean 上调用方法.如何以 AJAX 方式使用 JSF 调用 bean 中的方法?

至少有两种方法可以解决这个问题:

• 在带有隐藏输入字段的页面中包含一个隐藏表单.从 javascript 更新该输入字段，然后调用 jsf.ajax.request 发布该表单.如果需要，可以在属性的 getter 或 setter 中调用自定义操作.
• 使用原始的 XMLHttpRequest 执行请求(或者在其他 JS 库的帮助下).创建一个 servlet 并调用它.

这两种方式都很笨拙，而且后者也超出了 JSF 的范围.

我错过了什么吗?你是如何做到这些的?

有一个 非常相似的问题，但给出的答案仅涉及基于 XML 的 AJAX 调用.还有另一个类似的问题，但它指的是基于 XML 的AJAX 调用也是如此.

解决方案

我不知道如何使用 javascript 直接调用 bean，但这里有一个关于从 javascript 调用 f:ajax-declaration 的技巧:

1) 创建一个隐藏表单，其中包含要发送到服务器的所有数据的字段.还包括一个 h:commandButton:

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

像往常一样，listener 属性，在这种情况下，#{someBean.myCoolActionOnServer()} 指的是您要在服务器上执行的方法.>

2) 在其他一些按钮中，使用 onclick 来调用您的特殊 javascript 并通过 javascript 单击触发按钮:

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

populateTheForm() 实际上应该将数据填充到 hiddenForm 的字段中.

这是我的情况的简化，但应该有效.不过，仍在寻找更方便的方法.

Some background: I am building a custom JSF component. The component is basically a text editor and it should have a "Save" -button for saving the content string of the editor. As I am using the CodeMirror library, I need to fetch the content (string) from the editor with javascript and send that to the server. Therefore, in this case I cannot use XML-based JS invocation such as f:ajax.

The question: I was planning to send the string with jsf.ajax.request, but it doesn't directly support calling methods on beans. How can I invoke a method in a bean with JSF in AJAX manner?

There at least two ways to get around this:

• Include a hidden form to page with hidden inputfield. Update that inputfield from javascript and then call jsf.ajax.request to post that form. Custom actions can be invoced in the property's getter or setter if needed.
• Do the request with raw XMLHttpRequest (or maybe with help from some other JS library). Create a servlet and call that.

Both ways are clumsy and the latter also breaks out of JSF scope.

Am I missing something? How do you do these?

There is a quite similar question, but the answers given only refer to XML-based AJAX invocations. There is also another similar question, but that refers to XML-based AJAX calls as well.

解决方案

I couldn't find out how to call beans direcly with javascript, but here is a hack around calling f:ajax-declaration from javascript:

1) Create a hidden form with fields for all the data that you want to send to the server. Include a h:commandButton as well:

<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>

As usual, listener attribute, #{someBean.myCoolActionOnServer()} in this case, refers to the method that you want to execute on the server.

2) In some other button use onclick to call for your special javascript AND click the trigger-button via javascript:

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

populateTheForm() should actually fill the data into hiddenForm's fields.

This is a simplification of my case but should work. Still looking for more conventient approach, though.

这篇关于JSF 2.0 AJAX:使用 jsf.ajax.request(或其他方式)从 javascript 调用 bean 方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！