无法定义事件并同时在该事件上绑定 <a4j:support/>答案

【问题标题】：Can't define a event and bind an <a4j:support/> on this event at the same time无法定义事件并同时在该事件上绑定 <a4j:support/>
【发布时间】：2010-10-06 08:37:50
【问题描述】：

让我们考虑一下这个简单的代码：

<h:form id="myForm">
    <h:inputText id="myInput">
        <a4j:support event="onchange" actionListener="#{myBean.doSomething}"/>
    </h:inputText>
</h:form>

这将生成以下 HTML 代码：

<input id="myForm:myInput" type="text" name="myForm:myInput" onchange="A4J.AJAX.Submit(...)" />

现在，我只是在我的<h:inputText> 的onchange 事件中添加一些内容：

<h:form id="myForm">
    <h:inputText id="myInput" onchange="alert('foobar');">
        <a4j:support event="onchange" actionListener="#{myBean.doSomething}"/>
    </h:inputText>
</h:form>

这将生成以下 HTML 代码：

<input id="myForm:myInput" type="text" name="myForm:myInput" onchange="alert('foobar');" />

如您所见，Ajax 代码不再添加。就我而言，这是一种非常奇怪的行为。如果事件已在输入字段中定义，为什么<a4j:support> 不附加 Ajax 调用？

所以我的问题是如何使<a4j:support> 在event 上工作，这已经在input 中定义？当然，解决方案必须同时运行onchange 和 Ajax 调用中定义的Javascript 代码。

换句话说，我想要以下 HTML：

<input id="myForm:myInput" type="text" name="myForm:myInput" onchange="alert('foobar'); A4J.AJAX.Submit(...)" />

我正在使用 Richfaces 3.3.2 和 JSF 1.2

编辑

当然，我可以在<a4j:support> 的onsubmit 属性中移动onchange Javascript 代码，这样做：

<h:inputText id="myInput">
    <a4j:support onsubmit="alert('foobar');" event="onchange" actionListener="#{myBean.doSomething}"/>
</h:inputText>

但这是唯一的方法吗？？

【问题讨论】：

标签： jsf richfaces ajax4jsf

【解决方案1】：

如果没有明确记录此行为，我会将其视为 Ajax4jsf 中的错误。向 JBoss.org 那边的 Ajax4jsf/RichFaces 人员报告。我以前用<a4j:commandButton onclick="someFunction()"> 遇到过seen 类似的问题

【讨论】：

我在 Richfaces 论坛上创建了一个帖子，至少可以了解这种行为是否是 RF 团队的预期行为...

【解决方案2】：

我之前已经遇到过这个问题，我发现 RichFaces 3.3.x 将只执行用 a4j:support 定义的 onchange 事件的代码，而忽略用 JSF 组件定义的 onchange 代码。

在我的情况下，解决方法很简单，在我的情况下，使用其他事件而不是“onchange”是有效的（不确定是 onclick 还是 onselect），所以我将我的代码附加到这个其他事件并且我的代码有效，但我不确定这是否适合你。如果你真的需要两个元素的 onchange 事件，你必须按照 BalusC 所说的去做，并将它报告给 RichFaces 人。

【讨论】：

这是一个可能的解决方案，但就我而言，它不适用（请参阅我的 answer 了解原因）。

【解决方案3】：

有关上下文的更多信息

事实上，我不能真正修改<a4j:support> 的event 值，就像Abel Morelos 建议的那样，因为我要做的是添加一个自定义组件来执行一些客户端验证.此验证调用了一个 Javascript 函数，因此我的自定义组件修改了其父级的 onchange 值。

我的 JSF 代码如下所示：

<h:inputText id="myInput">
    <my:validation .../>
    <a4j:support event="onchange" actionListener="#{myBean.doSomething}"/>
</h:inputText>

这段代码和下面的代码相当，只是<h:inputText>的onchange是我的组件自动添加的：

<h:inputText id="myInput" onchange="if (!checkSomeValidation()) { return false; }">
    <a4j:support event="onchange" actionListener="#{myBean.doSomething}"/>
</h:inputText>

所以大家可以理解，我的自定义组件直接修改了<h:inputText>的onchange事件，由于<a4j:support>的问题，Ajax调用没有绑定到最后输入组件。

解决方案

当链接到 JSF 组件时，<a4j:support> 会将自己“转换”为名称为 org.ajax4jsf.ajax.SUPPORTxxx 的 facet，其中 xxx 是 event 名称。所以在我的例子中，<h:inputText> 将有一个名为 org.ajax4jsf.ajax.SUPPORTonchange 的构面。

所以我在自定义组件的 Java 代码中所做的是检查父级（此处为 <h:inputText>）是否具有这样的方面。

如果no，则表示父级没有<a4j:support event="onchange"/>链接到它。所以在这种情况下，我修改了<h:inputText/>的onchange属性

如果是，则表示有一个<a4j:support event="onchange"/> 链接到父级。所以我使用以下代码修改了方面本身：

HtmlAjaxSupport facet = (HtmlAjaxSupport) getParent().getFacet("org.ajax4jsf.ajax.SUPPORTonchange");
if (facet != null) {
    facet.setOnsubmit("my Javascript code goes here");
} else {
    getParent().setOnchange("my Javascript goes here");
}

【讨论】：