java - 如何使用a4j :commandLink with action attribute AND oncomplete attribute to fire some JavaScript?

Question

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

想法很简单，您希望在商品缺货时收到通知，因此您输入您的电子邮件，我们用一个简单的谢谢 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();
    }
}

感谢您的帮助。让它在 3 个浏览器中的 2 个中运行!但是还不够好!! ;)

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 中，通过按 enter 键提交带有命令链接的 ajax 表单。

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

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

如果您想将它重构为一个函数，让它返回一个 boolean 值。

onkeypress="return stockWatchEnterSubmit(event.keyCode)"

与

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