Due to an 'unique' design that I was handed to reproduce in JSF/facelet/primefaces, I had to use ui:repeat to produce a table.
The initial table data is a normal List object but to make things complicated the design outputs extra row between each 'standard' data row which uses javascript to hide them on load. When a link on a 'initial' row is clicked, ajax is called to populate the hidden row's table content and a normal javascript to show the row. As an example, I've included the code structure below.
First problem: For some reason, when I try to set the p:commandLink id to, say "breakDown_#{daily.uniqueKey}", the page produces an error, I'm not certain of the reason. I needed the unique key somewhere in the link element for javascript to pick up which row to toggle, in this case I think I've gotten away with it with accesskey, its not the best practice but hopefully we can use id in the future.
Second problem (Main one): ui:repeat forces a prepend id onto the all the component within with no option to turn it off, which results in the p:commandlink component to throw a 'component tablestring#n not found to partially update' exception.
Third problem (somewhat unrelated to primefaces): ui:repeat is basically crap in that it doesn't have a good way to get row index, in this particular case I have to manage my row index in the individual object. (which means I have to manage the insertion order more carefully)
Fourth problem: After I've fixed the 2nd and 3rd problem by replacing ui:repeat with c:for-each, when <p:panel> data gets 'refreshed' by ajax, the table attributes of 'border="0" cellspacing="0" cellpadding="0" magically disappears. This isn't a huge problem, as I can solve this with css or modify the p:commandlink update attribute to target the individual <h:outputText> components rather than the panel, but it's just slightly on the annoying side
.Like I said in this particular instance I can get away with it with c:for-each because I don't have a refresh function through saved state (for those that don't know the difference). However it would seem that in the future c:for-each function may not be suficient. Therefore instead of a fix, would it be sensible to ask for a replacement component for ui:repeat in primefaces with extended functions (like varstatus) ?
Any thoughts?
Code: Select all
<table class="stats-table" cellspacing="0" cellpadding="0" border="0">
<tr class="">
<th class="corners-lrg-t-l" colspan="2">Date</th>
</tr>
<ui:repeat value="#{DailyData.initaltable}" var="daily">
<tr class="odd">
<td>
<h:outputText value="#{daily.date}">
<f:convertDateTime pattern="EEE, d MMM yyyy" timeZone="Europe/London"/>
</h:outputText>
</td>
<td>
<h:form >
<p:commandLink actionListener="#{BreakdownStatisticBean.ajaxCall}"
accesskey="#{daily.key}" styleClass="view-breakdown magnifier" update="tablestring#{daily.key}">
View Break- Down
<f:param name="date" value="#{daily.date}"/>
</p:commandLink>
</h:form>
</td>
</tr>
<tr>
<td colspan="5" class="breakdown" id="breakdown-#{daily.key}">
<p:panel id="tablestring#{daily.key}" styleClass="breakdowntablediv">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Ajax Data</th>
</tr>
<tr>
<td>BreakDown1</td>
<td>#{AjaxBean.data1}</td>
</tr>
<tr>
<td>BreakDown2</td>
<td>#{AjaxBean.data2}</td>
</tr>
</table>
</p:panel>
</td>
</tr>
</ui:repeat>
</table>
<script type="text/javascript" charset="utf-8">
function initMenu() {
$('.breakdown').hide();
$('a.view-breakdown').click(
function() {
var key = $(this).attr('accesskey');
$('#breakdown-'+key).toggle();
$(this).toggleClass('alt');
return false;
});
}
$(document).ready(function() {initMenu();});
</script>