I am working on j2ee web application (jsf2 and primefaces) and i wonder how to display form depending on the item selected from select one menu.
I tried this but it didn't work.
<h:form id="global">
<p:panel header="Association">
...
<p:outputLabel value="Travel Class" />
<p:selectOneMenu id="associationType" style="width: 230px" value="#{associationMBean.travelClass}">
<f:selectItem itemLabel="Select one" itemValue="" />
<f:selectItem itemLabel="Seminar" itemValue="Seminar" />
<f:selectItem itemLabel="Honeymoon" itemValue="Honeymoon" />
<f:selectItem itemLabel="Organized Trip" itemValue="Organized Trip" />
<p:ajax update=":hidePanel"/>
</p:selectOneMenu>
</p:panel>
</h:form>
<p:panel id="hidePanel" style="margin-top: 20px; font-size: 14px; border: 0;display: none " header="Remarks (Optional)" rendered="#{associationMBean.travelClass eq Seminar}">
<h:form>
<p:inputTextarea style="width: 100% ; height: 100px" value="#{associationMBean.description}" ></p:inputTextarea>
</h:form>
</p:panel>
Update
<html
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Visa Application-Thailand</title>
</h:head>
<h:body>
<div align="center">
<div>
<img class="logo" src="images/banner.jpg"/>
</div>
<p:panel style="width: 61%; border-color: indianred; border-width: 2px; margin-top: 10px">
<h:form id="global">
<p:panel style="margin-top: 20px; font-size: 14px ; border: 0" header="Association">
<table border="0" >
<tbody >
<tr>
<td align="right">
<p:outputLabel value="Association Type" />
</td >
<td align="left">
<p:selectOneMenu id="selectmenu" style="width: 230px" value="#{associationMBean.type}">
<f:selectItem itemLabel="Select a Class" itemValue="" />
<f:selectItem itemLabel="Seminar" itemValue="Seminar" />
<f:selectItem itemLabel="Organized Trip" itemValue="Organized Trip" />
<f:selectItem itemLabel="Honeymoon" itemValue="Honeymoon" />
<p:ajax update=":hidePanel"/>
</p:selectOneMenu>
</td>
</tr>
<tr>
<td align="right">
<p:outputLabel value="Date of Departure" for="departure" />
</td>
<td align="left">
<p:calendar value="#{associationMBean.departure}" showOn="button" pattern="dd/MM/yy" style="width: 250px" id="departure"></p:calendar>
<p:watermark value="01/01/2014" for="departure"/>
</td>
</tr>
<tr>
<td align="right">
<p:outputLabel value="Date of Arrival" for="arrival" />
</td>
<td align="left">
<p:calendar value="#{associationMBean.arrival}" showOn="button" pattern="dd/MM/yy" style="width: 250px" id="arrival"></p:calendar>
<p:watermark value="01/01/2014" for="arrival"/>
</td>
</tr>
<tr>
<td align="right">
<p:outputLabel value="Travel Agency " for="travelAgency"/>
</td>
<td align="left">
<p:inputText id="travelAgency" value="#{associationMBean.travelAgency}" style="width: 220px"></p:inputText>
</td>
</tr>
<tr>
<td align="right">
<p:outputLabel value="Airline " for="airline"/>
</td>
<td align="left">
<p:inputText id="airline" value="#{associationMBean.airline}" style="width: 220px"></p:inputText>
</td>
</tr>
<tr>
<td align="right">
<p:outputLabel value="Travel Class" />
</td >
<td align="left">
<p:selectOneMenu id="selectclass" style="width: 230px" value="#{associationMBean.travelClass}">
<f:selectItem itemLabel="Select a Class" itemValue="" />
<f:selectItems value="#{associationMBean.allClasses}" />
<!-- <p:ajax update=":hidePanel"/> !-->
</p:selectOneMenu>
</td>
</tr>
<tr >
<td align="right">
<p:outputLabel value="Hotels " for="hotels" />
</td>
<td align="left">
<p:inputTextarea id="hotels" value="#{associationMBean.hotels}" style="width: 220px"/>
</td>
</tr>
</tbody>
</table>
</p:panel>
<div align="right" style="margin-top: 20px ">
<p:commandButton type="reset" value="Reset" style="font-size: 14px;"/>
<p:commandButton value="Save" ajax="false" styleClass="ui-priority-primary" style="font-size: 14px;" action="#{associationMBean.addAssociation()}" />
</div>
</h:form>
<p:panel id="hidePanel" style="margin-top: 20px; font-size: 14px; border: 0;display: none " header="Remarks (Optional)" >
<h:form rendered="#{associationMBean.type == 'Seminar'}" >
<p:inputTextarea style="width: 100% ; height: 100px" value="#{visaMBean.description}" ></p:inputTextarea>
</h:form>
</p:panel>
</p:panel>
</div>
</h:body>
</html>
the code above is the whole html code after adding some updates <h:form rendered="#{associationMBean.type == 'Seminar'}" > But still can't display the hidePane when i select Seminar from the selectOneMenu.
Have you any idea what am i missing??
The following should work:
<p:panel id="hidePanel" style="margin-top: 20px; font-size: 14px; border: 0;display: none " header="Remarks (Optional)">
<h:form rendered="#{associationMBean.travelClass eq 'Seminar'}">
<p:inputTextarea style="width: 100% ; height: 100px" value="#{associationMBean.description}" ></p:inputTextarea>
</h:form>
</p:panel>
You can not update components which are not in the DOM and when a component is not rendered it is not in there. So you need to update the parent of the conditionally rendered component.
And as #{associationMBean.travelClass} is a String you need to wrap 'Seminar' with single quotes '.
Related
I have a form with an attachment.When I tried to view my document,It is doing form validation and is asking to fill the respective fields,But i don't want to validate the form to view my file.I have changed the link from hcommand link to acommand link and tried a few more.But it's not working.Can someone help me out.
My code is
<h:form id="mailForm">
<span class = "clasMpnlErr" style="color:Blue"><h:messages id="mailFormErrorMessages" for="mailForm"/></span>
<table width="100%">
<tr>
<td style="width: 60px;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.to']}"/>:
</td>
<td>
<h:inputText id="to" value="#{action.currentEditingEmail.toAddressList}" style="width: 685px;margin-left: 10px;" required="true" maxlength="255">
<f:validateLength maximum="255"/>
</h:inputText>
<span class="clasFormElemErr"><h:message for="to"/></span>
</td>
</tr>
<tr>
<td style="width: 60px;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.cc']}"/>:
</td>
<td>
<h:inputText id="cc" value="#{action.currentEditingEmail.ccAddressList}" style="width: 685px;margin-left: 10px;" maxlength="255">
<f:validateLength maximum="255"/>
</h:inputText>
<span class="clasFormElemErr"><h:message for="cc"/></span>
</td>
</tr>
<tr>
<td style="width: 60px;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.bcc']}"/>:
</td>
<td>
<h:inputText id="bcc" value="#{action.currentEditingEmail.bccAddressList}" style="width: 685px;margin-left: 10px;" maxlength="255">
<f:validateLength maximum="255"/>
</h:inputText>
<span class="clasFormElemErr"><h:message for="bcc"/></span>
</td>
</tr>
<tr>
<td style="width: 60px;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.subject']}"/>:
</td>
<td>
<h:inputText id="subject" value="#{action.currentEditingEmail.subject}" style="width: 685px;margin-left: 10px;" maxlength="100">
<f:validateLength maximum="100"/>
</h:inputText>
<span class="clasFormElemErr"><h:message for="subject"/></span>
</td>
</tr>
<tr>
<td> </td>
<td>
<h:inputTextarea readonly="true" value="#{action.currentEditingEmail.contentNoComments}" rows="10" style="width: 685px;background: white;border: 0;margin-left: 10px;" />
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<h:outputText value="#{labels['view.order.ordersummary.email.label.comments']}"/>:
</td>
<td>
<h:inputTextarea id="comments" value="#{action.currentEditingEmail.comments}" rows="5" style="width: 685px;margin-left: 10px;" />
<span class="clasFormElemErr"><h:message for="comments"/></span>
</td>
</tr>
<tr>
<td align="right" valign="bottom">
<int:status id="editingEmailStatus" />
</td>
</tr>
</table>
<h:commandButton id="previousEmailLink" action="#{action.previousEmail}" style="visibility:hidden;display: none;">
<a:support event="onclick" disableDefault="true" action="#{action.previousEmail}" rendered="#{useAjax}" reRender="editingEmailOuter" onsubmit="ScnUtil.Status.start('editingEmailStatus');" oncomplete="ScnUtil.Status.end('editingEmailStatus');" />
</h:commandButton>
<h:commandButton id="nextEmailLink" action="#{action.nextEmail}" style="visibility:hidden;display: none;">
<a:support event="onclick" disableDefault="true" action="#{action.nextEmail}" rendered="#{useAjax}" reRender="editingEmailOuter" onsubmit="ScnUtil.Status.start('editingEmailStatus');" oncomplete="ScnUtil.Status.end('editingEmailStatus');" />
</h:commandButton>
<s:div id="viewAttachDocument" style="clear: both;width: 780px;">
<s:div style="clear: both;font: normal 12px Verdana">
<h:outputText value="#{labels['view.transport.label.attachments']}" rendered = "#{action.showPopUpDialog == true}"/>
</s:div>
<table style=" margin-left: 135px; width: 510px;background-color: white;">
<thead>
<tr>
<th style="color: lightslategrey;text-align: left;">
<h:outputText value="#{labels['view.tender.confirmation.include.documents']} " rendered = "#{action.showPopUpDialog == true}"/>
</th>
<th style="color: lightslategrey;text-align: left;">
<h:outputText value="#{labels['view.tender.confirmation.documentId']}" rendered = "#{action.showPopUpDialog == true}"/>
</th>
<th style="color: lightslategrey;text-align: left;">
<h:outputText value="#{labels['view.tender.confirmation.view']}" rendered = "#{action.showPopUpDialog == true}"/>
</th>
</tr>
</thead>
<tbody>
<a:repeat var="document" value="#{action.documentDetailsList}" varStatus="status">
<h:panelGroup>
<tr>
<td>
<h:selectBooleanCheckbox styleClass="checkbox" id="check_doc" value="#{document.selectChkBox}">
<a:support event="onclick"
ajaxSingle="true"
action="#{action.getSelectedIds(document.fileNetId,document.fileName)}"/>
</h:selectBooleanCheckbox>
</td>
<td>
<h:outputText value="#{document.fileName}"/>
</td>
<td>
<a:commandLink value="#{labels['view.base.button.value.view']}"
action="#{action.viewDocumentContent(document.fileNetId,document.fileName)}" />
</td>
</tr>
</h:panelGroup>
</a:repeat>
</tbody>
</table>
</s:div>
You can skip the validation by attribute "immediate" set to true.
e.g.
<h:commandLink immediate="true" value="" action="" />
Details how immediate attribute works:
https://cwiki.apache.org/confluence/display/MYFACES/How+the+immediate+attribute+works
In my JEE application, I have an emails list extraction process. I need to display a counter which be incremented after adding a mail to the list. The idea is to display the size of this list and update it every 1 seconde using primeface poll. I procced like this:
EmailsExtraction.xhtml:
<h:body>
<h:form>
<h:panelGroup id="formblock" style="margin-top: 40px" layout="block" >
<p:panelGrid columns="2">
<p:outputLabel for="Keyword" value="Keywords: " />
<p:inputText id="Keyword" type="search" requiredMessage="Keyword is required" style="width: 600px"
value="#{mailMB.keyword}" required="true" label="Keyword">
</p:inputText>
<p:outputLabel for="Emailsnbr" value="Emails amount:" />
<p:inputText id="Emailsnbr" requiredMessage="Emails number is required" style="width: 590px"
value="#{mailMB.number}" required="true" label="Emailsnbr">
</p:inputText>
</p:panelGrid>
</h:panelGroup>
<p:spacer height="5px" />
<p:commandButton value="Start" style="width: 12%;height: 100%" id="extractbutton" ajax="true" widgetVar="ButtonExtract"
actionListener="#{mailMB.searchEmailsRym()}"
styleClass="ui-priority-primary"
onstart="blockUIWidget1.show();" oncomplete="play(); blockUIWidget1.hide(); if (args && !args.validationFailed) freeMails();">
</p:commandButton>
</h:form>
<p:dialog widgetVar="blockUIWidget1" header="Hitonclick" modal="true" resizable="false" closable="false" >
<table border="0" style="width: 500px">
<tbody >
<tr>
<td>
<p:graphicImage url="pictures/loading81.gif" width="200" height="200" alt="animated-loading-bar"/>
</td>
<td>
<h:form >
<p:outputLabel value="#{mailMB.count}" id="countOutPut"/>
<p:poll interval="1" update="countOutPut" listener="#{mailMB.increment}"/>
<div id="countdown_text">0</div>
<br></br>
<p:commandButton ajax="false" style="width: 100px;height: 40px" actionListener="#{mailMB.abortSearch()}" value="Cancel" styleClass="ui-priority-primary" title="Cancel" oncomplete="clearForm('formcounter'), clearForm('searchForm')"/>
</h:form>
</td>
</tr>
<div align="right">
</div>
</tbody>
</table>
</p:dialog>
</h:body>
ManagedBean.java:
private int count=0;
public void increment(){
count=mails.size();
}
// count getter & setter
But the count value is not updated.
I have designed a jsf page and my scenario is to render output panel based on changing the dopdown in selectonemenu. My problem here is required=true in inputtext box. It dosnt allow other components to render and when i give value in textbox , then it allows the selectonemenu to render . What is the mistake i have done.Please can someone solve my problem
Code
<a4j:outputPanel id="thapalSection" >
<ui:fragment>
<fieldset style="table-layout: fixed;">
<legend>#{msg.lbl_post_offSect}</legend>
<table border="0" cellpadding="1" cellspacing="15" width="100%"
style="border-width: 1px;border-spacing: 1px;border-style: solid;border-color:#c2c2c2">
<tr>
<td align="left" width="20%">#{msg.lbl_SenDTo}<span>
<font color="red"><b>*</b></font></span>
</td>
<td align="left" colspan="3" width="30%">
<a4j:outputPanel id="tapalSectionSendToPanel">
<h:inputText id="sendToId" value="#{DataBean.kabalSectionBean.sendTo}" class="createresizedTextbox"
readonly="true" required="true" requiredMessage="#{msg.labl_required}" />
<h:message for="sendToId" style="color:red" />
</a4j:outputPanel>
</td>
</tr>
<tr>
<td align="left" width="20%" >#{msg.lbl_lettRef}</td>
<td align="left" width="34%" >
<a4j:outputPanel id="letterReferenceIDPAnel">
<h:inputText id="lettRefId" value="#{DataBean.kabalSectionBean.letterFileRefNo}"
class="createresizedTextbox" required="true" requiredMessage="#{msg.labl_required}" immediate="true"/>
<h:message for="lettRefId" style="color:red" />
</a4j:outputPanel>
</td>
</tr>
<tr>
<td>#{msg.lbl_Sender_type}</td>
<td>
<a4j:outputPanel id="senderTypePanel" >
<h:selectOneMenu value="#{DataBean.kabalSectionBean.senderType}" class="createresizedTextbox" id="senderTypeID">
<a4j:ajax event="change" render="thapalSection internalPanel" listener="#{FileTrackAction.selectSenderType}" />
<f:selectItem itemValue="--select--" itemLabel="--Select--" />
<f:selectItem itemValue="internal" itemLabel="Internal" />
<f:selectItem itemValue="external" itemLabel="External" />
<f:validator validatorId="org.gov.tnwrd.bean.validation.DropdownValidation" />
</h:selectOneMenu>
<h:message for="senderTypeID" style="color:red" />
</a4j:outputPanel>
</td>
</tr>
<a4j:outputPanel id="internalPanel" >
<ui:fragment rendered="#{DataBean.kabalSectionBean.sendTypeIntEnabled==true}" >
<tr>
<td align="left" width="20%" >#{msg.lbl_office_name}</td>
<td align="left" width="34%">
<h:inputText id="internalType" value="#{DataBean.kabalSectionBean.officeName}" class="createresizedTextbox" readonly="true" />
</td>
<td align="left" width="17%" >#{msg.lbl_type_letter}</td>
<td align="left">
<h:selectOneMenu class="createresizedTextbox" value="#{DataBean.kabalSectionBean.typeOfletter}">
<f:selectItem itemValue="--" itemLabel="--Select--" />
<f:selectItem itemValue="ordinaryLetter" itemLabel="Ordinary Letter" />
<f:selectItem itemValue="doLetter" itemLabel="D.O Letter" />
<f:selectItem itemValue="confidentialLetter" itemLabel="Confidential Letter" />
<f:selectItem itemValue="OtherLetter" itemLabel="Other Letter" />
</h:selectOneMenu>
</td>
</tr>
</ui:fragment>
</a4j:outputPanel>
</table>
</fieldset>
</ui:fragment>
</a4j:outputPanel>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellspacing="1" cellpadding="15" width="100%" border="0">
<tr>
<td></td>
<td colspan="6" align="right">
<div class="buttons">
<a4j:commandButton id="addThapal" value="#{msg.btn_send}" type="button" render="thapalPanel savePopUp" action="#{FileTrackAction.saveThapalDetails}" oncomplete="if(#{DataBean.kabalSectionBean.statusCode eq 'Success'}) #{rich:component('savePopUp')}.show();"/>
<a4j:commandButton id="clearId" value="#{msg.btn_clear}" render="thapalPanel" action="#{FileTrackAction.clearTapalSection}" type="button" />
</div>
</td>
</tr>
</table>
</a4j:outputPanel>
The problem is, that the validation fails. This causes JSF to interrupt its lifecycle and jump from validation directly to rendering without changing anything in between.
I don't know exactly when you set DataBean.kabalSectionBean.sendTypeIntEnabled but you can check that this value will not be set to true and thus your panel will not be changed.
You have different options here. Either you can use the immediate="true" attribute to skip validation, or you can use execute="list of components you want to execute". Execute means, that the data will be sent to the backing bean, will be validated and the setXXX(...) methods will be called for this input. Here you would NOT list the required field and thus its validation won't be a problem.
If you use execute="#none" it has the same effect like immediate="true".
i have three tab that invoke separate composite Component. my problem is, when i click on button, there is no action happend. but when i open my composite component page separately my buttons work clearly.my Buttons Are in Tab3. when in invoke ""bizbiz:inviteRequest"" in Tab3, my buttons dosnot work.
could you please see my code ?
<h:body>
<h:form>
<p:tabView >
<p:tab id="tab1" title="#{businessPartner_msg.supplier}">
<h:panelGrid columns="2" cellpadding="10">
<bizbiz:supplier/>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="#{businessPartner_msg.customer}">
<h:panelGrid columns="2" cellpadding="10">
<bizbiz:customer/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="#{businessPartner_msg.inviteRequest}">
<h:panelGrid columns="2" cellpadding="10">
<bizbiz:inviteRequest/>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</h:body>
my buttons in tab3 . here is Tab3
<composite:implementation>
<table style="width: 100%" id="tabell">
<p:selectOneButton value="#{inviteRequestManagedBean.filterType}">
<f:selectItem itemLabel="#{inviteRequest_msg.request}" itemValue="request" />
<f:selectItem itemLabel="#{inviteRequest_msg.archive}" itemValue="archive" />
<f:ajax event="change" execute="#form" render="#form" />
<tr>
<td>
<p:panel></p:panel>
<p:dataGrid id="requestDataGrid" var="tBusinessPartnerRequestInfo"
value="#{inviteRequestManagedBean.filterBusinessRequest()}" columns="1" >
<p:column>
<div>
<table border="0" width="100%">
<tr>
<td>
<p:graphicImage value="#{tBusinessPartnerRequestInfo.partySender_imageUrl}"/>
</td>
<td>
<div>
<table border="0" width="100%">
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.requestDate}"/>
</td>
</tr>
<tr>
<td>
<h:outputLabel value="#{tBusinessPartnerRequestInfo.partySender_fullName}"/>
</td>
</tr>
</table>
</div>
</td>
<td>
<p:commandButton id="acceptCommonButton" value="#{inviteRequest_msg.accept}"
actionListener="#{inviteRequestManagedBean.acceptRequest(tBusinessPartnerRequestInfo.id)}"
update="#form"/>
</td>
<td>
<p:commandButton id="noNowCommonButton" value="#{inviteRequest_msg.notnow}"
actionListener="#{inviteRequestManagedBean.notNowRequest(tBusinessPartnerRequestInfo.id)}"
update="#form"/>
</td>
<p:blockUI block="acceptCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="acceptCommonButton"/>
<p:blockUI block="acceptCommonButton" trigger="noNowCommonButton"/>
<p:blockUI block="noNowCommonButton" trigger="noNowCommonButton"/>
<td>
<p:panel>
<p:ajaxStatus>
<f:facet name="start">
<p:graphicImage value="../resources/img/loading.gif"/>
</f:facet>
<f:facet name="complete">
<h:outputLabel value=""/>
</f:facet>
</p:ajaxStatus>
</p:panel>
</td>
</tr>
</table>
</div>
<hr/>
</p:column>
</p:dataGrid>
</td>
</tr>
</p:selectOneButton>
</table>
</composite:implementation>
I have a dataTable with no width specified. Instead of automatically adjust its width it wraps the text in one of the columns. I don't know why this is happening. I'm hoping to avoid using white-space: nowrap;
xhtml:
<ez:listTable
listBean="#{artistBean}"
actionBean="#{albumBean}"
editable="#{artistBean.moderatedByUser}"
title="albums"
info="You need to be moderator to edit albums">
<h:column>
<f:facet name="header">name</f:facet>
<h:link
outcome="album"
styleClass="tableLink"
value="#{item.name}">
<f:param name="albumId" value="#{item.id}" />
<f:param name="albumName" value="#{item.name}" />
</h:link>
</h:column>
<h:column>
<f:facet name="header">year</f:facet>
<h:outputText value="#{item.year}" styleClass="tableItem" />
</h:column>
</ez:listTable>
Composite component (implementation):
<cc:implementation>
<div id="#{cc.clientId}">
<h:outputStylesheet name="tableBase.css" library="css/table" />
<h:outputStylesheet name="tableContent.css" library="css/table" />
<h:panelGrid columns="2" cellpadding="0" cellspacing="0">
<h:outputText value="#{cc.attrs.title}" styleClass="#{cc.attrs.titleClass}" />
<h:panelGroup rendered="#{cc.attrs.showInfo}">
<h:graphicImage id="info" styleClass="tableInfoIcon" library="images" name="q1_9x9.png" />
<p:overlayPanel
for="info"
styleClass="tableInfo"
showEffect="fade"
hideEffect="fade">
#{cc.attrs.info}
</p:overlayPanel>
</h:panelGroup>
</h:panelGrid>
<h:panelGrid columns="2" cellpadding="0" cellspacing="0">
<h:dataTable
id="table"
binding="#{cc.table}"
value="#{cc.attrs.listBean.list}"
var="item"
styleClass="#{cc.attrs.styleClass}"
rowClasses="#{cc.attrs.rowClasses}"
headerClass="#{cc.attrs.headerClass}"
rendered="#{not empty cc.attrs.listBean.list}">
<cc:insertChildren />
<h:column rendered="#{cc.attrs.editable}">
<p:commandLink
action="#{cc.attrs.actionBean.checkChangeAction()}"
value="edit"
styleClass="tableLink"
update="#form"
oncomplete="#{cc.attrs.editDialogId}Wid.show();"
rendered="#{cc.attrs.actionBean != null}">
<f:actionListener binding="#{cc.attrs.actionBean.setItem(item)}" />
</p:commandLink>
<p:commandLink
action="#{cc.attrs.listBean.checkChangeAction()}"
value="edit"
styleClass="tableLink"
update="#form"
oncomplete="#{cc.attrs.editDialogId}Wid.show();"
rendered="#{cc.attrs.actionBean == null}">
<f:actionListener binding="#{cc.attrs.listBean.setItem(item)}" />
</p:commandLink>
</h:column>
<h:column rendered="#{cc.attrs.editable}">
<p:commandLink
action="#{cc.attrs.actionBean.delete(item)}"
value="delete"
styleClass="tableLink"
update="#form"
rendered="#{cc.attrs.actionBean != null}"/>
<p:commandLink
action="#{cc.attrs.listBean.delete(item)}"
value="delete"
styleClass="tableLink"
update="#form"
rendered="#{cc.attrs.actionBean == null}" />
</h:column>
</h:dataTable>
<h:panelGroup rendered="#{empty cc.attrs.listBean.list}" styleClass="default_paragraph">
#{cc.attrs.emptyListMsg}
</h:panelGroup>
</h:panelGrid>
</div>
</cc:implementation>
Generated html:
<table id="albumForm:j_idt180:table" class="table">
<thead>
<tr>
<th class="tableHeader" scope="col">name</th>
<th class="tableHeader" scope="col">year</th>
<th class="tableHeader" scope="col"></th>
<th class="tableHeader" scope="col"></th>
</tr>
</thead>
<tbody>
<tr class="tableRowOdd">
<td>Through The Eyes</td>
<td><span class="tableItem">2002</span></td>
<td><a id="albumForm:j_idt180:table:0:j_idt170" href="#" class="ui-commandlink tableLink" onclick="PrimeFaces.ab({source:'albumForm:j_idt180:table:0:j_idt170',update:'albumForm',oncomplete:function(xhr,status,args){dialogWid.show();;}});return false;">edit</a></td>
<td><a id="albumForm:j_idt180:table:0:j_idt173" href="#" class="ui-commandlink tableLink" onclick="PrimeFaces.ab({source:'albumForm:j_idt180:table:0:j_idt173',update:'albumForm'});return false;">delete</a></td>
</tr>
<tr class=" tableRowEven">
<td>Endangered Species</td>
<td><span class="tableItem">2001</span></td>
<td><a id="albumForm:j_idt180:table:1:j_idt170" href="#" class="ui-commandlink tableLink" onclick="PrimeFaces.ab({source:'albumForm:j_idt180:table:1:j_idt170',update:'albumForm',oncomplete:function(xhr,status,args){dialogWid.show();;}});return false;">edit</a></td>
<td><a id="albumForm:j_idt180:table:1:j_idt173" href="#" class="ui-commandlink tableLink" onclick="PrimeFaces.ab({source:'albumForm:j_idt180:table:1:j_idt173',update:'albumForm'});return false;">delete</a></td>
</tr>
</tbody>
</table>
CSS:
.tableLink {
display: inline-block;
text-decoration: none;
padding: 3px 5px 3px 5px;
color: #3a5776;
}
.table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
border: solid #ccc 1px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
padding: 2px;
}
The name column is the one that gets wrapped. It seems there's like one px missing for the column to be rendered correctly.
After some testing I found out what the problem was. In the style for the tableelement, I use padding to get the border distanced from the actual table content. Padding for the table (not td) is - as far as I understand - not supported. It worked in firefox but not in chrome.