10 Replies Latest reply on Jul 19, 2010 9:39 AM by lotif

    rich:dataTable sort problem

    lotif

      Hi people,

       

      I'm developing a website with JSF and richfaces for some time now and recently I found out that the sorting feature of all the rich:dataTable stop working with no apparent reason. I was assuming that the EJB integration recently added was the one to blame, but even with earlier versions with no EJB support the error appears. I was using the version 3.3.1 GA and switched to the version 3.3.3 Final, but the problem persists.

       

      It happens as follows: I have a form to trigger a search in the database to populate the DataModel for the table. The rich:dataTable is in another form along with 2 dataScrollers. The table loads fine, and the dataScrollers work fine too, but when I try to sort any of the columns, the data in the table disappears. This happens on all the dataTables in my applications, no matter if it is tiny or heavy loaded. No error appears in the java or javascript console, and I have no clue what can cause this.

       

      This is the code of one of the simplest dataTables I have:

       

      <h:form>
      <h:outputText id="errorMessage" value="#{userRegisterBean.errorMessage}" escape="false" />
      <a4j:keepAlive beanName="userRegisterBean"/>
      <c:if test="#{userRegisterBean.hasUsers}">
      <rich:datascroller renderIfSinglePage="false" align="center" for="userList" maxPages="20" reRender="sc2" id="sc1" />
      <rich:dataTable value="#{userRegisterBean.users}" var="dataItem" id="userList" rows="20" width="920" >
                              <!--onRowMouseOver="this.style.backgroundColor='#B5F3F'"
                              onRowMouseOut="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}'"
                              width="350"
                              rowClasses="row1, row2" rows="4" columnClasses="50,100,100,100" width="350" -->
                   
                          <rich:column sortBy="#{dataItem.company.name}" >
                              <f:facet name="header">
                                    <h:outputText value="#{msg['commons.general.company']}" />
                             </f:facet>
                             <h:outputText value="#{dataItem.company.name}" />
                         </rich:column>
                       
                         <rich:column sortBy="#{dataItem.name}">
                              <f:facet name="header">
      <h:outputText value="#{msg['commons.user.name']}" />
                             </f:facet>
                                    <h:outputText value="#{dataItem.name}" />
                         </rich:column>
                         
                         <rich:column sortBy="#{dataItem.login}">
                                 <f:facet name="header">
                                  <h:outputText value="#{msg['commons.user.login']}" />
                              </f:facet>
                              <h:outputText value="#{dataItem.login}" />
                         </rich:column>
                         
                         <rich:column sortBy="#{dataItem.email}">
                              <f:facet name="header">
                                   <h:outputText value="#{msg['commons.user.email']}" />
                             </f:facet>
                             <h:outputText value="#{dataItem.email}" />
                         </rich:column>
                     
                             <rich:column width="50">
                              <f:facet name="header">
                                       <h:outputText value="#{msg['commons.general.edit']}" />
                               </f:facet>
                               <div align="center">
                                   <h:commandLink action="#{userRegisterBean.doEdit}" >
                                   <img src="${facesContext.externalContext.request.contextPath}/images/edit.gif"
                                        width="16" height="16" title="#{msg['commons.general.edit']}"/>
      </h:commandLink>
      </div>
                          </rich:column>
                   
                          <rich:column width="50">
                          <f:facet name="header">
                              <h:outputText value="#{msg['commons.general.delete']}" />
                      </f:facet>
                      <div align="center">
                                 <h:commandLink action="#{userRegisterBean.doExclude}" rendered="#{dataItem.active}"
                                          onclick="javascript:return(confirm('#{msg['page.userRegister.deleteMessage']}#{dataItem.name}?'))" >
                                <img src="${facesContext.externalContext.request.contextPath}/images/delete.gif"
                                        width="16" height="16" title="#{msg['commons.general.deactivate']}" />
      </h:commandLink>
      </div>
                         </rich:column>
                    </rich:dataTable>
                  
                    <rich:datascroller renderIfSinglePage="false" align="center" for="userList" maxPages="20" reRender="sc1" id="sc2" />
                  
                </c:if>
                     </h:form>

       

       

       

      I'm using the following configuration: Java 1.6, Tomcat 6.0.26, MyFaces 1.2.7 (JSF 1.2) with facelets, richfaces 3.3.3, hibernate 3.4.0 GA, developed with Eclipse Galileo on Ubuntu Linux.

       

      Can someone point me what is possibly going wrong? I've googled a lot and found nothing interesting...

       

      Thank you.

        • 1. Re: rich:dataTable sort problem
          lotif

          I found out that the problem is an incompatibility with Google Chrome.

           

          https://community.jboss.org/thread/15661?start=15&tstart=0

           

          Is this a known issue?

          • 2. Re: rich:dataTable sort problem
            lotif

            I found a pretty interesting thing: if I remove the last two columns of my dataTable pointed above, the sorting works as expected in any browser, including Chrome.

             

            The faulty lines are the following:

             

             

            <rich:column width="50">
                                    <f:facet name="header">
                                             <h:outputText value="#{msg['commons.general.edit']}" />
                                     </f:facet>
                                     <div align="center">
                                         <h:commandLink action="#{userRegisterBean.doEdit}" >
                                         <img src="${facesContext.externalContext.request.contextPath}/images/edit.gif"
                                              width="16" height="16" title="#{msg['commons.general.edit']}"/>
            </h:commandLink>
            </div>
                                </rich:column>
                       
                                <rich:column width="50">
                                <f:facet name="header">
                                    <h:outputText value="#{msg['commons.general.delete']}" />
                            </f:facet>
                            <div align="center">
                                       <h:commandLink action="#{userRegisterBean.doExclude}" rendered="#{dataItem.active}"
                                                onclick="javascript:return(confirm('#{msg['page.userRegister.deleteMessage']}#{dataItem.name}?'))" >
                                      <img src="${facesContext.externalContext.request.contextPath}/images/delete.gif"
                                              width="16" height="16" title="#{msg['commons.general.deactivate']}" />
            </h:commandLink>
            </div>
            </rich:column>

             

            There should be an issue to solve this, since chrome is becoming an important browser and columns like this are pretty usual in many production sites out there.

            • 3. Re: rich:dataTable sort problem
              nbelaevski

              Hi Marcelo,

               

              Can you please do the following to diagnose the problem: add

               

              <a4j:log popup="false" /> 

               

              to the page, update table and check log contents for errors/warnings?

              1 of 1 people found this helpful
              • 4. Re: rich:dataTable sort problem
                lotif

                Apparently, there are no errors in this log. It is attached with this reply.

                • 5. Re: rich:dataTable sort problem
                  lotif

                  But seems like in Firefox, the log is a little bit longer, with some "replaces" and "updates" that are not shown when in chrome.

                  • 6. Re: rich:dataTable sort problem
                    nbelaevski

                    I was able to reproduce the problem locally. This happens because h:commandLink doesn't render xHTML-compatible code and have problems with re-rendering. Use a4j:htmlCommandLink instead.

                    1 of 1 people found this helpful
                    • 7. Re: rich:dataTable sort problem
                      lotif

                      Nick Belaevski wrote:

                       

                      I was able to reproduce the problem locally. This happens because h:commandLink doesn't render xHTML-compatible code and have problems with re-rendering. Use a4j:htmlCommandLink instead.

                      Thank you Nick! This solves the sorting problem, but there is another one. There is a javascript  confirmation dialog on my "exclude" link. When I click on the link, the dialog is shown correctly, but when I click on "Ok", the action method is not triggered on the server side. Why this is happening? With the h:commandLink, the link and the dialog works perfect.

                       

                      This is the difference between the generated HTML of both of them:

                       

                      h:commandLink:

                      <a href="#" onclick="var cf = function(){javascript:return(confirm('Deseja realmente excluir o usuário ?'))};var oamSF = function(){return oamSubmitForm('j_id60','j_id60:userList:0:j_id82');};return (cf()==false)? false : oamSF();">

                       

                      a4j:htmlCommandLink:

                      <a id="j_id60:userList:0:j_id82" href="#" onclick="javascript:return(confirm('Deseja realmente excluir o usuário ?'));return _JSFFormSubmit('j_id60:userList:0:j_id82','j_id60',null,{'j_id60:j_idcl':'j_id60:userList:0:j_id82'} )">

                      • 8. Re: rich:dataTable sort problem
                        lotif

                        Nothing more about this? Is this a bug on richfaces or what? Somebody can suggest another workaroud for the second problem?

                        • 9. Re: rich:dataTable sort problem
                          nbelaevski

                          Try the following onclick please:

                           

                          if (!confirm('...')) return false;

                          • 10. Re: rich:dataTable sort problem
                            lotif

                            Ok! that worked perfectly! Thank you!