how to update h:panelGroup using f:ajax - jsf

How to update h:panelGroup using f:ajax.When, i select h:selectBooleanCheckbox getting value from officeAdd1 and set this value into headOfficeAdd1.Am getting officeAdd1 value in bean but i want to update value into headOfficeAdd1.
Thanks...
<h:form id="form">
<p:panel id="display">
<p:spacer width="20" />
<h:panelGrid columns="6">
<h:outputLabel value="Address:"
style="text-align: left;display: block;width:130px;" />
<p:inputTextarea
value="#{companyInformationBean.current.officeAdd1}"
autoResize="true" style="width:170px;" maxlength="150" />
</h:panelGrid>
<h:panelGrid columns="6">
<h:selectBooleanCheckbox id="remember"
value="#{companyInformationBean.current.checkBox}">
<f:ajax event="click" execute="#form"
listener="#{companyInformationBean.checkBoxValue}" />
</h:selectBooleanCheckbox>
<h:outputLabel value="Same as Registered Office Address"
style="text-align: left;display: block;" />
<p:spacer width="20" />
</h:panelGrid>
<p:spacer width="20" />
<h:panelGroup id="hidepanelgroup">
<h:panelGrid id="getaddress" columns="6">
<h:outputLabel value="Head Office Address:"
style="text-align: left;display: block;width:130px;" />
<p:inputTextarea id="headadd"
value="#{companyInformationBean.current.headOfficeAdd1}"
autoResize="true" style="width:170px;" maxlength="150" />
</h:panelGrid>
</h:panelGroup>
</p:panel>
</h:form>
Bean:
public void checkBoxValue()
{
if(current.getCheckBox()==true)
{
logger.info("getofadd"+current.getOfficeAdd1());
current.setHeadOfficeAdd1(current.getOfficeAdd1());
}
else
{
logger.info("checkbox value false");
}
}

You need to specify client IDs-to-render in the <f:ajax render> attribute.
Thus, given that the second textarea has an ID of headadd, this should do:
<f:ajax ... render="headadd" />
Unrelated to the concrete problem, comparing booleans against booleans in a boolean expression really doesn't make any sense. Just check the boolean itself directly.
if (current.getCheckBox())
By the way, try to use self-documenting property and method names. A property name of remember would be more suitable.

Related

p:remoteCommand update attribute VS p:commandButton update attribute?

I have the following block of code, when i update the "pickList" from the p:remoteCommand it gets updated.
<h:panelGrid columns="1">
<p:panel id="panel" header="Units"
style="margin-bottom:10px; background:#F3F2F2; margin-bottom:0px">
<p:pickList id="pickList"
value="#{AdminController.unitsPickListAll}" var="selectedUnit"
itemLabel="#{selectedUnit}" itemValue="#{selectedUnit}" />
</p:panel>
<h:panelGrid columns="1" styleClass="right-alignment">
<h:panelGroup>
<p:commandButton id="refereshButton" value="#{i18n.refresh}"
immediate="true" action="#{AdminController.getAllUnits}"
oncomplete="rc()" />
<h:outputText value="  " />
<p:commandButton id="saveButton" value="#{i18n.save}"
action="#{AdminController.updateUsedUnits}" />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
<p:remoteCommand name="rc" update="panel" />
But when I use "update" attribute in the "refereshButton", the pickList does not get updated.
Below is the same code but without p:remoteCommand and with update attribute in refereshButton.
<h:panelGrid columns="1">
<p:panel id="panel" header="Units"
style="margin-bottom:10px; background:#F3F2F2; margin-bottom:0px">
<p:pickList id="pickList"
value="#{AdminController.unitsPickListAll}" var="selectedUnit"
itemLabel="#{selectedUnit}" itemValue="#{selectedUnit}" />
</p:panel>
<h:panelGrid columns="1" styleClass="right-alignment">
<h:panelGroup>
<p:commandButton id="refereshButton" value="#{i18n.refresh}"
immediate="true" action="#{AdminController.getAllUnits}"
update="pickList" />
<h:outputText value="  " />
<p:commandButton id="saveButton" value="#{i18n.save}"
action="#{AdminController.updateUsedUnits}" />
</h:panelGroup>
</h:panelGrid>
</h:panelGrid>
What this reason behind this behavior?
The reason you are getting different results is because you are doing different updates. You update panel from the remote command and pickList from the button.
Use update="panel" on your button to get the same result. This will also save you an Ajax request (and some server load).

Multiple JSF progressBar inside same component

I´m trying to show the progress of several batch processes using a progressbar for each one of them. The problem is that only one progressbar is been sent to server side (the last one). Here is the code...
I made a RequestScoped Named bean for the progress beacause I read that for multiple progressBar it is needed a bean instance for each one of the progressbars, but that do not resolve my problem.
I'm using Primefaces 6.1 with JSF 2.2.
Any ideas? Thanks!
<h:form id="formExecutions">
<p:dataGrid id="jobs" value="#{jobExecutorController.jobExecutions}" var="job" rows="5" paginator="true" emptyMessage="#{MessageResources['text.noRecordsFound']}"
paginatorPosition="bottom" columns="1" layout="grid">
<f:facet name="header">
#{MessageResources['text.batchProcesses']}
</f:facet>
<p:outputPanel layout="block" >
<p:panelGrid cellpadding="5" styleClass="vf-panelGrid">
<p:row style="width:100%">
<p:column>
<p:outputLabel for="executionId" value="#{MessageResources['text.executionId']}:" style="font-weight:bold"/>
</p:column>
<p:column>
<h:outputText id="executionId" value="#{job.executionId}" />
</p:column>
<p:column>
<p:outputLabel for="name" value="#{MessageResources['text.name']}:" style="font-weight:bold"/>
</p:column>
<p:column style="width:10%">
<h:outputText id="name" value="#{job.name}"/>
</p:column>
<p:column style="width:50%" rowspan="2">
<p:progressBar id="progressBar" widgetVar="progressBar" ajax="true" value="#{progressController.progress(job)}" labelTemplate="{value}%" styleClass="animated" style="height: 20px; line-height: 20px;" global="false" interval="3000">
<p:ajax event="complete" listener="#{progressController.onCompleteJob(job)}" update="messageDisplay" process="#this"/>
<p:ajax update="jobInfo"/>
</p:progressBar>
</p:column>
<p:column style="width:4%" />
<p:column rowspan="2" style="text-align:right">
<p:commandButton id="restart" onclick="PF('confirmRestartJob').show()" styleClass="coloured-icons-batch restart-image-icon blink"
disabled="#{not job.enableRestartAbandon}" immediate="true" title="">
<f:setPropertyActionListener value="#{job.executionId}" target="#{jobExecutorController.executionIdSelected}" />
<f:setPropertyActionListener value="#{job.name}" target="#{jobExecutorController.executionNameSelected}" />
</p:commandButton>
<p:tooltip for="restart" value="#{MessageResources['text.restartJobExecution']}" position="top"></p:tooltip>
<p:spacer width="10" />
<p:commandButton id="stop" onclick="PF('confirmStopJob').show()" styleClass="coloured-icons-batch stop-image-icon blink"
disabled="#{not job.enableStop}" immediate="true" title="">
<f:setPropertyActionListener value="#{job.executionId}" target="#{jobExecutorController.executionIdSelected}" />
<f:setPropertyActionListener value="#{job.name}" target="#{jobExecutorController.executionNameSelected}" />
</p:commandButton>
<p:tooltip for="stop" value="#{MessageResources['text.stopJobExecution']}" position="top"></p:tooltip>
<p:spacer width="10" />
<p:commandButton id="abandon" onclick="PF('confirmAbandonJob').show()" styleClass="coloured-icons-batch abandon-image-icon blink"
disabled="#{not job.enableRestartAbandon}" immediate="true" title="">
<f:setPropertyActionListener value="#{job.executionId}" target="#{jobExecutorController.executionIdSelected}" />
<f:setPropertyActionListener value="#{job.name}" target="#{jobExecutorController.executionNameSelected}" />
</p:commandButton>
<p:tooltip for="abandon" value="#{MessageResources['text.abandonJobExecution']}" position="top"></p:tooltip>
</p:column>
</p:row>
</p:panelGrid>
<h:panelGroup id="jobInfo" >
<p:panelGrid columns="4" cellpadding="5" styleClass="vf-panelGrid">
<p:outputLabel for="creationDate" value="#{MessageResources['text.creationDate']}:" style="font-weight:bold"/>
<h:outputText id="creationDate" value="#{job.formattedDate(job.createdDate)}" />
<p:outputLabel for="startDate" value="#{MessageResources['text.dateStartProcess']}:" style="font-weight:bold"/>
<h:outputText id="startDate" value="#{job.formattedDate(job.startedDate)}" />
<p:outputLabel for="lastUpdate" value="#{MessageResources['text.lastUpdate']}:" style="font-weight:bold"/>
<h:outputText id="lastUpdate" value="#{job.formattedDate(job.lastUpdate)}" />
<p:outputLabel for="toProcess" value="#{MessageResources['text.itemsToProcess']}:" style="font-weight:bold"/>
<h:outputText id="toProcess" value="#{job.itemsToProcess}" />
<p:outputLabel for="endDate" value="#{MessageResources['text.ended']}:" style="font-weight:bold"/>
<h:outputText id="endDate" value="#{job.formattedDate(job.endedDate)}" />
<p:outputLabel for="processed" value="#{MessageResources['text.itemsProcessed']}:" style="font-weight:bold"/>
<h:outputText id="processed" value="#{job.itemsProcessed}" />
<p:outputLabel for="status" value="#{MessageResources['text.state']}:" style="font-weight:bold"/>
<h:outputText id="status" value="#{job.status}" />
</p:panelGrid>
</h:panelGroup>
</p:outputPanel>
<p:spacer width="5"/>
<p:separator />
<p:spacer width="5"/>
</p:dataGrid>
My RequestScope backing bean...
#Named("progressController")
#RequestScoped
public class ProgressController
{
#EJB
private EJBJobRepositoryLocal ejbJobRepository;
public Long progress(DMJob jobExecution) throws VfCmsSqlException
{
if (jobExecution.getStatus().equals(BatchStatus.STARTED.name())) {
jobExecution.setProgress(ejbJobRepository.getJobProgress(jobExecution.getExecutionId()));
}
PrimeUtil.get().update("formExecutions:jobInfo");
return jobExecution.getProgress();
}
public void onCompleteJob(DMJob jobExecution)
{
Object[] parameters = {jobExecution.getName(), jobExecution.getExecutionId()};
Messages.displayInfoMessage("text.jobComplete", parameters);
}
}
Ok. The problem is that the PrimeFaces().start() method is not been executed over all the components generated by JSF. So, what I did is a javascript function which is executed when the page is fully loaded. In my case the components that I needed to initialize are several progress bar. My components are inside a data scroller which is inside a form, that's why I concat those id's. The 'i' is the index of each of the rendered progress bar in the page.
<script type="text/javascript">
$(window).load(function() {
startProgress();
});
function startProgress(){
var pid = document.getElementsByClassName('ui-progressbar');
var pidLength = pid.length;
for (var i = 0; i < pidLength; i++) {
var id = "formExecutions:scroller:".concat(i).concat(":progressBar");
PrimeFaces.getWidgetById(id).start();
}
}
</script>
And that was all!

<p:dataScroller> reloading automatically on entity edits

I have a p:datascroller configured to display a list of entities and lazy loading them upon clicking the more button.
<h:form id="investigationOperationsForm">
<p:dataScroller
value="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations}"
var="investigationOperation" chunkSize="9" lazy="true"
rowIndexVar="test">
<f:facet name="header">
Scroll down to load investigations
</f:facet>
<h:panelGrid columns="2" style="width:100%"
columnClasses="logo,detail">
<p:commandLink oncomplete="PF('investigationDialogW').show()"
update="investigationEditorForm" immediate="true">
<f:setPropertyActionListener value="#{investigationOperation}"
target="#{investigationManagerBackingBean.selection}" />
<p:graphicImage alt="Investigation Operation"
url="/images/common/investigation-operation.png" />
</p:commandLink>
<!-- h:outputText value="#{investigationOperation.name}" /-->
<p:outputPanel id="pnl">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Name:" />
<h:outputText value="#{investigationOperation.name}"
style="font-weight: bold" />
<h:outputText value="Description:" />
<h:outputText value="#{investigationOperation.shortDescription}"
style="font-weight: bold" />
</h:panelGrid>
<p:draggable for="pnl" />
</p:outputPanel>
</h:panelGrid>
<f:facet name="loader">
<p:outputPanel
visible="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}"
rendered="#{investigationManagerBackingBean.lazyLoadedInvestigationOperations.rowCount gt 10}">
<p:commandLink value="More" />
</p:outputPanel>
</f:facet>
</p:dataScroller>
</h:form>
In addition, I have a dialog that pops up when the p:commandLink oncomplete method is executed where I can update the value of the current selection and persist the changes.
<p:dialog id="investigationDialog"
header="#{msg['inv-manager.invDialog.header.title']}"
widgetVar="investigationDialogW" minWidth="400" minHeight="400"
resizable="false" position="center center" modal="true">
<p:panel id="investigationEditorPanel">
<h:form id="investigationEditorForm">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="name"
value="#{msg['inv-manager.invDialog.nameFieldLabel']}" />
<p:inplace id="nameInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.name}"
id="name" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.nameFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="shortDescription"
value="#{msg['inv-manager.invDialog.shortDescriptionFieldLabel']}" />
<p:inplace id="shortDescriptionInplaceEditor" editor="true">
<p:inputText
value="#{investigationManagerBackingBean.selection.shortDescription}"
id="shortDescription" required="true" immediate="true"
label="#{msg['inv-manager.invDialog.shortDescriptionFieldInputLabel']}" />
</p:inplace>
<h:outputLabel for="description"
value="#{msg['inv-manager.invDialog.descriptionFieldLabel']}" />
<p:inputTextarea id="description" required="false"
label="#{msg['inv-manager.invDialog.descriptionFieldInputLabel']}"
immediate="true"
value="#{investigationManagerBackingBean.selection.description}" />
<p:commandButton id="okButton"
value="#{msg['inv-manager.invDialog.okButton']}" type="submit"
partialSubmit="true" process="investigationEditorForm"
action="#{investigationManagerBackingBean.createOrUpdate()}"
onclick="dlg.hide();" />
</h:panelGrid>
</h:form>
</p:panel>
</p:dialog>
The backing bean is configured to be #ViewScoped and everything works as defined. However, upon update the values of the p:datascroller are reset and the load method of the lazy loading model is executed and the datascroller is repopulated with new values from the database.
I have no reference to the datascroller or its containing form in the p:dialog and am wondering why the datascroller is being updated automagically? What am I missing in the equation. Have I overlooked something or something specific to the p:datascroller model that I need to consider when following this approach?
Look forward to the expertise of the community in resolving this issue.
Many thanks in advance :)

View display wrong behavior when there's a required="true" within the body

I have a view which is working well. However, when I add a required="true" into the body of the view, the view begin to be unable to read backing bean properly. Below is a comparison:
Anyone knows why?
.
Edit: Code fragment supplement
Below is the fragment of my code in which the problem arises. If I add required="true" into any p:inputText (not only the p:inputText that belong to this dialog but any p:inputText inside the html body), it stops displaying information from backing bean, remove it and everything works just fine.
<p:dialog header="Customer Editor" widgetVar="customerEditDialog"
resizable="false" id="customerEditDlg" showEffect="fade"
hideEffect="fade" modal="true">
<h:panelGrid id="editGrid" columns="2" cellpadding="4"
style="margin:0 auto;">
<h:outputLabel for="customerNameEdit" value="Name: " />
<p:inputText id="customerNameEdit" maxlength="30"
value="#{customerController.customerAdd.name}" />
<h:outputLabel for="customerPhoneNumberEdit" value="Phone Number " />
<p:inputText id="customerPhoneNumberEdit" maxlength="15"
onkeypress="if(event.which < 48 || event.which > 57) return false;"
value="#{customerController.customerAdd.phoneNumber}" />
<h:outputLabel for="customerEmailEdit" value="Email: " />
<p:inputText id="customerEmailEdit" maxlength="49"
value="#{customerController.customerAdd.email}" />
<h:outputLabel for="customerAddressEdit" value="Address: " />
<p:inputText id="customerAddressEdit" maxlength="190"
value="#{customerController.customerAdd.address}" />
<f:facet name="footer">
<div style="text-align: right">
<p:commandButton id="editCustomerButton"
update=":form:customerList, :form:messages"
oncomplete="customerEditDialog.hide()" value="Save"
actionListener="#{customerController.editCustomer()}">
</p:commandButton>
<p:commandButton id="cancelEditCustomerButton" update=":form"
onclick="customerEditDialog.hide()" value="Cancel">
</p:commandButton>
</div>
</f:facet>
</h:panelGrid>
</p:dialog>
See if jsf required=true destroys setPropertyActionListener? helps you.
The problem is most likely that the setter in your bean is not to be called because of validation errors somewhere else or you are nesting <h:form> elements.

Variable name in EL Expression 2.2

I feel a little dumb: I am using Primefaces on Tomcat 7 and would like to use those fancy new EL expressions to reduce some code clutter. I figured out how to do this in datatables but I can't get it to work otuside recurring structures which have those handy var attributes. How would I declare the EL parameter for grantRole(String) to be the value of the inputText?
<h:panelGrid columns="3">
<h:outputText value="Name" />
<p:inputText/>
<p:commandButton value="Add" update="associatedPlayers"
action="#{permissionRoleDetailBean.grantRole(associatePlayerName)}" />
</h:panelGrid>
You could do so:
<h:panelGrid columns="3">
<h:outputText value="Name" />
<p:inputText binding="#{playerName}" />
<p:commandButton value="Add" update="associatedPlayers"
action="#{permissionRoleDetailBean.grantRole(playerName.value)}" />
</h:panelGrid>
However, this makes no sense. The normal approach is the following:
<h:panelGrid columns="3">
<h:outputText value="Name" />
<p:inputText value="#{permissionRoleDetailBean.playerName}" />
<p:commandButton value="Add" update="associatedPlayers"
action="#{permissionRoleDetailBean.grantRole}" />
</h:panelGrid>
with
private String playerName; // +getter+setter
public void grantRole() {
System.out.println(playerName); // Look, it's already set by JSF.
}

Resources