extendedDataTable stuck on loading

[rama.n]

I have setup a simple test case extendedDataTable as shown below, the backing bean is a seam component and provides access to a list of data for the table. However when the table is render it seems to get stuck on the richfaces loading splash screen.

XHTML:

<rich:extendedDataTable
 id="myTable"
 sortMode="single"
 rows="#{testBean.testMessages.size()}"
 rendered="#{true}"
 rowClasses="even,odd"
 value="#{testBean.testMessages}"
 var="msg"
 selectionMode="none"
 styleClass="list" >

<!-- Column-->
 <rich:column id="datacol">
 <f:facet name="header">
 <h:outputText value="DATA" />
 </f:facet>
 <h:outputText value="#{msg.data}" />
 </rich:column>
</rich:extendedDataTable>

BACKING BEAN: test data is simply an object with a string, that provides getData and setData

@Name("testBean")
@Stateful
@Scope(ScopeType.SESSION)
public class testBean implements testBeanI {
 private List<testData> testMessages = new ArrayList<testData>();

 public testBean()
 {
 for(Integer i = 0; i < 5; ++i)
 testMessages.add(new testData(i.toString()));
 }

 public List<testData> getTestMessages() { return testMessages; }
 public void setTestMessages(List<testData> data) { testMessages = data; }
}

Now when I load my page I get the richfaces loading splash screen and nothing loads on the page, I went onto inspect the element using Firebug and saw that the data table did exist in the HTML and all the items that I added from the list were present under li tags and the coressponding data was there too.

This suggests to me that richfaces never acknowledges that the table loading is complete so continues displaying the spash loading screen, I am preety sure there is not problems with the backing bean, can anybody advise?

[ilya_shaikovsky]

which RF version you using? We've already fixed a few issues caused such behavior for 3.3.1GA.

[rama.n]

Hi there,

thanks for the quick response, the version of richfaces we are using is 3.3.1.GA. We do have an extendedDataTable deployed in this same project on another page which is rendering the data, the setup I have for this test case scenerio is virutally identical, but just stripped down which is what is confusing me the most.

There is two errors that appear on firebug but I am not sure how helpful they are:

k.attachEvent is not a function
k.dispatchEvent is not a function

The inspected element looks like this after transformation:

<div id="myTable:innerd" class="extdt-innerdiv" style="height: 100%; width: 100%;">
<div id="myTable:cs" class="extdt-hsplit" style="display: none;"/>
<table id="myTable:tu" class="extdt-table-layout rich-table list" width="100%" cellspacing="0" cellpadding="0">
<colgroup id="myTable:colgroup:header">
<col width="100"/>
<col/>
</colgroup>
<thead id="myTable:header" class="extdt-thead">
<tr id="myTable:fakeIeRow" class="extdt-header rich-extdt-header">
<th class="extdt-headercell extdt-fakeierow rich-extdt-headercell"/>
<th class="extdt-headercell extdt-fakeierow rich-extdt-headercell"/>
</tr>
<tr id="myTable:headerRow" class="extdt-subheader rich-extdt-subheader">
<th id="myTable:datacol" class="extdt-menucell extdt-subheadercell rich-extdt-subheadercell" sortable="false" scope="col">
<div id="myTable_hdrag_datacol">
<div id="myTable:datacol:sortDiv">
<span class="extdt-sortable-header">
DATA
<img class="extdt-header-sort-img" src="/MSPTextMessaging/a4j/g/3_3_1.GAorg/richfaces/renderkit/html/images/s.gif"/>
</span>
</div>
</div>
<script id="myTable:datacol:dnd_drag_script">
1delete DnD_ExtSimpleDraggable_datacol;
2var DnD_ExtSimpleDraggable_datacol = new DnD.ExtSimpleDraggable('myTable_hdrag_datacol',{'parameters':{'dragSourceId':'myTable:datacol:dnd_drag_script','myTable:datacol:dnd_drag_script':'myTable:datacol:dnd_drag_script'} ,'dndParams':'{\"label\":\"\"}','dragIndicator':'myTable:dataTable_indicator','dragType':'COLUMN_ORDER_myTable'} )
</script>
<span id="myTable:datacolheader:sepSpan" class="extdt-hsep"/>
<span id="myTable_hdrop_datacolleft" class="extdt-hdrop" style="visibility: hidden;">
<span class="extdt-hdrop-top extdt-hdrop-top-left" style="visibility: hidden;"/>
<span class="extdt-hdrop-bottom extdt-hdrop-bottom-left" style="visibility: hidden;"/>
</span>
<script id="myTable:datacol:dnd_drop_script_left">
1delete DnD_ExtSimpleDropZone_datacolL;
2var DnD_ExtSimpleDropZone_datacolL = new DnD.ExtSimpleDropZone('myTable_hdrop_datacolleft',{'acceptedTypes':'COLUMN_ORDER_myTable','dndParams':'{}'} ).drop = function(event,drag){var dragParams = drag.getParameters();var source = dragParams['dragSourceId'];if (source != "myTable:datacol:dnd_drag_script"){var options = {'parameters':{'myTable:datacol:dnd_drop_script_left':'myTable:datacol:dnd_drop_script_left'} ,'actionUrl':'/MSPTextMessaging/TextMessaging/simplecase.seam','similarityGroupingId':'myTable:datacol'} ;options.parameters['dropTargetId'] = 'myTable:datacol:dnd_drop_script_left';Object.extend(options.parameters, dragParams);window.ExtendedDataTable.DataTable_myTable.preSendAjaxRequest();var dzOptions = this.getDropzoneOptions(); if (dzOptions.ondrop) { if (!dzOptions.ondrop.call(this, event)) return; };A4J.AJAX.Submit('_viewRoot',null,event,options);};};
</script>
<span id="myTable_hdrop_datacolright" class="extdt-hdrop" style="visibility: hidden;">
<span class="extdt-hdrop-top extdt-hdrop-top-right" style="visibility: hidden;"/>
<span class="extdt-hdrop-bottom extdt-hdrop-bottom-right" style="visibility: hidden;"/>
</span>
<script id="myTable:datacol:dnd_drop_script_right">
1delete DnD_ExtSimpleDropZone_datacolR;
2var DnD_ExtSimpleDropZone_datacolR = new DnD.ExtSimpleDropZone('myTable_hdrop_datacolright',{'acceptedTypes':'COLUMN_ORDER_myTable','dndParams':'{}'} ).drop = function(event,drag){var dragParams = drag.getParameters();var source = dragParams['dragSourceId'];if (source != "myTable:datacol:dnd_drag_script"){var options = {'parameters':{'myTable:datacol:dnd_drop_script_right':'myTable:datacol:dnd_drop_script_right'} ,'actionUrl':'/MSPTextMessaging/TextMessaging/simplecase.seam','similarityGroupingId':'myTable:datacol'} ;options.parameters['dropTargetId'] = 'myTable:datacol:dnd_drop_script_right';Object.extend(options.parameters, dragParams);window.ExtendedDataTable.DataTable_myTable.preSendAjaxRequest();var dzOptions = this.getDropzoneOptions(); if (dzOptions.ondrop) { if (!dzOptions.ondrop.call(this, event)) return; };A4J.AJAX.Submit('_viewRoot',null,event,options);};};
</script>
<div id="myTable:datacolheader:menuDiv" class="extdt-menu-div-out"/>
</th>
<th class="extdt-empty-cell rich-extdt-subheadercell"> </th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 0px;" colspan="2">
<div id="myTable:sd" class="extdt-content" style="height: 50px; width: 100%;">
<table id="myTable:n" class="extdt-table-layout rich-table list" width="100%" cellspacing="0" cellpadding="0" border="0">
<colgroup id="myTable:colgroup:body">
<col width="100"/>
<col/>
</colgroup>
<tbody id="myTable:tb">
<tr id="myTable:body:fakeIeRow" class="extdt-fakeierow">
<td class="extdt-fakeierow extdt-cell rich-extdt-cell"/>
<td class="extdt-fakeierow extdt-cell rich-extdt-cell"/>
</tr>
<tr id="myTable:n:0" class="extdt-firstrow rich-extdt-firstrow even">
<td id="myTable:0:datacol" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">0</div>
</td>
<td class="extdt-empty-cell rich-extdt-cell"/>
</tr>
<tr id="myTable:n:1" class="extdt-firstrow rich-extdt-firstrow odd">
<td id="myTable:1:datacol" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">1</div>
</td>
<td class="extdt-empty-cell rich-extdt-cell"/>
</tr>
<tr id="myTable:n:2" class="extdt-firstrow rich-extdt-firstrow even">
<td id="myTable:2:datacol" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">2</div>
</td>
<td class="extdt-empty-cell rich-extdt-cell"/>
</tr>
<tr id="myTable:n:3" class="extdt-firstrow rich-extdt-firstrow odd">
<td id="myTable:3:datacol" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">3</div>
</td>
<td class="extdt-empty-cell rich-extdt-cell"/>
</tr>
<tr id="myTable:n:4" class="extdt-firstrow rich-extdt-firstrow even">
<td id="myTable:4:datacol" class="extdt-cell rich-extdt-cell">
<div class="extdt-cell-div">4</div>
</td>
<td class="extdt-empty-cell rich-extdt-cell"/>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<input id="myTable:s" type="hidden" value="-1" name="myTable:s"/>
</div>
<div id="myTable:splashscreen" class="extdt-ss-vsbl"/>

As you can see the table data is there but the final div

takes up the entire screen and continues to load forever.

[ilya_shaikovsky]

yes.. we have still opened issues on similar behavior https://jira.jboss.org/jira/browse/RF-5748 could you please assemble separate war sample for investigation?

[rama.n]

I managed to fix this issue by wrapping the table in a form, did not see any documentation in richfaces to do this?