4 Replies Latest reply on Mar 9, 2011 3:16 PM by traneti

    JSF RichFaces Facelets integration problem

    traneti

      I have a form inside <ui:define> which after authenticating as admin:admin is just setting a boolean that another RichFaces control checks in its rendered attribute. The problem is that after it does, all that appears in the page is:

       

      [code=java]

      <script>A4J.AJAX._scriptEvaluated=true;</script>[/code]

      instead of the RichFaces control.

       

      If I refresh the page, the control happily appears. If i refresh again the control remains and [code=java]

      <script>A4J.AJAX._scriptEvaluated=true;</script>[/code] dissapears

       

      This seems that Facelets doesn't integrate well with Ajax requests because when is switch to h:form and h:commandButton it works as espected. What should i do to make it work with Ajax?

       

      The page is:

       

      [code=java]<?xml version='1.0' encoding='UTF-8' ?>

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       

      <ui:composition template="/pages/templates/template.xhtml"

          xmlns="http://www.w3.org/1999/xhtml"

          xmlns:ui="http://java.sun.com/jsf/facelets"

          xmlns:h="http://java.sun.com/jsf/html"

          xmlns:f="http://java.sun.com/jsf/core"

          xmlns:a4j="http://richfaces.org/a4j"

          xmlns:rich="http://richfaces.org/rich">

       

          <ui:define name=%252526quot%25253Bheader%252526quot%25253B%252526gt%25253B

              <div id="topspacer">header</div>

          </ui:define>

          <ui:define name=%252526quot%25253Bcontent%252526quot%25253B%252526gt%25253B

              <div id="content">

                  <a4j:form ajaxSubmit="true" id="login">

                      <table>

                          <tr>

                              <td align="right"><h:outputText value="#{msg.username}" /></td>

                              <td><h:inputText id="username" value="#{loginBean.username}"

                                      required="true">

                                      <f:validateLength maximum="20" minimum="3" />

                                  </h:inputText>

                              </td>

                              <td><h:message for="username" style="color:red;" />

                              </td>

                          </tr>

                          <tr>

                              <td align="right"><h:outputText value="#{msg.password}" /></td>

                              <td><h:inputSecret id="password"

                                      value="#{loginBean.password}" required="true" />

                              </td>

                              <td><h:message for="password" style="color:red;" />

                              </td>

                          </tr>

                          <tr>

                              <td colspan="3"><a4j:commandButton value="#{msg.login}"

                                      action="#{loginBean.login}" reRender="admin_panel" />

                              </td>

                          </tr>

                      </table>

                  </a4j:form>

       

                  <rich:panel id="admin_panel" rendered="#{loginBean.isInAdmin}">

                      <a4j:form id="admin_form" ajaxSubmit="true">

                          <rich:messages style="color:red;" />

                          <table>

                              <tr>

                                  <td align="right"><h:outputText value="#{msg.username}" />

                                  </td>

                                  <td><h:inputText id="add_username"

                                          value="#{loginBean.addUsername}">

                                          <f:validateLength maximum="20" minimum="3" />

                                      </h:inputText>

                                  </td>

                                  <td><h:message id="add_username_message" for="add_username"

                                          style="color:red;" />

                                  </td>

                              </tr>

                              <tr>

                                  <td align="right"><h:outputText value="#{msg.password}" />

                                  </td>

                                  <td><h:inputSecret id="add_password"

                                          value="#{loginBean.addPassword}" />

                                  </td>

                                  <td><rich:message for="add_password" style="color:red;" />

                                  </td>

                              </tr>

                              <tr>

                                  <td align="right"><h:outputText value="#{msg.aisle}" />

                                  </td>

                                  <td><h:inputText id="add_aisle" value="#{loginBean.aisle}" />

                                  </td>

                                  <td><rich:message for="add_aisle" style="color:red;" />

                                  </td>

                              </tr>

                              <tr>

                                  <td colspan="3"><a4j:commandButton value="#{msg.add}"

                                          action="#{loginBean.add}" reRender="admin_panel" /></td>

                              </tr>

                              <tr>

                                  <td colspan="3"><a4j:commandButton value="#{msg.login}"

                                          action="#{loginBean.success}" />

                                  </td>

                              </tr>

                              <tr>

                                  <td colspan="3"><a4j:commandButton value="#{msg.cancel}"

                                          action="#{loginBean.cancel}" />

                                  </td>

                              </tr>

                          </table>

                      </a4j:form>

                  </rich:panel>

              </div>

          </ui:define>

          <ui:define name=%252526quot%25253Bfooter%252526quot%25253B%252526gt%25253B

              Add your footer here or delete to use the default

          </ui:define>

      </ui:composition>[/code]

       

      EDIT:

      lifecycle insight:

      [quote]10:12:29,318 INFO  [STDOUT] START PHASE RESTORE_VIEW 1

      10:12:29,334 INFO  [STDOUT] END PHASE RESTORE_VIEW 1

      10:12:29,334 INFO  [STDOUT] START PHASE APPLY_REQUEST_VALUES 2

      10:12:29,334 INFO  [STDOUT] is in admins

      10:12:29,334 INFO  [STDOUT] END PHASE APPLY_REQUEST_VALUES 2

      10:12:29,334 INFO  [STDOUT] START PHASE PROCESS_VALIDATIONS 3

      10:12:29,334 INFO  [STDOUT] is in admins

      10:12:29,334 INFO  [STDOUT] END PHASE PROCESS_VALIDATIONS 3

      10:12:29,334 INFO  [STDOUT] START PHASE UPDATE_MODEL_VALUES 4

      10:12:29,334 INFO  [STDOUT] is in admins

      10:12:29,334 INFO  [STDOUT] END PHASE UPDATE_MODEL_VALUES 4

      10:12:29,334 INFO  [STDOUT] START PHASE INVOKE_APPLICATION 5

      10:12:29,334 WARN  [InterceptorsFactory] EJBTHREE-1246: Do not use InterceptorsFactory with a ManagedObjectAdvisor, InterceptorRegistry should be used via the bean container

      10:12:29,334 WARN  [InterceptorsFactory] EJBTHREE-1246: Do not use InterceptorsFactory with a ManagedObjectAdvisor, InterceptorRegistry should be used via the bean container

      10:12:29,381 INFO  [STDOUT] Hibernate: select users0_.id as id16_, users0_.aisle as aisle16_, users0_.password as password16_, users0_.username as username16_ from USERS users0_ where users0_.username=%253F and users0_.password=?

      10:12:29,474 INFO  [STDOUT] is in login

      10:12:29,474 INFO  [STDOUT] END PHASE INVOKE_APPLICATION 5

      10:12:29,474 INFO  [STDOUT] START PHASE RENDER_RESPONSE 6

      10:12:29,474 INFO  [STDOUT] is in admins

      10:12:29,474 INFO  [STDOUT] is in admins

      10:12:29,474 INFO  [STDOUT] is in admins

      10:12:29,474 INFO  [STDOUT] is in admins

      10:12:29,474 INFO  [STDOUT] is in admins

      10:12:29,490 INFO  [STDOUT] is in admins

      10:12:29,490 INFO  [STDOUT] is in admins

      10:12:29,490 INFO  [STDOUT] END PHASE RENDER_RESPONSE 6[/quote]

        • 1. JSF RichFaces Facelets integration problem
          ilya_shaikovsky

          see that article from FAQ "client side updates" section.

          • 2. Re: JSF RichFaces Facelets integration problem
            traneti

            Thanks. I made some tests and it's not Facelets. But I still got the problem, eplaining below what i found out.

             

            Basicly when i remove the navigation rule, letting

            <a4j:form id="login" ajaxSubmit="true">

             

            and

             

            <a4j:commandButton value="#{msg.login}"

                                            action="#{loginBean.login}" />

             

            to handle showing the hidden control, it doesn't work because it can't find the control in the existing client page to render it in.

            Shouldn't AJAX put the control in DOM first at this time?

            debug[12:32:30,611]: Full response content:...

            then call it?

             

            Note: adding  reRender="admin_panel" on a4j:commandButton

            only shows one warning (instead of three):

            warn[12:51:44,948]: Node for replace by response with id admin_panel not found in document

             

            So how would I get AJAX to put the control in before telling it to render? I can't escape having to request it through JSF?

             

            <a4j:log level="ALL" popup="false" width="400" height="200"/>

            sais:

             

            debug[12:32:30,286]: Have Event [object Object] with properties: target: [object HTMLInputElement], srcElement: undefined, type: click

            debug[12:32:30,286]: Query preparation for form 'login' requested

            debug[12:32:30,287]: Append text control login:username with value [admin] and value attribute [admin]

            debug[12:32:30,287]: Append password control login:password with value [admin] and value attribute []

            debug[12:32:30,287]: Append hidden control login with value [login] and value attribute [login]

            debug[12:32:30,287]: Append hidden control autoScroll with value [] and value attribute []

            debug[12:32:30,287]: Append hidden control javax.faces.ViewState with value

            ...

            debug[12:32:30,288]: parameter login:j_id15 with value login:j_id15

            debug[12:32:30,288]: Look up queue with default name

            debug[12:32:30,288]: NEW AJAX REQUEST !!! with form: login

            debug[12:32:30,288]: Start XmlHttpRequest

            debug[12:32:30,288]: Request state : 1

            debug[12:32:30,289]: QueryString: AJAXREQUEST=

            ...

            debug[12:32:30,289]: Request state : 1

            debug[12:32:30,610]: Request state : 2

            debug[12:32:30,610]: Request state : 3

            debug[12:32:30,610]: Request state : 3

            debug[12:32:30,611]: Request state : 3

            debug[12:32:30,611]: Request state : 4

            debug[12:32:30,611]: Request end with state 4

            debug[12:32:30,611]: Response  with content-type: text/xml;charset=UTF-8

            debug[12:32:30,611]: Full response content:

            ...

            debug[12:32:30,612]: Header Ajax-Expired not found, search in <meta>

            debug[12:32:30,612]: search for elements by name 'meta'  in element #document

            debug[12:32:30,612]: Find <meta name='Ajax-Update-Ids' content='admin_form:j_id19,admin_form:j_id28,admin_form:j_id33'>

            debug[12:32:30,612]: Find <meta name='Ajax-Response' content='true'>

            debug[12:32:30,612]: Find <meta name='Ajax-Update-Ids' content='admin_form:j_id19,admin_form:j_id28,admin_form:j_id33'>

            debug[12:32:30,613]: Find <meta name='Ajax-Response' content='true'>

            debug[12:32:30,613]: Header Ajax-Update-Ids not found, search in <meta>

            debug[12:32:30,613]: search for elements by name 'meta'  in element #document

            debug[12:32:30,613]: Find <meta name='Ajax-Update-Ids' content='admin_form:j_id19,admin_form:j_id28,admin_form:j_id33'>

            debug[12:32:30,613]: Update page by list of rendered areas from response admin_form:j_id19,admin_form:j_id28,admin_form:j_id33

            debug[12:32:30,613]: search for elements by name 'script'  in element #document

            debug[12:32:30,613]: <script> in response with src=/pfWeb/a4j/g/3_3_3.Finalorg.ajax4jsf.javascript.AjaxScript.jsf

            debug[12:32:30,613]: Such element exist in document

            debug[12:32:30,613]: <script> in response with src=/pfWeb/a4j/g/3_3_3.Finalorg/ajax4jsf/javascript/scripts/form.js.jsf

            debug[12:32:30,614]: Such element exist in document

            debug[12:32:30,614]: <script> in response with src=/pfWeb/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/skinning.js.jsf

            debug[12:32:30,614]: Such element exist in document

            debug[12:32:30,614]: search for elements by name 'link'  in element #document

            debug[12:32:30,614]: <link> in response with src=/pfWeb/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/basic_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf

            debug[12:32:30,614]: Such element exist in document

            debug[12:32:30,615]: <link> in response with src=/pfWeb/a4j/s/3_3_3.Finalorg/richfaces/renderkit/html/css/extended_both.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf

            debug[12:32:30,615]: Such element exist in document

            debug[12:32:30,615]: <link> in response with src=/pfWeb/a4j/s/3_3_3.Finalcss/panel.xcss/DATB/eAF7sqpgb-jyGdIAFrMEaw__.jsf

            debug[12:32:30,615]: Such element exist in document

            debug[12:32:30,615]: <link> in response with src=/pfWeb/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/css/msg.css.jsf

            debug[12:32:30,615]: Such element exist in document

            debug[12:32:30,615]: <link> in response with src=/pfWeb/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/css/msgs.css.jsf

            debug[12:32:30,615]: Such element exist in document

            debug[12:32:30,616]: call getElementById for id= org.ajax4jsf.queue_script

            debug[12:32:30,616]: Update page part from call parameter for ID admin_form:j_id19

            debug[12:32:30,616]: call getElementById for id= admin_form:j_id19

            warn[12:32:30,616]: Node for replace by response with id admin_form:j_id19 not found in document

            debug[12:32:30,616]: Update page part from call parameter for ID admin_form:j_id28

            debug[12:32:30,616]: call getElementById for id= admin_form:j_id28

            warn[12:32:30,616]: Node for replace by response with id admin_form:j_id28 not found in document

            debug[12:32:30,616]: Update page part from call parameter for ID admin_form:j_id33

            debug[12:32:30,616]: call getElementById for id= admin_form:j_id33

            warn[12:32:30,616]: Node for replace by response with id admin_form:j_id33 not found in document

            debug[12:32:30,617]: call getElementById for id= org.ajax4jsf.oncomplete

            debug[12:32:30,617]: Processing updates finished, no oncomplete function to call

            debug[12:32:30,617]: call getElementById for id= ajax-view-state

            debug[12:32:30,617]: Hidden JSF state fields: [object HTMLSpanElement]

            debug[12:32:30,617]: Namespace for hidden view-state input fields is undefined

            debug[12:32:30,617]: search for elements by name 'input'  in element span

            debug[12:32:30,617]: Replace value for inputs: 6 by new values: 1

            debug[12:32:30,617]: Input in response: javax.faces.ViewState

            debug[12:32:30,618]: Found same input on page with type: hidden

            debug[12:32:30,618]: search for elements by name 'INPUT'  in element span

            debug[12:32:30,618]: Replace value for inputs: 6 by new values: 0

            debug[12:32:30,618]: call getElementById for id= _A4J.AJAX.focus

            debug[12:32:30,618]: No focus information in response

             

            Message was edited by: Tudor Raneti

            • 3. Re: JSF RichFaces Facelets integration problem
              ilya_shaikovsky

              it's not related to facelets. And you do not need either action or ajaxSubmit at form (just remove them). main point if the article that you should not reRender conditionally rendered component but add parent (always rendered placeholder) and update it when need to show/hide the component.

              • 4. Re: JSF RichFaces Facelets integration problem
                traneti

                Thank you, it's fixed. True, i don't need ajaxSubmit.

                 

                Doc:

                The                            <a4j:form>                        component adds extra functionality to non-Ajax action/command components: submission is performed            via Ajax when                            "ajaxSubmit"                        attribute set to "true".

                 

                But that's because i was jumping back and forth between RichFaces and JSF commandButton.

                 

                I need action(I think) on that submit because of the logic I made: regular user goes to next page, admin stays to see an admin panel then login to next page.

                 

                I've fixed my problem changing this:

                <rich:panel id="admin_panel" rendered="#{loginBean.isInAdmin}"

                     <a4j:form id="admin_form" ajaxSubmit="true"

                     ...

                 

                to this:

                 

                <a4j:outputPanel id="admin_panel">

                        <a4j:form id="admin_form" ajaxSubmit="true" rendered="#{loginBean.isInAdmin}">

                ...

                 

                Message was edited by: Tudor Raneti