8 Replies Latest reply on Nov 23, 2007 1:05 PM by diegocoronel

    Wrong render with ajax

    diegocoronel

      Hey, i got this situation, when my commandLink is rendered by ajax they are not correct, but when i render this same commandLink without ajax its correct, my codes:

      this is da page that include my commandLink

      <ui:composition 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:s="http://jboss.com/products/seam/taglib"
       xmlns:a4j="http://richfaces.org/a4j"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:fpf="http://www.fpf.br/jsf"
       xmlns:c="http://java.sun.com/jstl/core">
      
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       </head>
      
       #{br.fpf.components.masterDetail.MasterDetailController.addLista(detailList)}
       #{br.fpf.components.masterDetail.MasterDetailController.initObject(type)}
      
       <h:panelGrid columns="1" id="panelGrid" width="100%">
       <a4j:region selfRendered="true" rendered="#{br.fpf.components.masterDetail.MasterDetailController.state == 0}">
       <ui:include src="/components/fpf_masterDetail/fpf_gridMasterDetail.xhtml" />
       </a4j:region>
       </h:panelGrid>
      
       <h:panelGrid columns="1" width="100%" id="panelUpdate">
       <a4j:region selfRendered="true" rendered="#{br.fpf.components.masterDetail.MasterDetailController.state == 1}">
       <ui:include src="/components/fpf_masterDetail/fpf_updateMasterDetail.xhtml" />
       </a4j:region>
       </h:panelGrid>
      
      </ui:composition>
      


      this is the page With my commandLink
      <ui:composition 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:s="http://jboss.com/products/seam/taglib"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:fpf="http://www.fpf.br/jsf"
       xmlns:c="http://java.sun.com/jstl/core">
      
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       </head>
      
       <ui:insert name="update_form"/>
       <h:panelGrid columns="2">
       <a4j:commandLink reRender="panelGrid, panelUpdate" action="#{br.fpf.components.masterDetail.MasterDetailController.update()}">
       <fpf:fpf_button labelButton="Update" id="b1321" />
       </a4j:commandLink>
       <a4j:commandLink reRender="panelGrid, panelUpdate" action="#{br.fpf.components.masterDetail.MasterDetailController.cancelStateUpdate()}" immediate="true">
       <fpf:fpf_button labelButton="Cancelar" id="b232132" />
       </a4j:commandLink>
       </h:panelGrid>
      
      </ui:composition>
      


      this is the page that will render my commandLink
      <ui:composition 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:s="http://jboss.com/products/seam/taglib"
       xmlns:rich="http://richfaces.org/rich"
       xmlns:fpf="http://www.fpf.br/jsf"
       xmlns:c="http://java.sun.com/jstl/core">
      
       <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       </head>
      
       <fpf:fpf_grid dados="#{detailList}">
       <ui:insert name="grid" />
       <h:column>
       <a4j:commandLink reRender="panelGrid,panelUpdate" action="#{br.fpf.components.masterDetail.MasterDetailController.changeStateUpdate}">
       Editar
       <f:setPropertyActionListener value="#{item}" target="#{br.fpf.components.masterDetail.MasterDetailController.detail}" />
       </a4j:commandLink>
       </h:column>
       <h:column>
       Excluir
       </h:column>
       </fpf:fpf_grid>
      
      </ui:composition>
      


      this is the code with ajax render, we can see that my link opens and close and the content isnt inside the link --> thats wrong
      <a id="j_id12:j_id85" href="#" name="j_id12:j_id85" onclick="A4J.AJAX.Submit('j_id12:j_id80','j_id12',event,{'parameters':{'j_id12:j_id85':'j_id12:j_id85'} ,'actionUrl':'/components/test/fpf_masterDetail/masterDetail.seam'} );return false;"/>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <link rel="stylesheet" type="text/css" href="/components/components/fpf_button/css/fpf_button.css">
      </link>
      <script language="JavaScript" type="text/javascript" src="/components/components/fpf_button/script/fpf_button.js">
      </script>
      <table cellspacing="0" cellpadding="0" border="0">
      <tbody>
      <tr>
      <td id="leftCornerb1321" class="fundoEsq" width="7" valign="middle" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')"/>
      <td id="fpf_Buttonb1321" class="fundoMeio" valign="middle" height="28" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')">
      <div id="labelButtonb1321" class="txtButton"> Update </div>
      </td>
      <td id="rightCornerb1321" class="fundoDir" width="7" valign="middle" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')"/>
      </tr>
      </tbody>
      </table>
      


      this is the code without ajax, i did a refresh in the page, we can see that my link open, my content is inside than my link close
      <a id="j_id12:j_id34" href="#" name="j_id12:j_id34" onclick="A4J.AJAX.Submit('j_id12:j_id29','j_id12',event,{'parameters':{'j_id12:j_id34':'j_id12:j_id34'} ,'actionUrl':'/components/test/fpf_masterDetail/masterDetail.seam'} );return false;">
      <head>
      </head>
      <table cellspacing="0" cellpadding="0" border="0">
      <tr>
      <td id="leftCornerb1321" class="fundoEsq" width="7" valign="middle" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')"/>
      <td id="fpf_Buttonb1321" class="fundoMeio" valign="middle" height="28" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')">
      <div id="labelButtonb1321" class="txtButton"> Update </div>
      </td>
      <td id="rightCornerb1321" class="fundoDir" width="7" valign="middle" onmouseover="goLite('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')" onmouseout="goDim('labelButtonb1321','fpf_Buttonb1321','leftCornerb1321','rightCornerb1321')"/>
      </tr>
      </table>
      </a>
      


      So, is this a bug ? or i need to do something ?

        • 1. Re: Wrong render with ajax

          I do not see the form element in your code snippets

          • 2. Re: Wrong render with ajax
            diegocoronel

            sry, here is my main page:

            <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <ui:composition xmlns="http://www.w3.org/1999/xhtml"
             xmlns:s="http://jboss.com/products/seam/taglib"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:rich="http://richfaces.org/rich"
             xmlns:a4j="http://richfaces.org/a4j"
             xmlns:fpf="http://www.fpf.br/jsf"
             template="/layout/template.xhtml">
            
            <ui:define name="body">
            
            <h:form>
            
             <h:messages globalOnly="true" styleClass="message"/>
            
             <rich:tabPanel>
             <rich:tab label="Filhos" rendered="true">
             <fpf:fpf_masterDetail detailList="#{masterDetailTest.pessoa.listaFilho}"
             type="br.fpf.test.fpf_masterdetail.Filho"
             confirmDelete="true">
            
             <ui:define name="grid">
             <h:column>
             #{item.nome}
             </h:column>
             </ui:define>
            
             <ui:define name="form">
             Nome <h:outputText value="#{br.fpf.components.masterDetail.MasterDetailController.detail.nome}"></h:outputText>
             </ui:define>
            
             <ui:define name="update_form">
             Nome <h:inputText value="#{detail.instance.nome}"></h:inputText>
             </ui:define>
            
             </fpf:fpf_masterDetail>
            
             </rich:tab>
             </rich:tabPanel>
            
            </h:form>
            </ui:define>
            </ui:composition>
            
            


            • 3. Re: Wrong render with ajax

              you need to use a4j:form if you use link inside re-rendered area

              See http://livedemo.exadel.com/richfaces-demo/richfaces/form.jsf for explanation why so.

              • 4. Re: Wrong render with ajax
                ilya_shaikovsky

                And if you think that some coorections that was made by filter - is wrong - just check your "ok" code with Tidy html validator.

                • 5. Re: Wrong render with ajax
                  diegocoronel

                  so, i tried with ajax form and htmlCommandLink, but im still with this situation,

                  with reRender my content is not inside the link

                  <a id="j_id12:j_id149" href="#" onclick="return _JSFFormSubmit('j_id12:j_id149','j_id12',null,{} )"/>
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> --> should it close here ?
                  
                  <link rel="stylesheet" type="text/css" href="/components/components/fpf_button/css/fpf_button.css">
                  </link>
                  <script language="JavaScript" type="text/javascript" src="/components/components/fpf_button/script/fpf_button.js">
                  </script>
                  <table cellspacing="0" cellpadding="0" border="0">
                  <tbody>
                  <tr>
                  <td id="leftCornerb2" class="fundoEsq" width="7" valign="middle" onmouseover="goLite('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')" onmouseout="goDim('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')"/>
                  <td id="fpf_Buttonb2" class="fundoMeio" valign="middle" height="28" onmouseover="goLite('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')" onmouseout="goDim('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')">
                  <div id="labelButtonb2" class="txtButton"> Cancelar </div>
                  </td>
                  <td id="rightCornerb2" class="fundoDir" width="7" valign="middle" onmouseover="goLite('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')" onmouseout="goDim('labelButtonb2','fpf_Buttonb2','leftCornerb2','rightCornerb2')"/>
                  </tr>
                  </tbody>
                  </table>
                  


                  and with refresh my content is inside the link
                  <a id="j_id12:j_id47" href="#" onclick="return _JSFFormSubmit('j_id12:j_id47','j_id12',null,{} )"> --> here its correct, not closing
                  <head>
                  </head>
                  <table cellspacing="0" cellpadding="0" border="0">
                  <tr>
                  <td id="leftCornerb1" class="fundoEsq" width="7" valign="middle" onmouseover="goLite('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')" onmouseout="goDim('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')"/>
                  <td id="fpf_Buttonb1" class="fundoMeio" valign="middle" height="28" onmouseover="goLite('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')" onmouseout="goDim('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')">
                  <div id="labelButtonb1" class="txtButton"> Salvar </div>
                  </td>
                  <td id="rightCornerb1" class="fundoDir" width="7" valign="middle" onmouseover="goLite('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')" onmouseout="goDim('labelButtonb1','fpf_Buttonb1','leftCornerb1','rightCornerb1')"/>
                  </tr>
                  </table>
                  </a>
                  


                  and my main page with ajax form,

                  <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                  <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                   xmlns:s="http://jboss.com/products/seam/taglib"
                   xmlns:ui="http://java.sun.com/jsf/facelets"
                   xmlns:f="http://java.sun.com/jsf/core"
                   xmlns:h="http://java.sun.com/jsf/html"
                   xmlns:rich="http://richfaces.org/rich"
                   xmlns:a4j="http://richfaces.org/a4j"
                   xmlns:fpf="http://www.fpf.br/jsf"
                   template="/layout/template.xhtml">
                  
                  <ui:define name="body">
                  
                  <a4j:form>
                  
                   <h:messages globalOnly="true" styleClass="message"/>
                  
                   <rich:tabPanel>
                   <rich:tab label="Filhos" rendered="true">
                   <fpf:fpf_masterDetail detailList="#{masterDetailTest.pessoa.listaFilho}"
                   type="br.fpf.test.fpf_masterdetail.Filho"
                   confirmDelete="true">
                  
                   <ui:define name="grid">
                   <h:column>
                   #{item.nome}
                   </h:column>
                   </ui:define>
                  
                   <ui:define name="form">
                   Nome <h:outputText value="#{br.fpf.components.masterDetail.MasterDetailController.detail.nome}"></h:outputText>
                   </ui:define>
                  
                   <ui:define name="update_form">
                   Nome <h:inputText value="#{br.fpf.components.masterDetail.MasterDetailController.detail.nome}"></h:inputText>
                   </ui:define>
                  
                   <ui:define name="detail_form">
                   Nome <h:outputText value=""></h:outputText>
                   </ui:define>
                  
                   <ui:define name="delete_form">
                   Nome <h:outputText value=""></h:outputText>
                   </ui:define>
                  
                   <ui:define name="insert_form">
                   Nome <h:inputText value="#{br.fpf.components.masterDetail.MasterDetailController.detail.nome}"></h:inputText>
                   </ui:define>
                  
                   </fpf:fpf_masterDetail>
                  
                   </rich:tab>
                   </rich:tabPanel>
                  
                  </a4j:form>
                  </ui:define>
                  </ui:composition>
                  
                  


                  so, is there another workaround ?

                  PS: ty for your answers... :)


                  • 6. Re: Wrong render with ajax
                    diegocoronel

                    sry, i forgot to show my page with htmlCommandLink

                    <ui:composition 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:s="http://jboss.com/products/seam/taglib"
                     xmlns:rich="http://richfaces.org/rich"
                     xmlns:fpf="http://www.fpf.br/jsf"
                     xmlns:c="http://java.sun.com/jstl/core">
                    
                     <head>
                     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                     </head>
                    
                     <ui:insert name="insert_form"/>
                     <h:panelGrid columns="2">
                    
                     <a4j:htmlCommandLink reRender="panelGrid, panelInsert" action="#{br.fpf.components.masterDetail.MasterDetailController.cadastrar()}">
                     <fpf:fpf_button labelButton="Salvar" id="b1" />
                     </a4j:htmlCommandLink>
                     <a4j:htmlCommandLink reRender="panelGrid, panelInsert" action="#{br.fpf.components.masterDetail.MasterDetailController.cancelStateUpdate()}" immediate="true">
                     <fpf:fpf_button labelButton="Cancelar" id="b2" />
                     </a4j:htmlCommandLink>
                     </h:panelGrid>
                    
                    </ui:composition>
                    


                    • 7. Re: Wrong render with ajax
                      diegocoronel

                      i tried with

                      <a4j:htmlCommandLink reRender="panelGrid, panelInsert" action="#{br.fpf.components.masterDetail.MasterDetailController.cadastrar()}">
                       Salvar
                       </a4j:htmlCommandLink>
                      


                      and it works, is this a facelets problem or richfaces ? or my problem ;)?

                      • 8. Re: Wrong render with ajax
                        diegocoronel

                        should i open a jira issue ?