如何在JSF中使用jsf.ajax.request手动发送ajax请求 [英] How to use jsf.ajax.request to manually send ajax request in JSF

问题描述

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

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

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

解决方案也可能是在页面的其他地方使用一些不可见的表单，通过点击提交.有人可以帮忙吗?

解决方案

根据 JSF 2.3，您可以使用 来解决这个问题.另请参阅规范问题 613.

<h:commandScript name="foo";动作=#{bean.action}"；渲染=div-to-render"/></h:form>

function clickAndRender() {富()；}

它自 Mojarra 2.3.0-m06 起可用.

---

^{此答案在问题发布 3 年后更新为上述内容.下面是原始答案，当 <h:commandScript> 不存在时.}

---

<块引用>

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

应该是UICommand 你想调用的组件，例如、 等由标准 JSF API 提供.这样 JSF 将在应用请求值阶段能够在组件树中找到所需的组件，然后将所有注册在其上的操作(侦听器)排队.

---

<块引用>

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

它应该是您希望在表单提交期间处理的组件的以空格分隔的客户端 ID.它与您通常在 中使用的完全相同.

---

<块引用>

我也不知道怎么定义被调用的url

只是从

派生的当前页面，它由 生成，其中 UICommand 组件嵌套在其中.但您不需要在jsf.ajax.request() 中指定它.jsf.js 将根据 UICommand 组件的客户端 ID 确定它.

---

<块引用>

和'action'方法.

只需按照通常的方式指定目标 UICommand 组件的 action 或 actionListener 属性即可.

---

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

<h:commandLink id="bar";动作=#{bean.method}"；/></h:form>

然后你可以使用 foo:bar 作为 source 参数.

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

上述内容与 <f:ajax execute="@form";render="div-to-render"> 在命令组件中.您也可以选择此路径，然后使用 document.getElementById("foo:bar").click() 而不是 jsf.ajax.request().

或者，您还可以创建一个自定义的 UICommand 组件，这让 JavaScript 用户可以更轻松地完成这一切.JSF 实用程序库 OmniFaces 有这样一个组件，.另请参阅其展示页面和源代码.JSF 组件库 PrimeFaces 也有类似 .另请参阅其展示页面.RichFaces 有一个 也有同样的作用.另请参阅其展示页面.>

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?

解决方案

As per JSF 2.3, you can use <h:commandScript> for this. See also spec issue 613.

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

function clickAndRender() {
    foo();
}

It's available since Mojarra 2.3.0-m06.

---

^{This answer was updated as above 3 years after the question was posted. Below is the original answer when which dates back when <h:commandScript> didn't exist.}

---

I have no idea what the values of the 'source' parameter (the code above uses 'this') should be

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.

---

neither do I know what execute in the last parameter should be set to.

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

---

I also don't know how to define the url to be called

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.

---

and the 'action' method.

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中使用jsf.ajax.request手动发送ajax请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！