1 Reply Latest reply on Dec 22, 2011 11:09 AM by naveenm

    rich:scrollableDataTable - issue with rerendering - Table Id's are gone after reRendering on AJAX response

    naveenm

      Hello,

       

      I'm using RichFaces 3.3.3.Final version and deploying my app in Weblogic.

       

      I'm trying to do a custom sort, so I'm creating a link to the column "header" on click on which I will be calling a jsFunction which makes an Ajax call to the server to perform sorting and then reRender the scrollable data table.

       

       

      When the page renders for the first time the scrollableDataTable is populated correctly but once click on the header of a column to sort the sorting is working but on page render there is a javascript error and it loses the table headers, scrollbars and all the styles and alignment.

       

      Initially when the table is first rendered in the actual generated html of the table I see two table's created one for frozen columns and the id of that frozen columns table is somthing like "myform:myTable:f" and for the non frozen columns the table id is "myForm:myTable:n"

       

      After the Ajax response of the jsFunction those table id's are not generated but the rows within those tables still have the old orginially generated table id's.

       

      And the java script error is from the file ui.pack.js.xhtml line number 2814 for where it's checking for if(($K+":f")).rows.length) {M=[":f:",":n:"]\n}

       

      I understand the error is due to the id's are gone when the dom got reloaded on AJAX response but my concern is how come the table id's didn't get generated in response when they were generated fine when table is loaded for the first time?

       

      Below is a part of the code:

       

      rich:scrollableDataTable id="myTable"

       

      <f:facet name="header">

            <a4j:commandLink value="#{column.header}" onClick="jsFunctionSort('1', 'ASCENDING');" />

        </f:facet>

       

      <h:outputText value="#{column.value}" />

       

      </rich:scollableDataTable>

       

      <a4j:jsFunction id="jsFunctionSort" name="jsFunctionSort" reRender="myTable" rendered="true"

           action="#{testBean.sort} ignoreDupResponses="true">

           <a4j:actionParam name="param1" assignTo="#{testBean.columnNumToSort}"  />

           <a4j:actionParam name="param2" assignTo="#{testBean.columnSortOrder}" />

      </a4j:jsFunction>

       

       

                                                        

      Please help!