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.
Related
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.
I've searched everywhere but couldn't find an answer for my problem, All most all questions and answers are relates to selectOneMenu. Iam using selectOneListbox component in my page as shows below
<h:selectOneListbox id="basic" value="#{location.selectedCategory}" style="width: 400px; border: none;" >
<f:selectItems value="#{location.categories}" var="y" itemLabel="#{y.title} (#{y.itemCount})" itemValue="#{y}" />
<f:ajax listener="#{location.onNodeSelect}"/>
<f:ajax render="itemsPanel" execute="#this"/>
</h:selectOneListbox>
My bean,
#ManagedBean(name = "location")
#SessionScoped
public class LocationServiceBean extends BaseService implements Serializable{
public void onNodeSelect(AjaxBehaviorEvent event) {
log.info("Entering method : onNodeSelect : ");
if(null != selectedCategory){
GetCategoriesAndItemsResponse response =getLocationSupport().getItemsByCategoryAndLocation(selectedCategory.getId(), selectedLocationId);
if(response.getStatusCode().equals("0"))
{
items = response.getData().getItems();
log.info("Items size: " + items.size());
}
}
}
}
Problem here is, above listener in the selectOneListBox doesn't get fired when i select items in the list box. Tried with primeface (3.5) component as well, but no luck.
UPDATE: added more code
<h:form id="venuForm" prependId="false">
<legend>2. Choose Venue</legend>
<div class="control-group">
<label class="span3" for="Country">Venue</label>
<div class="controls">
<h:selectOneMenu value="#{location.selectedLocationId}" id="select01" required="true"
requiredMessage="Location is a mandatory field" styleClass="span8">
<f:selectItem itemValue="#{null}" itemLabel="Select Location" noSelectionOption="true" />
<f:selectItems value="#{location.allLocations}" var="c" itemLabel="#{c.title}" itemValue="#{c.locationId}" />
<f:ajax listener="#{location.loadCategoriesListner}" render=":itemForm:categoriesPanel" execute="#this" />
<f:ajax execute="#this" render=":itemForm:itemsPanel" />
</h:selectOneMenu>
</div>
</div>
</h:form>
<h:form id="itemForm" prependId="false">
<legend>3. Choose Gift</legend>
<div class="control-group">
<p:outputPanel id="panel" autoUpdate="true">
<div style="padding-left: 5px; padding-right: 5px; padding-bottom: 5px; border: none;">
<p:panel id="categoriesPanel" rendered="#{location.categories != null}" autoUpdate="true" style=" border: none;">
<h:selectOneListbox id="basic" value="#{location.selectedCategory}" style="width: 400px; border: none;">
<f:selectItems value="#{location.categories}" var="y" itemLabel="#{y.title} (#{y.itemCount})" itemValue="#{y}" />
<f:ajax listener="#{location.onNodeSelect}" render="itemsPanel" execute="#form" event="change"/>
</h:selectOneListbox>
</p:panel>
</div>
</p:outputPanel>
<div class="clear" style="height: 30px;"></div>
<div style="padding-bottom: 5px; padding-top: 5px;">
<p:panel id="itemsPanel" style="float: left;" header="Items">
<ui:repeat value="#{location.items}" var="o" id="itemTable">
<div style="width: 170px; height: 200px; margin: auto; float: left; border-style: solid; border-color: #ECE5B6; border-width: thin;">
<div style="margin: 5px; padding: 5px;">
<div style="margin-bottom: 5px;">
<h:outputText value="#{fnc:getTitleTruncateText(o.title)}" style="margin: 0 auto; padding: 0 0 20px; color: #9A1326; width: 100px; font-size: 14px; text-align: center;" />
<BR />
</div>
<div style="padding-left: 45px; margin-bottom: 5px;">
<h:graphicImage value="http://dev.cdn.abc.com/#{o.imageId}_3.png" id="itemImage" alt="#{o.title}" />
</div>
<div
style="padding: 5px 10px; background-color: #FFC200; margin: 15px auto 0 auto; width: 100px; text-align: center; color: #29000F; border: 1px solid #F2BD00;">
<h:outputText value="$ #{fnc:formatDoubleValue(o.salePrice)}" />
</div>
<div class="clear" style="height: 5px;"></div>
<div style="float: left;">
<div style="float: left; margin-right: 50px;">
<p:spinner id="itemQty" value="#{o.selectedQty}" size="3" min="1" max="#{o.qtyAvailable}" style="width: 20px;" />
</div>
<div style="float: right;">
<h:commandButton value="Add" id="addToCartBtn" rendered="#{o.qtyAvailable > 0 }" actionListener="#{location.addItemToCart(o)}" />
</div>
</div>
</div>
</div>
</ui:repeat>
</p:panel>
</div>
<div class="clear" style="height: 30px;"></div>
<div style="float: right;">
<h:commandButton action="#{location.gotoUserDetails}" value="Next" onclick="return(validate());" rendered="#{!empty location.selectedItems}" />
</div>
</div>
</h:form>
Problem was with the converter. Problem could be solved by getting primitive type value(i.e. integer,string...) from jsf component, or creating a custom converter for classes and referencing it in component(attribute: converter).
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>
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.