如何在执行 JSF <h:commandLink> 操作之前执行 Javascript？ [复制]答案

【问题标题】：How can I execute Javascript before a JSF <h:commandLink> action is performed? [duplicate]如何在执行 JSF <h:commandLink> 操作之前执行 Javascript？ [复制]
【发布时间】：2010-09-09 13:45:11
【问题描述】：

如果你有一个 JSF <h:commandLink>（它使用 <a> 的 onclick 事件来提交当前表单），你如何在执行操作之前执行 JavaScript（例如要求删除确认） ?

【问题讨论】：

@BalázsMáriaNémeth 你能向我解释一下他们是怎么做到的吗？
这个问题是关于 JSF 的，相关问题不是。不同的是，在javascript代码之后，在这种情况下，我们仍然想触发一个服务器动作，但在相关问题中是纯粹的客户端。
我已将此问题标记为重新打开。虽然这两个问题的答案都是取消“onclick”属性，但由于目标副本并没有说它也适用于 JSF，所以重定向到该页面的用户会感到困惑。

标签： javascript jsf

【解决方案1】：

可以这样简化

onclick="return confirm('Are you sure?');"

【讨论】：

有趣的是，if 构造是由具有一定经验的开发人员在下面的所有帖子中建议的......而且我正在向他们学习更有趣:)

【解决方案2】：

<h:commandLink id="myCommandLink" action="#{myPageCode.doDelete}">
    <h:outputText value="#{msgs.deleteText}" />
</h:commandLink>
<script type="text/javascript">
if (document.getElementById) {
    var commandLink = document.getElementById('<c:out value="${myPageCode.myCommandLinkClientId}" />');
    if (commandLink && commandLink.onclick) {
        var commandLinkOnclick = commandLink.onclick;
        commandLink.onclick = function() {
            var result = confirm('Do you really want to <c:out value="${msgs.deleteText}" />?');
            if (result) {
                return commandLinkOnclick();
            }
            return false;
        }
    }
}
</script>

其他 Javascript 操作（如验证表单输入等）可以通过将 confirm() 的调用替换为对另一个函数的调用来执行。

【讨论】：

【解决方案3】：

这对我有用：

<h:commandButton title="#{bundle.NewPatient}" action="#{identifController.prepareCreate}"  
                                             id="newibutton" 
                                             onclick="if(confirm('#{bundle.NewPatient}?'))return true; else return false;" 
                                             value="#{bundle.NewPatient}"/>

【讨论】：

可以简化为onclick="return confirm('Are you sure?')"。无需检查布尔值即可返回布尔值。直接退货就好了。
Primefaces 中是否有一种简单的方法可以使用<p:commandLink.../> 来实现上述功能？

【解决方案4】：

您仍然可以使用 onclick。 JSF render kit specification（参见编码行为）描述了链接应该如何处理它。这是重要的部分（它为 onclick 呈现的内容）：

var a=function(){/*your onclick*/}; var b=function(){/*JSF onclick*/}; return (a()==false) ? false : b();

所以你的函数不会被传递事件对象（无论如何这不是可靠的跨浏览器），但返回 true/false 会使提交短路。

【讨论】：

我无法将 onclick 属性添加到。我收到以下错误： org.apache.jasper.compiler.CompileException: /MyPage.jsp(164,4) 根据指定的 TLD 属性 onclick 无效我还在论坛上看到许多其他人请求这样的解决方案。

【解决方案5】：

在 JSF 1.2 中，您可以指定 onclick 事件。

此外，MyFaces 或 IceFaces 等其他库也实现了“onclick”处理程序。

你需要做的只是：

<h:commandLink action="#{bean.action}" onclick="if(confirm('Are you sure?')) return false;" />

注意：您不能只执行return confirm(...)，因为这将阻止 onClick 事件中的其余 JavaScript 发生，这将有效地阻止您的操作发生，无论用户返回什么！

【讨论】：

【解决方案6】：

如果您想在表单发布之前执行某些操作，例如进行确认，请尝试表单事件 onSubmit。比如：

myform.onsubmit = function(){confirm("really really sure?")};

【讨论】：

【解决方案7】：

这对我没有用，

 onclick="if(confirm('Are you sure?')) return false;" />

但确实如此

onclick="if(confirm(\"Are you sure?\"))return true; else return false;"

【讨论】：

我无法将 onclick 属性添加到。我收到以下错误： org.apache.jasper.compiler.CompileException: /MyPage.jsp(164,4) 根据指定的 TLD 属性 onclick 无效我还在论坛上看到许多其他人请求这样的解决方案。
@grant-wagner，我知道现在已经有很多年了，但也许你当时使用的实现已经坏了

【解决方案8】：

var deleteClick;
var mess="xxx";
function assignDeleteClick(link) {
    if (link.onclick == confirmDelete) {
        return;
    }
    deleteClick = link.onclick;
    link.onclick = confirmDelete;
}


function confirmDelete() {
    var ans = confirm(mess);
    if (ans == true) {
        return deleteClick();
    } else {
        return false;
    }
}

将此代码用于 jsf 1.1。

【讨论】：