如何在点击JSF按钮和阻止页面重新加载/导航时调用JS函数

Question

用JSF创建调用JS函数的按钮的首选方法是什么?

实际上我用的是:

<p:button onclick="myJSFunction();" href="#"/>

，但我的url后缀是锚符号(#)。

是否有另一种推荐的方式来创建按钮，它不会重新加载/导航到URL，但请调用JS函数?

Answer 1

这是因为它实际上是导航到#。您需要阻止按钮执行其默认操作，即导航到当前视图或href或outcome中指定的URL。您可以通过将return false;添加到onclick的末尾来实现这一点。

<p:button onclick="myJSFunction(); return false;" />

或者，如果myJSFunction()实际上返回了一个boolean，它应该决定按钮是否应该继续其默认动作，然后委托给它:

<p:button onclick="return myJSFunction();" />

<h:button>的工作方式完全相同，它只是在标准的外观和感觉。

另一种选择是使用<p:commandButton type="button">，它生成一个真正的<input type="button">，没有任何导航。这样你就不需要从onclick返回false了。

<p:commandButton type="button" onclick="myJSFunction()" />

这需要一个<h:form>(尽管把它放在任何形式之外不会破坏任何功能)。这同样适用于<h:commandButton>