javascript - 将 html 元素传递给 a4j :jsFunction 的 oncomplete 函数

Question

我需要传递 <a4j:jsFunction> 的调用 html 元素到其 oncomplete功能。我看到this回答但我不认为将 html 元素(作为字符串，我想？)传递给 bean 并返回是非常优雅的，而且我认为这有点困惑。

这是我的代码

<td class="col-md-2 clickable text-right"
        onclick="orderBy('getAmount','DESC')">
    #{msg.label_amount}
</td>

<a4j:jsFunction name="orderBy" action="#{backingBeanRef['orderBy']}"
        oncomplete="afterOrderBy()" 
        render="list_form" >
    <a4j:param name="ref" assignTo="#{backingBeanRef['orderByMethodName']}"/>                               
    <a4j:param name="ref2" assignTo="#{backingBeanRef['orderBySortOrder']}"/>
</a4j:jsFunction>

问题

有没有办法将 html 元素传递给 a4j:jsFunction ，并将其传递给其 oncomplete回调函数，而不将 html 元素发送到 bean 并返回？

理想的解决方案是向调用方添加一个参数，例如 orderBy(... , this)以及 jsFunction 的相应参数，如 <a4j:param name="element"/> :

<td class="col-md-2 clickable text-right"
        onclick="orderBy('getAmount','DESC',this)">
    #{msg.label_amount}
</td>

<a4j:jsFunction name="orderBy" action="#{backingBeanRef['orderBy']}"
                    oncomplete="afterOrderBy(element)" 
                    render="list_form" >
    <a4j:param name="ref" assignTo="#{backingBeanRef['orderByMethodName']}"/>                               
    <a4j:param name="ref2" assignTo="#{backingBeanRef['orderBySortOrder']}"/>
    <a4j:param name="element"/>
</a4j:jsFunction>

但是这不起作用。我在 js 函数的第一行有一个断点，但它没有被调用。

我刚刚添加了..,this)到 amount 列(我显示的唯一一列)，所以如果我单击其他列(没有 ..,this) )，我的 js 函数确实会被调用，只有参数未定义。

那么，可以这样做吗？

编辑

如果我尝试不添加任何 <a4j:param> ，并执行 oncomplete="afterOrderBy(this)"正如 this answer 所指出的发送到 js 函数的元素是一个跨度(当我调试/将其记录到控制台时，它没有 .source 子元素，并且是

...
outerHTML: "<span id=\"sgfrmId:j_idt601\" style=\"display: none;\"></span>"
...

This answer还指出了一些做类似事情的方法，但不完全是这样。

编辑2

只需阅读文档

[...] It is not recommended to use use keyword this inside the EL-expression, because it will not always point to the component where Ajax request was initiated.[...]

这样做oncomplete="afterOrderBy(this)"错了。

提前致谢。

Answer 1

a4j:jsFunction 仅用于触发 ajax 请求，oncomplete 作为服务器响应的一部分执行(即不在函数的上下文中)，只需将元素引用保存到全局变量并使用 oncomplete 代码该变量。

例如

<td onclick="sourceElement=this; orderBy();">…</td>

afterOrderBy = function() {
     // do something with sourceElement …
}