如何使用jsf.ajax.request手动发送Ajax请求的JSF

本文介绍了如何使用jsf.ajax.request手动发送Ajax请求的JSF的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个表，每一行都有了的onclick配置为调用一个js函数 - 这部分工作。我想该函数发出一个Ajax请求一个，我可以以某种方式定义的方法。返回时，下表一个div应该呈现。这可能吗？我试过JS函数与code：

 ＆LT; H：outputScript库=javax.facesNAME =jsf.js/＆GT;
...
功能clickAndRender（）{
  jsf.ajax.request（本，事件，{渲染：格渲染的'}）
}

不过，当然这是行不通的。我不知道什么是'源'参数的值（code以上使用'这个'）是应该的，我也不知道应该设置在最后一个参数是什么执行。我也不知道如何定义的URL被称为和行动的方法。

该解决方案也可能是在得到真实提交点击页面使用某种无形的形式在其他地方。任何人都可以帮忙吗？

解决方案

这应该是<$c$c>UICommand您想调用，例如组件＆LT; H：commandLink＆GT; ，＆LT; H：的commandButton＆GT; 等通过标准的JSF API提供。这样，JSF将在应用请求值阶段能够找到组件树所需的组件，然后队列中的所有动作（监听）中的注册就可以了。

这应该是你想要的形式提交过程中处理组件的空间分隔的客户端ID。这是完全一样的你通常在使用＆LT; F：。AJAX执行＆GT;

就在当前页面，源于＆LT;形式GT; 这是被所产生的＆LT; H：形式GT; 嵌套其中 UICommand 成分，但你并不需要在 jsf.ajax.request（）。该 jsf.js 也已经确定它根据 UICommand 组件的客户端ID。

只需指定动作或的ActionListener 目标属性 UICommand 成分的常用方法。

所有的一切，你的具体问题，很可能是你没有在视图中的任何 UICommand 组件，所以你不能使用 jsf.ajax.request（）。一种方法是有其隐藏的CSS命令组件形式显示：无：

 ＆LT; H：格式ID =foo的风格=显示：无＆GT;
    ＆LT; H：commandLink ID =酒吧行动=＃{bean.method}/＆GT;
＆LT; /小时：形式GT;

然后你可以用 FOO：酒吧为源参数

  jsf.ajax.request（'富：酒吧，空，{'javax.faces.behavior.event'：'行动'，'执行'：'@form， 渲染：格渲染的'}）;

以上操作实际上是相同的＆LT; F：AJAX执行=@形式呈现=格渲染的＆GT; 中的命令成分。你可以交替也走这条道路，然后使用的document.getElementById（富：酒吧）点击（），而不是 jsf.ajax.request的（）。

另外，你还可以创建一个自定义的 UICommand 组件，它使得JavaScript的用户这一切变得容易一些。 JSF的工具库 OmniFaces 有这样一个组成部分，<$c$c><o:commandScript>.又见其展示页面和source code 。 JSF组件库 PrimeFaces 也已在<$c$c><p:remoteCommand>.又见其展示页面。 RichFaces的有一个<$c$c><a4j:jsFunction>这不相同。又见其<一个href="http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=jsFunction&skin=blueSky">showcase页。

I have a table and each row has the 'onclick' configured to call a js function - this part works. I would like the function to issue an ajax request to a method that I can somehow define. Upon return, a div below the table should be rendered. Is this possible? I tried the JS function with the code:

<h:outputScript library="javax.faces" name="jsf.js" />
...
function clickAndRender() {
  jsf.ajax.request(this, event, {render: 'div-to-render'})
}

But it doesn't work of course. I have no idea what the values of the 'source' parameter (the code above uses 'this') should be, neither do I know what execute in the last parameter should be set to. I also don't know how to define the url to be called and the 'action' method.

The solution could also be using some invisible form somewhere else in the page that get's submitted by the click. Can anybody help?

解决方案

It should be the client ID of the UICommand component which you'd like to invoke, e.g. <h:commandLink>, <h:commandButton>, etc as provided by standard JSF API. This way JSF will during apply request values phase be able to locate the desired component in the component tree and then queue all of the action(listener)s registered on it.

It should be the space-separated client IDs of the components which you'd like to process during the form submit. It's exactly the same as you'd normally use in <f:ajax execute>.

Just the current page, as derived from the <form> which is been generated by the <h:form> where the UICommand component is nested in. But you don't need to specify it in jsf.ajax.request(). The jsf.js will already determine it based on the client ID of the UICommand component.

Just specify the action or actionListener attribute of the target UICommand component the usual way.

All with all, your concrete problem is likely that you don't have any UICommand component in the view, so you can't use jsf.ajax.request(). One way would be to have a form with a command component which is hidden by CSS display:none:

<h:form id="foo" style="display:none">
    <h:commandLink id="bar" action="#{bean.method}" />
</h:form>

Then you can use foo:bar as source parameter.

jsf.ajax.request('foo:bar', null, {'javax.faces.behavior.event': 'action', 'execute': '@form', 'render': 'div-to-render'});

The above does effectively the same as <f:ajax execute="@form" render="div-to-render"> in the command component. You could alternatively also go this path and then use document.getElementById("foo:bar").click() instead of jsf.ajax.request().

Alternatively, you can also create a custom UICommand component which makes it all a bit easier for JavaScript users. The JSF utility library OmniFaces has such a component, the <o:commandScript>. See also its showcase page and source code. The JSF component library PrimeFaces has also a similar component in flavor of <p:remoteCommand>. See also its showcase page. RichFaces has a <a4j:jsFunction> which does the same. See also its showcase page.

这篇关于如何使用jsf.ajax.request手动发送Ajax请求的JSF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！