0

I am learning JSF and want to integrate it with jQuery. But it is not working properly as page is refreshed on its own. I have tried e.preventDefault and e.stopPropagation too, but without success.

Here is jQuery code: 

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

and here is xHTML part:

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

I am trying to apply jQuery function on #button1.

4

2 回答 2

0

更新：感谢您指出我的错误！

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

尝试这个。

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

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

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

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

于 2013-07-22T13:13:55.320 回答
0

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

呈现“按钮”类型的 HTML“输入”元素。组件的值呈现为按钮文本，组件的结果用于确定由 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>标签来达到预期的效果。

于 2013-07-22T12:28:25.753 回答