分享

如何使用a4j:commandLink和action属性AND oncomplete属性来激活一些JavaScript?

 印度阿三17 2019-05-29

我有一些代码,我已经设法在Chrome,IE8,但不是FireFox. BTW:我的a4j:名称空间是:

这个想法很简单,你希望在物品缺货时得到通知,这样你就可以输入你的电子邮件,我们用一个简单的谢谢你替换这个小小的表格.

但是在FireFox中它通过动作和它的bean方法正确地汇总到数据库.然后oncomplete它会触发一个JS函数,并显示谢谢你的消息,然后页面完成重新加载,我认为原始形式重新出现,我们不想要!

首先是首页中的RichFaces和事件代码

<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>

现在我用的两个简单的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.03吗?我找到了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中触发方法.输入方法后我有一个sysout,所以我可以在我的控制台中看到它.而这种情况并没有发生.我们的系统非常强大,所以我不确定该怎么想.除了a4j坏了?至少在我们正在运行的版本中..我的意思是这是非常简单的代码,而action属性并没有使它成为方法! =)

我的意思是说,它确实有时工作,各种尝试,因为我试图让它在所有浏览器上工作,方法触发并将记录插入到数据库中.

但是动作属性的代码的其他修订根本不会触发.这就是我想说的.

再次感谢所有人!

解决方法:

您的具体问题是由输入密钥的双重提交引起的.

在输入字段中,您有一个onkeypress处理程序,当按下回车键时,它会触发提交按钮上的单击事件.但是你没有阻止事件的默认行为(就像没有onkeypress处理程序时那样).在Firefox中,显然,通过按Enter键提交带有命令链接的ajax表单.

您基本上需要阻止事件的默认行为.最简单的crossbrowser方法是从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;
    }
}

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多