4

我有一些代码可以在 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();
    }
}

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

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 属性根本不会触发。这就是我想说的。

再次感谢大家！

4

2 回答 2

4

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

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

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

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;
    }
}
于 2012-11-02T13:54:13.420 回答
2

一些想法：

  1. 尝试显式设置reRender您的属性commandLink以防止重新渲染相关区域。
  2. 尝试return false从oncomplete您的commandLink.
  3. 你的动作在做什么？您确定该customerSession.stockWatch操作不会以某种方式导致页面重新加载吗？
于 2012-10-30T17:01:12.523 回答