1

I have this application written in JSF 2.0 facelets and it has the following code that supposed to display some content in an area which a jQuery slide controls, meaning that you press a button that displays that area and press it again to hide it

<f:ajax render="messageID">
      <h:form id="myform" styleClass="form1" >
          <h:message id="messageID" for="signinemail" class="messageforlogin"/>
          <h:panelGrid styleClass="loginpanel" columns="2" cellspacing="4">

          <h:outputText value="Email: "/>
          <h:inputText class="textboxes"  size="20" id="signinemail" 
                      value="#{signinBean.email}" 
                      validatorMessage="Invalid Email, Try Again">
              <f:validateRegex pattern="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"/>

          </h:inputText>

As you can see there is an error message that should be displayed if the email is not typed correctly, and as i said before this area is controlled with a jquery.slidetoggle function and button that makes it a slide to input the stuff in,

The thing is when the use presses the submit button(not shown here) the slide freezes and no error message is displayed,When i remove the "ajax" the message is displayed but the slide disappears and you have to press the toggle button again to see the slide with the error messages, i have done this in the same page but with out a slide and it wokrs very fine.

Is there away to display the slide and the error messages on it ???

engma
  • 1,849
  • 2
  • 26
  • 55

1 Answers1

2

The jQuery script which is responsible for setting the slides should be re-executed when the JSF ajax request completes, simply because the ajax response changes/replaces elements in the HTML DOM tree with new elements retrieved from the server which in turn of course do not contain those jQuery-initialized event handlers anymore. The jQuery script is not auto-executed everytime when the ajax request completes, but only whenever you refresh the page.

You just need to re-invoke your jQuery function in the JSF ajax event callback handler as follows:

jsf.ajax.addOnEvent(function(data) {
    if (data.status == "success") {
        yourjQueryFunctionWhichAddsTheSlideEvents();
    }
});

An alternative is to use OmniFaces' <o:onloadScript>.

<o:onloadScript>yourjQueryFunctionWhichAddsTheSlideEvents();</o:onloadScript>

This way you also don't need a $(document).ready() anymore.

Community
  • 1
  • 1
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • i am using JSF with netbeans 7, how to use the jsf.ajax from it, i tried to find it, but it says that i should use tag, can this be done with this tag as well ?? – engma Jun 22 '12 at 12:32
  • The given first block of code is just JS code. Put or load it in `` or ` – BalusC Jun 22 '12 at 12:38
  • i was talking about the jsf.ajax library is it included implicitly ? – engma Jun 22 '12 at 12:42
  • 1
    You was not clear about that. Yes, it's auto-included whenever you use ``. It's that `jsf.js` file from the `javax.faces` library. If you ever need to include it explicitly, use ``. – BalusC Jun 22 '12 at 12:47