Как остановить функцию jQuery, которая обновляет страницу в JSF?

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; 
     }); 
    }); 
}); 

и вот часть одной рубрике:

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

Я пытаюсь применить функцию JQuery на #button1.

Answer 1

Согласно документации, <h:button> тег

делает элемент HTML «вход» на «кнопки» типа. Значение компонента отображается как текст кнопки, а результат компонента используется для определения целевого URL, который активируется onclick ... если этот результат (результат) равен нулю, пусть результат будет viewId текущего UIViewRoot

другими словами, этот тег генерирует 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/.