如何使用带有 action 属性和 oncomplete 属性的 a4j:commandLink 来触发一些 JavaScript？

Question

我有一些代码可以在 Chrome、IE8 中运行，但不能在 FireFox 中运行。顺便说一句：我的 a4j: 命名空间是 a:

这个想法很简单，您希望在商品缺货时收到通知，因此您输入您的电子邮件，我们用一个简单的谢谢 div 替换小表单。

然而，在 FireFox 中，它通过操作和它的 bean 方法正确地汇总到数据库。然后 oncomplete 它会触发一个 JS 函数并显示感谢消息，但是我认为页面完成了重新加载并且原始表单重新出现，这是我们不想要的！

首先是首页codel中的RichFaces和Events

<h:inputText id="email" value="#{customer.stockWatch.email}"
    converter="TextTrimConverter"
    onfocus="if(this.value == 'Enter email address'){ this.value=''; }"
    onblur="if(this.value.trim() == ''){ this.value='Enter email address'; }"
    onkeypress="stockWatchEnterSubmit(event.keyCode);" />

<a:commandLink styleClass="b_submit" id="stockwatchSubmit"
    action="#{customer.stockWatch}"
    oncomplete="stockWatchTextChange(); return false;">
    <span>#{messages.submit}</span>
</a:commandLink>

现在是我使用的 2 个简单的 javascript 函数：

function stockWatchTextChange() {
    document.getElementById('fstockwatch').setAttribute('id', 'fstockwatch_thanks');
    document.getElementById('fstockwatch_thanks').innerHTML = 'Thank you. We\'ll send you an email once this item is back in stock';
}

function stockWatchEnterSubmit(keyCode) {
    if(keyCode == 13){
        document.getElementById('stockwatchSubmit').click();
    }
}

感谢您的帮助。让它在三分之二的浏览器中工作！但还不够好！！ ;)

JSF 是 1.2 版，而我认为 RichFaces 是 3.01？我找到了 RichFaces 的确切版本：
版本是richfaces-api-3.3.1.GA.jar

编辑： 我希望有更多我可以提供的信息。这实际上可能是 ajax4jsf / a4j 在网页上有多个单独的 a4j 逻辑时失败的情况......但问题是，它们显然都没有同时使用。所以像我所做的事情应该有效吗？接下来对代码进行一些更改：

<h:form id="detailForm" prependId="false">
<h:inputText id="email" value="#{customer.stockWatch.email}"
    converter="TextTrimConverter"
    onfocus="if(this.value == 'Enter email address'){ this.value=''; }"
    onblur="if(this.value == ''){ this.value='Enter email address'; }"
    onkeypress="if(event.keyCode == 13){document.getElementById('stockwatchSubmit').click(); if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}}" />

<a:commandLink styleClass="b_submit" id="stockwatchSubmit"
    action="#{customer.stockWatch}"
    oncomplete="stockWatchTextChange();">
    <span>#{messages.submit}</span>
</a:commandLink>
</h:form>

我现在也只使用一个JavaScript函数，那就是改变包装器div的id值（因为它会改变css），然后更新innerHTML。

另一条可能有助于解决此问题的信息是，我多次重写和重写 JSF/RICHFACES 以使其工作 --> 在所有浏览器中按 ENTER 键并单击提交按钮。 .

我会看到 action 属性根本不会触发 bean 中的方法。一旦你输入方法，我就有一个系统输出，所以我可以在我的控制台中看到它。而这并没有发生。我们的系统非常强大，所以我不知道该怎么想。除了a4j坏了吗？至少在我们正在运行的版本中.. 我的意思是这是非常简单的代码，并且 action 属性没有进入方法！ =)

我的意思是说，它有时确实有效，当我试图让它在所有浏览器上工作时，该方法确实会触发并将记录插入到数据库中。

但其他版本的代码根本不会触发 action 属性。这就是我想说的。

再次感谢大家！

Answer 1

您的具体问题是由输入键上的双重提交引起的。

在输入字段中有一个onkeypress 处理程序，当按下回车键时，它会在提交按钮上触发click 事件。但是您并没有阻止事件的默认行为（当没有 onkeypress 处理程序时会暴露）。显然，在 Firefox 中，使用命令链接提交 ajax 表单可以通过按 enter 来工作。

您基本上需要阻止事件的默认行为。实现此目的的最简单的跨浏览器方法是从 onkeypress 处理程序返回 false。

onkeypress="if (event.keyCode == 13) { document.getElementById('stockwatchSubmit').click(); return false; }"

如果你想将它重构为一个函数，让它返回一个布尔值。

onkeypress="return stockWatchEnterSubmit(event.keyCode)"

与

function stockWatchEnterSubmit(keyCode) {
    if (keyCode == 13) {
        document.getElementById('stockwatchSubmit').click();
        return false;
    } else {
        return true;
    }
}

Answer 2

一些想法：

1. 尝试显式设置commandLink 的reRender 属性，以防止重新渲染相关区域。
2. 尝试从您的commandLink 的oncomplete 中删除return false。
3. 您的操作在做什么？您确定 customerSession.stockWatch 操作不会以某种方式导致页面重新加载吗？