JSF 2.0 AJAX：调用bean方法从JavaScript与jsf.ajax.request（或其他方式） [英] 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

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.

这样的问题：我打算送字符串 jsf.ajax.request ，但它不支持直接调用的bean的方法。我怎样才能在JSF的Bean在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:

• 包含一个隐藏的表单页面隐藏inputfield。更新inputfield从JavaScript，然后调用jsf.ajax.request张贴的形式。自定义操作可以在属性的getter和setter方法​​，如果需要进行invoced。
• 请与原始请求 XMLHtt prequest （或者与其他一些JS库的帮助）。创建一个servlet调用。

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

这两种方法很笨拙，而后者也打破了JSF的范围。

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

我缺少的东西？你是怎么做到这些？

Am I missing something? How do you do these?

有一个<一个href="http://stackoverflow.com/questions/2690461/jsf-2-0-ajax-jsf-ajax-request-to-call-method-not-only-rerender-an-area-of-page">quite类似的问题，但鉴于仅指基于XML的AJAX调用的答案。也有<一个href="http://stackoverflow.com/questions/3581499/invoke-backing-bean-method-from-javascript-jsf">another类似的问题，但这指的是基于XML的AJAX调用为好。

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.

推荐答案

我无法找出如何调用豆direcly与JavaScript，但这里是围绕需要F A黑客：AJAX声明从JavaScript：

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），要发送到服务器的所有数据字段创建一个隐藏的表单。包括H：的commandButton还有：

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>

像往常一样，监听器属性，＃{someBean.myCoolActionOnServer（）} 在这种情况下，指的是要在服务器上执行的方法。

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

2）在其他一些按钮，使用的onclick 来调用你的特殊JavaScript和通过JavaScript点击触发按钮：

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（）实际上应该填充数据到hiddenForm的领域。

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

这是我的情况下，简化，但应该工作。还在寻找更多的conventient的办法，虽然。

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

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