我有一张桌子,每一行都有配置为调用js函数的’onclick’-这部分工作。我希望函数向我可以某种方式定义的方法发出ajax请求。返回时,应在表格下方显示一个div。这可能吗?我用以下代码尝试了JS函数:
<h:outputScript library="javax.faces" name="jsf.js" /> ... function clickAndRender() { jsf.ajax.request(this, event, {render: 'div-to-render'}) }
但这当然行不通。我不知道“源”参数的值(上面的代码使用“此”)应该是什么,我也不知道最后一个参数中的执行值应该设置为什么。我也不知道如何定义要调用的url和“ action”方法。
该解决方案还可以在点击提交的页面其他位置使用一些不可见的形式。有人可以帮忙吗?
根据JSF 2.3,您可以使用<h:commandScript>它。另请参阅规格问题613。
<h:commandScript>
<h:form> <h:commandScript name="foo" action="#{bean.action}" render="div-to-render" /> </h:form> function clickAndRender() { foo(); }
自Mojarra 2.3.0-m06起可用。
在问题发布后的三年以上,此答案已更新。以下是原始答案,该日期可以追溯到<h:commandScript>不存在时。
我不知道’source’参数的值(上面的代码使用’this’)应该是什么
它应该是UICommand您要调用的组件的客户端ID ,例如<h:commandLink>,<h:commandButton>标准JSF API提供的,等。这样,JSF将在“应用请求值”阶段期间能够在组件树中定位所需的组件,然后将在其上注册的所有动作(侦听器)排队。
UICommand
<h:commandLink>
<h:commandButton>
我也不知道应该将最后一个参数中的执行设置为什么。
它应该是您要在表单提交期间处理的组件的以空格分隔的客户端ID。与您通常在中使用的完全相同<f:ajax execute>。
<f:ajax execute>
我也不知道如何定义要调用的网址
只是当前页面(从嵌套组件<form>的<h:form>位置所生成的页面)派生而来UICommand。但是您无需在中指定它jsf.ajax.request()。该jsf.js会已确定其基础上的客户端ID UICommand组件。
<form>
<h:form>
jsf.ajax.request()
jsf.js
以及“行动”方法。
只需以通常的方式指定目标组件的actionor actionListener属性即可UICommand。
action
actionListener
总而言之,您的具体问题很可能是UICommand视图中没有任何组件,因此您不能使用jsf.ajax.request()。一种方法是让表单包含一个被CSS隐藏的命令组件display:none:
display:none
<h:form id="foo" style="display:none"> <h:commandLink id="bar" action="#{bean.method}" /> </h:form>
然后,您可以将其foo:bar用作source参数。
foo:bar
source
jsf.ajax.request('foo:bar', null, {'javax.faces.behavior.event': 'action', 'execute': '@form', 'render': 'div-to-render'});
上面<f:ajax execute="@form" render="div-to- render">的命令实际上与命令组件中的命令相同。您也可以选择使用此路径,然后使用document.getElementById("foo:bar").click()代替jsf.ajax.request()。
<f:ajax execute="@form" render="div-to- render">
document.getElementById("foo:bar").click()
另外,您也可以创建一个自定义UICommand组件,这对于JavaScript用户而言将使其变得更加容易。JSF实用程序OmniFaces库具有这样的组件,即<o:commandScript>。另请参见其展示页面和源代码。JSF组件库PrimeFaces也具有类似的组件<p:remoteCommand>。另请参见其展示页面。RichFaces具有的<a4j:jsFunction>功能相同。另请参见其展示页面。
<o:commandScript>
<p:remoteCommand>
<a4j:jsFunction>