如何使用 javascript/JQuery 在 jsf 页面上调用隐藏按钮答案

【问题标题】：How to call hidden button on a jsf page with javascript/JQuery如何使用 javascript/JQuery 在 jsf 页面上调用隐藏按钮
【发布时间】：2013-07-24 12:48:20
【问题描述】：

我发现这个问题已经以不同的形式被问过好几次了，但我仍然需要一些帮助，因为无法像示例中那样得到这个。

我有一个带有 PrimeFaces 的 JSF 2 页面，它包含以下隐藏按钮，我需要从 javascript 在 pageUnLoad 上调用该按钮。

JSF 有：

// Supposed to be hidden eventually
<h:commandButton id="doStuff" action="#{myBean.callMethod()}" />

javascript有：

var stuff = new Object();

$(window).bind('beforeunload', function() {
    stuff.doStuff();
});

stuff.doStuff = function() {
    // var hidden = $("#doStuff"); // Incorrect
    var hidden = document.getElementById("formId:doStuff"); // Correct
    if (hidden === undefined) {
            // Some logging
    } else {
        hidden.click();
    }
}

并且 managedBean 有：

@ManagedBean(name = "myBean")
@RequestScoped
public class MyBean {
    public void callMethod() {
        // Do stuff
    }
}

通过调试我可以看到，当手动单击按钮时，它会正确触发事件。我还能够验证 JavaScript 是否被正确调用，它“似乎”找到了元素，并为其执行了“.click()”，但我没有在服务器端捕获任何事件。

我似乎正在按照其他类似问题中的指示进行操作，但我缺少最终结果。

任何帮助将不胜感激，谢谢。

【问题讨论】：

jQuery 不能调用非 jQuery 定义的点击函数。您需要在单击时向服务器发送一个 ajax 请求，然后将结果发回。或者您需要将该数据预先填充到 JS 变量中，并在使用 jQuery 定义点击函数后在点击时从变量中提供数据。

标签： javascript jquery jsf-2 primefaces

【解决方案1】：

隐藏按钮可以通过类似 JavaScript 的方式点击

document.getElementById('doStuff').click();

但是，您应该小心命名容器。隐藏按钮必须用<h:form> 标签括起来，并且它的prependid 属性应该设置为false。否则，您可以访问 ID 为 formId:doStuff 的按钮。

另请参阅

Naming Container in JSF2/PrimeFaces

Cannot click hidden button by JavaScript

【讨论】：

一些不愉快的事实，我不知道 JQuery。在用提供的链接教育我自己并像你说的那样做之后让它工作。谢谢。
因为我在点击调用之后收到了警报（以便我能够检查它是否真的被调用），所以事件被触发并在服务器端捕获。此外，当将警报更改为 console.log 并用断点标记它时，它也可以工作（它会在使用 FireFox FireBug 的断点时卡住等待）。但是，当我删除警报/断点时，它停止工作。 javascript / DOM 处理的另一个可爱功能。恢复其中任何一个都使它再次工作。其他解决方案也可能是这种情况（下面的其他答案）。
只是为了双重确认这种行为。添加断点 => 有效。删除断点 => 不起作用。
我从未见过这样的情况。它应该可以在没有断点的情况下工作。但是，在返回操作之前可能会出现一些异常。
当我停止看它的那一刻，它就坏了。解决方案是正确的，但是发现这种不愉快的行为后我无法使用它。我还发现整个 'onbeforeunload' 事件不适用于歌剧（至少我当前的版本）stackoverflow.com/questions/390260/onbeforeunload-in-opera

【解决方案2】：

有一种更简单的方法可以从 javascript 调用服务器端方法。定义一个p:remoteCommand，Primefaces 将创建一个 JavaScript 函数，您可以从 JavaScript 函数内部调用它。

使用以下内容定义远程命令：

<p:remoteCommand name="doStuff" action="#{myBean.callMethod()}"/>

然后调用 beforeunload 上的 bean-method 只需使用：

$(window).bind('beforeunload', doStuff);

【讨论】：

不能保证此调用成功地到达服务器。但这是一个不同的问题。
我简单地尝试了这个，但没有立即工作。我相信这也是一个可行的解决方案，但由于第一个答案已经奏效，我接受了它（这也是对我的问题的更直接的答案）。只是关于这个的问题。绑定应该（或不应该）在 onReady 函数中吗？ $(document).ready(function() { $(window).bind('beforeunload', doStuff); });
我认为在window.onload中添加事件监听器是一个好习惯。