Question

我正在学习JSF，并希望将它与jQuery集成。但由于页面本身已刷新，因此无法正常工作。我也尝试了e.preventDefault和e.stopPropagation，但没有成功。

这是jQuery代码：

$(document).ready(function(){
    $("#form2\\:button1").click(function(){
        $("#form2\\:div1").toggle("slow",function(e){
            //e.preventDefault;
            //e.stopPropagation;
            return false;
        });
    });
});

这里是xHTML部分：

<h:form name="form1" id="form2">
    <h:outputLabel value="Enter Date"></h:outputLabel>
    <h:inputText value="#{test.date }"></h:inputText>
    <h:commandButton action="#{test.doWork}" value="Submit Form"></h:commandButton>
    <h:button id="button1" value="Action"></h:button>
    <h:panelGroup layout="block" id="div1">
        <h:commandLink id="link1"  value="Edit Details"></h:commandLink>
        <h:commandLink id="link2"  value="Manage mails" > </h:commandLink>
    </h:panelGroup>
</h:form>

我正在尝试在#button1上应用jQuery函数。

Answer 1

根据文档，<h:button>标记

呈现“button”类型的HTML“input”元素。组件的值呈现为按钮文本，组件的结果用于确定由onclick激活的目标URL ...如果此结果（结果）为null，则让结果为当前UIViewRoot的viewId

换句话说，此代码会生成一个input元素，其中包含JavaScript重定向（通过指定window.location.href）到其outcome属性中指定的导航案例结果，或者未指定outcome属性的当前页面。所以，现在您应该了解页面刷新的原因。

如果您不希望重定向发生，只需从false方法返回onclick，如下所示：

<h:button id="button1" value="Action" onclick="$('#form2\\:div1').toggle('slow');return false;"/>

这同样适用于您的jQuery代码。

否则，您可以简单地考虑使用纯HTML <button>标记来实现所需的效果。

Answer 2

更新：谢谢你指出我的错误！

事件的预防应该在onclick回调中发生，而不是在toggle回调中。

试试这个。

$(document).ready(function(){
    $("#form2\\:button1").click(function(){ 

        $("#form2\\:div1").toggle("slow"); 

        //e.preventDefault;
        //e.stopPropagation;
        return false;
    });
});

这是一个小提琴：http://jsfiddle.net/PNcZS/1/。

如何在JSF中停止刷新页面的jQuery函数？

2 个答案: