I have a jsf, where I want to show a list of checkboxes. If I create it like in the following example, the checkboxes are rendered correctly.
<p:outputPanel layout="block" rendered="#{scheduleConfigBean.selectedMonthType == 1}" style="width: 400px; margin-top: 45px">
<ui:repeat var="monthDay" value="#{scheduleConfigBean.monthDays}">
<p:selectBooleanCheckbox value="#{monthDay.checked}" />
<h:outputText value="#{monthDay.name}" />
</ui:repeat>
</p:outputPanel>
But when I add a ajax event listener to each checkbox, the panel is not rendered any longer. What is my problem here?
<p:outputPanel layout="block" rendered="#{scheduleConfigBean.selectedMonthType == 1}" style="width: 400px; margin-top: 45px">
<ui:repeat var="monthDay" value="#{scheduleConfigBean.monthDays}">
<p:selectBooleanCheckbox value="#{monthDay.checked}">
<p:ajax listener="#{scheduleConfigBean.updateMonthlyButtonState}" update="saveBtn" />
</p:selectBooleanCheckbox>
<h:outputText value="#{monthDay.name}" />
</ui:repeat>
</p:outputPanel>
Thanks to Darka, his answer gives me the solution.
<p:outputPanel layout="block" rendered="#{scheduleCreate.selectedMonthType == 1}" style="width: 500px; margin-top: 45px">
<c:forEach items="#{scheduleCreate.monthDays}" var="monthDay" varStatus="status">
<p:selectBooleanCheckbox value="#{monthDay.checked}" style="margin-left: 8px">
<p:ajax listener="#{scheduleCreate.updateButton}" update="saveBtn" />
</p:selectBooleanCheckbox>
</c:forEach>
</p:outputPanel>
Related
I have a page with four parts (header, menu, content and footer); I used ui:include for that. In the content part, there is an inputText and a commandButton (submit). When I press the submit button, the inputText value I entered is not passed to the bean. I am not able to perform my function with null (input text value).
Index page:
<h:body >
<p:poll interval="1" />
<div
style="background-color: #E6E6FA;border-width: 1px; border-color: blue; border-style: solid;">
<ui:insert name="header">
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<br />
<div
style="background-color: #E6E6FA; border-width: 1px; border-color: blue; border-style: solid;">
<ui:insert name="menubar">
<ui:include src="menubar.xhtml" />
</ui:insert>
</div>
<br />
<div
style="background-color: #E6E6FA;border-width: 1px; border-color: blue; border-style: solid; border-width: 1px; min-height: 700px;">
<ui:insert name="content" id="mainpage">
<ui:include src="#{menuBarBean.menuBarDTO.page}.xhtml" ajax="true"/>
</ui:insert>
</div>
<br />
<div
style="background-color: #E6E6FA;border-width: 1px; border-color: blue; border-style: solid;">
<ui:insert name="footer">
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Content page:
<body bgcolor="E6E6FA">
<ui:composition>
<h:panelGrid id="panel" columns="2" border="1" cellpadding="10"
cellspacing="1">
<f:facet name="header">
<h:outputText value="Adding Project" />
</f:facet>
<h:outputLabel value="ProjectName" />
<p:inputText id="emailId"
value="#{addProjectBean.addProjectDTO.projectName}" required="true"
validatorMessage="input needed">
</p:inputText>
<h:commandButton action="#{addProjectBean.addNewProject}"
value="Submit" ajax="false" />
<h:commandButton value="#{msg['prometheus_reset']}"
style="margin-right:20px;">
<p:ajax update="panel" resetValues="true" />
</h:commandButton>
</h:panelGrid>
<h:outputLabel name="loginCheck"
value="#{loginBean.loginDTO.message}" style="color:red">
</h:outputLabel>
</ui:composition>
</body>
Instead of ajax="true" use ajax="false" in ui:composition.
<ui:include src="#{menuBarBean.menuBarDTO.page}.xhtml" ajax="true"/>
Updated
<ui:include src="#{menuBarBean.menuBarDTO.page}.xhtml" ajax="false"/>
values are passing to managed bean and everything working fine.
When informing the enrollment of an employee who is not registered in the given database
the system issues an error and inputText component loses focus.
After a few attempts the component gets the focus but the cursor does not appear in the field.
<h:form id="findForm">
<!-- Other -->
<p:dialog id="mealRegisterDialog" widgetVar="mealRegisterDialog"
header="#{lbl['mealRegisterControl']}" appendToBody="true"
resizable="false" closable="true" width="100%" height="600"
styleClass="container_24 clearfix grid_24">
<h:form id="mealRegisterForm"
styleClass="container_24 clearfix grid_24">
<p:messages id="dialogMessages" closable="true" />
<div class="grid_24"
style="border: 1; border-color: gray; border-style: solid; font-size: 20px">
<p:outputLabel value="#{lbl['employee']}" styleClass="grid_3"
style="margin-top:5px;" />
<p:inputText id="employeeRegistrationInput"
widgetVar="employeeRegistrationInput"
value="#{mealFindController.employeeRegistration}"
styleClass="grid_21">
<f:convertNumber integerOnly="true" />
<p:focus for="employeeRegistrationInput"
rendered="if(document.getElementById('mealRegisterTabView:findForm:confirmDialogUser').visible)" />
<p:ajax event="change" process="#form employeeRegistrationInput"
update="#form dialogMessages"
oncomplete="setFocusRegistration();"
listener="#{mealFindController.loadDataEmployee}" />
</p:inputText>
</div>
</h:form>
</p:dialog>
<!-- Other -->
</h:form>
function setFocusRegistration() {
employeeRegistrationInput.jq.focus();
}
RequestContext.getCurrentInstance().execute( "focus(employeeRegistrationInput)" );
I'm using primefaces with JSF2.1, tomcat7+ as an application server, Internet Explorer 8 as a browser, here's the case :
I have a 1000 records table inside a dialog, when i press a page link it changes records only once but the pressed page link does not get pressed (shaded as active) then the whole application does not respond. However when i select a row before using pageLinks everything works fine after that. Any Help?? here's a part of my xhtml page.
N.B: I cannot change IE8 as it is a customer requirement.
Here is the table part
<p:ajax global="false" event="close" listener="#{addConditionBean.handleClose}" update="conditionsDialog" />
<h:form id="conditionfrm">
<p:messages autoUpdate="true" showDetail="true" closable="true" severity="error"/>
<table style="text-align: center;">
<tr>
<td style="text-align: left; height: 100%; vertical-align: top;">
<p:growl id="infoMsg" showDetail="true" life="2000" autoUpdate="true" severity="info"/>
<p:dialog id="conditionsDialog" widgetVar="addCondition"
header="Add Condition" modal="true"
showEffect="fold" hideEffect="fold" closeOnEscape="true" height="400px" width="80%"
dynamic="true" style="display: none;" binding="#{addConditionBean.conditionDialog}">
<p:ajax global="false" event="close" listener="#{addConditionBean.handleClose}" update="conditionsDialog" />
<h:form id="conditionfrm">
<p:messages autoUpdate="true" showDetail="true" closable="true" severity="error"/>
<table style="text-align: center;">
<tr>
<td style="text-align: left; height: 100%; vertical-align: top;">
<p:growl id="infoMsg" showDetail="true" life="2000" autoUpdate="true" severity="info"/>
<p:dataTable id="ConditionsDT" value="#{addConditionBean.allConditionsData}" style="height: 90%;"
selectionMode="single"
selection="#{addConditionBean.selectedCondition}"
rowKey="#{condition.conditionId}"
paginator="true"
rows="50"
pageLinks="50"
var="condition" scrollable="true"
widgetVar="conditionsTable"
emptyMessage="No Conditions found with given criteria">
<p:ajax event="rowSelect" update="#form" oncomplete="slideShowPanel('displayDiv');" listener="#{addConditionBean.fillSelectedCondition}"/>
<f:facet id="facetId" name="header" >
<h:commandButton id="addNewCond" label="Add New Condition" image="/styling/images/add.png" style="height:15px;" >
<p:ajax global="false" event="click" update="#form" oncomplete="slideShowPanel('displayDiv');" listener="#{addConditionBean.showAddPanel()}"/>
</h:commandButton>
<br></br>
<!-- <p:outputPanel>
<p:inputText id="globalFilter" style="width:150px" value="" >
<p:ajax event="keyup" />
</p:inputText>
</p:outputPanel> -->
</f:facet>
<p:column style="height: 50%; text-align:left; width: 20%;" >
<h:commandButton value="Delete" image="/styling/images/Delete-icon.png" title="Delete condition" style="height: 20px" >
<p:ajax global="false" event="click" listener="#{addConditionBean.deleteCondition(condition)}" update="ConditionsDT" />
</h:commandButton>
</p:column >
<p:column headerText="Condition Name" style="height: 50%; text-align:left; width: 80%;" sortBy="#{condition.conditionName}" >
<h:outputText value="#{condition.conditionId} - #{condition.conditionName}"/>
</p:column>
</p:dataTable>
I guess my problem had nothing to do with rowSelection it concerned the scrollable attribute, I removed scrollable = true and scrollHeight and it all worked fine. I guess there was some kind of clash between scroll height and rows attributes of the datatable tag.
Hi guys primefaces' dialog box not showing up anymore. Here is my code. Please help, did I do something wrong.
this is code where I call dialog box from column titled 'More':
<h:panelGrid columns="2">
<p:dataTable id="tbl" var="holder">
...
<p:column>
<f:facet name="header">
<h:outputText value="More"/>
</f:facet>
<p:commandLink value="more" type="button" styleClass="ui-icon ui-icon-search" actionListener="#{editCustomerView.viewCustomerInfo}" update=":content_form:customerInfoDialog" oncomplete="_cusInfoDlg.show()">
<f:attribute name="currentCustomer" value="#{holder}"/>
</p:commandLink>
</p:column>
...
</p:dataTable>
</h:panelGrid>
//dialog is here
<p:dialog id="customerInfoDialog" widgetVar="_cusInfoDlg" header="Зээлдэгчийн мэдээлэл">
<ui:include src="#{editCustomerView.infoPage}.xhtml"/>
<h:commandButton value="ok" styleClass="btn" style="width: 100px; float: right; margin-right: 20px; margin-bottom: 20px;" onclick="customerInfoDlg.hide(); return false;"/>
</p:dialog>
Here is backing bean actionListener method
public void viewCustomerInfo(ActionEvent event)
{
this.currentCustomer = (Customer) event.getComponent().getAttributes().get("currentCustomer");
this.currentCustomerAddress = prepareCurrentCustomerAddress(this.currentCustomer);
if(this.currentCustomer.isIsCitizen()){
this.infoPage = "CitizenInfo";
}
else
{
this.infoPage = "OrganizationInfo";
}
}
I usually open dialogs via Javascript
PF('_cusInfoDlg').show();
I can't figure out why my primefaces poll will not update any components.
<p:poll widgetVar="poll"
interval="#{messageBean.refreshInterval}"
listener="#{messageBean.refreshLiveData}"
update=":transactionLogForm:tabViewMain:liveViewPanel"/>
The refreshLiveData method gets called successfully but it refuses to update the outputText component (or any component for that matter).
<p:tab id="liveViewTab" title="Live View">
<h:panelGrid id="liveViewPanel" columns="6" cellpadding="5">
<h:outputText value="Live View Enabled: " />
<p:selectBooleanCheckbox value="#{messageBean.liveViewActive}">
</p:selectBooleanCheckbox>
<h:outputText value="Interval: " />
<p:spinner id="interval" value="#{transactionLogBean.refreshInterval}" />
<h:outputText value="Last Update:" />
<h:outputText id="lastUpdated" value="#{transactionLogBean.lastUpdated}" />
</h:panelGrid>
</p:tab>
Here is the full code from within the body tags:
<p:layout id="mainLayout" fullPage="true" style="height:100%" >
<h:form id="transactionLogForm">
<p:poll widgetVar="poll"
interval="#{messageBean.refreshInterval}"
listener="#{messageBean.refreshLiveData}"
update=":transactionLogForm:tabViewGrids:messageTable :transactionLogForm:tabViewGrids:timestatTable :transactionLogForm:tabViewMain:liveViewPanel"/>
<p:layoutUnit id="topHeader" position="north" size="178" >
<ui:include src="inc_menu.xhtml" />
</p:layoutUnit>
<p:layoutUnit id="center" position="center" >
<div>
<p style="font-size: 20px; font-weight: bold; padding: 0px 0px 0px 10px">Transaction Logs</p>
</div>
<p:tabView id="tabViewMain" orientation="top">
<p:tab title="Reference No">
<h:panelGrid columns="2" cellpadding="5">
<p:inputTextarea id="referenceNo" rows="1" cols="100" value="#{transactionBean.referenceNo}" style="width:300px"/>
<p:commandButton id="refreshBtnMain0" value="Search" action="#{transactionBean.searchTranLogDetails(true)}"
update=":transactionLogForm:transactionSearchTable" ajax="true"
oncomplete="txnDialog.show()"
style="vertical-align: baseline"/>
</h:panelGrid>
</p:tab>
<p:tab title="Log Id">
<h:panelGrid columns="2" cellpadding="5">
<p:inputText id="logID" value="#{transactionLogBean.logID}" style="width:300px"/>
<p:commandButton id="refreshBtnMain1" value="Refresh" action="#{transactionLogBean.refreshData}" update=":transactionLogForm:tabViewGrids:messageTable :transactionLogForm:tabViewGrids:timestatTable" ajax="true" />
</h:panelGrid>
</p:tab>
<p:tab title="Date Range">
<h:panelGrid columns="5" cellpadding="5">
<h:outputText value="Start Date:" />
<p:calendar id="StartDate" pattern="dd/MM/yyyy HH:mm:ss" navigator="true" value="#{transactionLogBean.startDate}" />
<h:outputText value="End Date:" />
<p:calendar id="EndDate" pattern="dd/MM/yyyy HH:mm:ss" navigator="true" value="#{transactionLogBean.endDate}" />
<p:commandButton id="refreshBtnMain2" value="Refresh" action="#{transactionLogBean.refreshData}" update=":transactionLogForm:tabViewGrids:messageTable :transactionLogForm:tabViewGrids:timestatTable" ajax="true" />
</h:panelGrid>
</p:tab>
<p:tab id="liveViewTab" title="Live View">
<h:panelGrid id="liveViewPanel" columns="6" cellpadding="5">
<h:outputText value="Live View Enabled: " />
<p:selectBooleanCheckbox value="#{messageBean.liveViewActive}">
</p:selectBooleanCheckbox>
<h:outputText value="Interval: " />
<p:spinner id="interval" value="#{transactionLogBean.refreshInterval}" />
<h:outputText value="Last Update:" />
<h:outputText id="lastUpdated" value="#{transactionLogBean.lastUpdated}" />
</h:panelGrid>
</p:tab>
</p:tabView>
<p:tabView id="tabViewGrids">
<p:tab title="Message Logs">
<ui:include src="inc_messagelogs.xhtml" />
</p:tab>
<p:tab title="Timestat Logs">
<ui:include src="inc_timestatlogs.xhtml" />
</p:tab>
</p:tabView>
<p:dialog header="Log Message" widgetVar="logDialog" id="logDlg" showEffect="fade">
<h:outputText id="msg" value="#{transactionLogBean.selectedLogMessage}"/>
</p:dialog>
<p:dialog header="Transaction Search Results" widgetVar="txnDialog" resizable="false" id="tranDlg"
showEffect="fade" modal="false" position="center">
<p:dataTable id="transactionSearchTable" value="#{transactionBean.tranlogList}"
var="t" widgetVar="tranSearchTable" rowKey="#{t.transactionId}"
selectionMode="single" selection="#{transactionBean.selectedTranlog}"
paginator="true" rows="10" style="font-size:14px"
rowStyleClass="#{t.rowColour}">
<p:ajax event="rowSelect" update=":transactionLogForm:tabViewGrids:messageTable :transactionLogForm:tabViewGrids:timestatTable"
listener="#{transactionLogBean.refreshData(transactionBean.selectedTranlog.logId)}"
oncomplete="txnDialog.hide()" global="false"/>
<p:column style="text-align: left">
<f:facet name="header">
Tran Id
</f:facet>
#{t.transactionId}
</p:column>
<p:column style="text-align: left" sortBy="#{t.dateCreated}">
<f:facet name="header">
Date/Time
</f:facet>
#{t.dateCreated}
</p:column>
<p:column style="text-align: left" sortBy="#{t.transactionType}">
<f:facet name="header">
Tran Type
</f:facet>
#{t.transactionType}
</p:column>
<p:column style="text-align: left">
<f:facet name="header">
Amount
</f:facet>
#{t.amount}
</p:column>
<p:column style="text-align: left">
<f:facet name="header">
Result
</f:facet>
#{t.externalMessageCode}
</p:column>
</p:dataTable>
</p:dialog>
</p:layoutUnit>
</h:form>
</p:layout>
I'm not getting any errors reported, so all the references must be ok - please help!!!
I'm using JSF 2.0, Primefaces 3.4.RC1
Extract from generated html:
<div id="transactionLogForm:tabViewMain:liveViewTab" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-helper-hidden" role="tabpanel" aria-hidden="true"><table id="transactionLogForm:tabViewMain:liveViewPanel" cellpadding="5">
<tbody>
<tr>
<td>Live View Enabled: </td>
<td><div id="transactionLogForm:tabViewMain:j_idt27" class="ui-chkbox ui-widget"><div class="ui-helper-hidden-accessible"><input id="transactionLogForm:tabViewMain:j_idt27_input" name="transactionLogForm:tabViewMain:j_idt27_input" type="checkbox" /></div><div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default"><span class="ui-chkbox-icon"></span></div></div><script id="transactionLogForm:tabViewMain:j_idt27_s" type="text/javascript">PrimeFaces.cw('SelectBooleanCheckbox','widget_transactionLogForm_tabViewMain_j_idt27',{id:'transactionLogForm:tabViewMain:j_idt27'});</script></td>
<td>Interval: </td>
<td><span id="transactionLogForm:tabViewMain:interval" class="ui-spinner ui-widget ui-corner-all"><input id="transactionLogForm:tabViewMain:interval_input" name="transactionLogForm:tabViewMain:interval_input" type="text" class="ui-spinner-input ui-inputfield ui-state-default ui-corner-all" autocomplete="off" value="10" /><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n"></span></span></a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s"></span></span></a></span><script id="transactionLogForm:tabViewMain:interval_s" type="text/javascript">$(function(){PrimeFaces.cw('Spinner','widget_transactionLogForm_tabViewMain_interval',{id:'transactionLogForm:tabViewMain:interval',step:1.0});});</script></td>
<td>Last Update:</td>
<td><span id="transactionLogForm:tabViewMain:lastUpdated"></span></td>
</tr>
</tbody>
</table>
</div>
Problem solved - it was a backing bean issue after all and had nothing to do with the poll itself which was working fine.