将html元素传递给a4j的oncomplete函数：jsFunction

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>，并按照this answer 的指示执行oncomplete="afterOrderBy(this)"，则发送到js 函数的元素是一个跨度（当我将其调试/记录到控制台时，它没有@987654336 @child，并且是

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

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

编辑2

只需阅读

的文档

[...] 不建议在内部使用关键字 this EL 表达式，因为它不会总是指向所在的组件 Ajax 请求已启动。[...]

所以oncomplete="afterOrderBy(this)" 是错误的。

提前致谢。

Answer 1

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

例如

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

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