5

我有一个表，每一行都配置了“onclick”以调用 js 函数——这部分有效。我希望该函数向我可以以某种方式定义的方法发出 ajax 请求。返回时，应呈现表格下方的 div。这可能吗？我用代码尝试了JS函数：

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

但这当然行不通。我不知道'source'参数的值（上面的代码使用'this'）应该是什么，我也不知道最后一个参数中的执行应该设置为什么。我也不知道如何定义要调用的 url 和 'action' 方法。

该解决方案还可以在页面中的其他位置使用一些不可见的表单，这些表单是通过点击提交的。有人可以帮忙吗？

4

3 回答 3

12

根据 JSF 2.3，您可以使用<h:commandScript>它。另见规范问题 613。

<h:form>
    <h:commandScript name="foo" action="#{bean.action}" render="div-to-render" />
</h:form>

function clickAndRender() {
    foo();
}

它从Mojarra 2.3.0-m06开始可用。

该答案在问题发布3年后更新为以上。以下是原始答案，可以追溯到<h:commandScript>不存在的时候。

我不知道'source'参数的值（上面的代码使用'this'）应该是什么

它应该是UICommand您想要调用的组件的客户端 ID，例如标准 JSF API 提供的<h:commandLink>、<h:commandButton>等。这样，JSF 将在应用请求值阶段能够在组件树中定位所需的组件，然后将所有注册在其上的操作（侦听器）排队。

我也不知道最后一个参数中的执行应该设置为什么。

它应该是您希望在表单提交期间处理的组件的以空格分隔的客户端 ID。它与您通常在<f:ajax execute>.

我也不知道如何定义要调用的 url

只是当前页面，由组件嵌套所在的<form>生成的派生。但您不需要在. 将已经根据组件的客户端 ID 确定它。<h:form>UICommandjsf.ajax.request()jsf.jsUICommand

和“行动”方法。

只需按照通常的方式指定目标组件的actionoractionListener属性即可。UICommand

总而言之，您的具体问题很可能是UICommand视图中没有任何组件，因此您不能使用jsf.ajax.request(). 一种方法是创建一个带有命令组件的表单，该组件被 CSS 隐藏display:none：

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

然后你可以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().

或者，您也可以创建一个自定义UICommand组件，让 JavaScript 用户更轻松。JSF 实用程序库OmniFaces有这样一个组件，即<o:commandScript>. 另请参阅其展示页面和源代码。JSF 组件库PrimeFaces也有一个类似的<p:remoteCommand>. 另请参阅其展示页面。RichFaces具有<a4j:jsFunction>相同的功能。另请参阅其展示页面。

于 2013-03-22T13:04:29.927 回答
0

单独使用本机 JSF，我不知道该怎么做。但是，您应该看看 PrimeFace 的RemoteCommand。这正是您目前所需要的。它会是这样的：

<p:remoteCommand name="onRowClick" actionListener="myBean.onRowClick" update="div-to-render" />

<h:someComponent onclick="onRowClick" />
于 2013-03-22T06:20:07.247 回答
0

好的，所以我设法通过 BalusC 建议的所有方式实现了我需要的东西，其中 <a4j:jsFunction> 看起来最好。我写后续文章的原因是我最初没有在问题中包含更多错误并且没有足够的评论空间;d

  1. 我的表格在错误的地方 - 它被放在“桌子”内：

    <table>
  <ui:repeat>...</ui:repeat>
  <form>...</form>
</table>

    虽然它适用于非 Ajax，但 id 不适用于 Ajax 请求。将其移到表格正下方会导致提交请求。

  2. 我想渲染的面板最初是 render='false' ，这导致 HTML 标记一开始就没有输出。当 Ajax 调用返回时，它找不到具有我想要呈现的 id 的元素，并导致错误对话框或什么都没有（取决于方法）。解决方案是使用始终呈现相关 id 的包装 div，并仅在该 div 内使用条件呈现。所以，而不是：

    <h:outputText id="to-render" rendered="${bean.clicked != null}">
  ...
</h:outputText>

    我需要这样做：

    <h:panelGroup layout="block" id="to-render">
  <h:outputText rendered="${bean.clicked != null}">
    ...
  </h:outputText>
</h:panelGroup>

感谢所有的帮助。我将把 BalusC 的帖子保留为正确的，因为它确实是正确的，我自己的错误会影响整个事情。

于 2013-03-25T09:46:54.223 回答