PrimeFaces commandButton not working after being loaded from AJAX - jsf

I'm working on a project with JSF + Primefaces 6.0.
On this particular page there is something wrong which I don't know how to fix.
When #selected-operator or #selected-site values are changed the form#operatorsForm is updated correctly via AJAX and the results are displayed in the datatable.
The problem is when I click on the commandButton that is loaded within the datatable the modal dialog "confirmWV" is not showing.
On my other pages I have the same code for modals but buttons there are not loaded via AJAX so this makes me think it is AJAX related issue.
When debugging, clicking on the button is not calling the method confirmOperatorsRightsAction().
Thank you for your help!
page.xhtml
<h:form id="operatorForm">
<p:selectOneMenu id="selected-operator"
value="#{operatorController.selectedOperator}">
<f:selectItem itemValue="" itemLabel="Choose operator" />
<f:selectItems value="#{operatorBean.getOperatorsList()}"
var="operator" itemLabel="#{operator.username}"
itemValue="#{operator.idPk}" />
<f:ajax execute="selected-operator" />
</p:selectOneMenu>
<p:selectOneMenu id="selected-site"
value="#{operatorBean.selectedSite}">
<f:selectItem itemValue="" itemLabel="Choose site" />
<f:selectItems value="#{operatorBean.getSites()}"
var="site" itemLabel="#{site.strname}" itemValue="#{site.idPk}" />
<f:ajax execute="selected-site" />
</p:selectOneMenu>
</h:form>
<h:form id="operatorsForm">
<p:dataTable var="operatorSite"
value="#{operatorBean.getOperatorSites()}"
id="operators-list">
<p:column headerText="#{msg['item.Username']}">
#{operatorSite.operator.username}
</p:column>
<p:column headerText="#{msg['item_SiteName']}">
#{operatorSite.site.strname}
</p:column>
<p:column headerText="">
<p:commandButton
actionListener="#{operatorBean.confirmOperatorsRightsAction(operatorSite)}"
value="#{msg['item_Delete']}"
icon="fa fa-trash">
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
<p:dialog widgetVar="confirmWV" modal="true"
header="#{msg['modal.confirm.title']}" height="150" width="450">
<h:form id="confirmOperatorForm">
<my:confirm />
</h:form>
</p:dialog>
OperatorBean.java
public void confirmOperatorsRightsAction(OperatorSite os) {
//some code here
RequestContext.getCurrentInstance().update("confirmOperatorForm");
RequestContext.getCurrentInstance().execute("PF('confirmWV').show();");
}

Related

Primefaces commandButton actionListener not working inside notificationBar

I am using PF 5.2 for the web app. I wanted to use notificationBar to reside some data inputs and commandButton to trigger these inputs data to the backing bean. Therefore I put a commandButton inside the notificationBar but actionListener is not calling the backing bean method. CommandButton is defined with id of "filterBtn".
The .xhtml page code is in the below:
<h:form>
<p:notificationBar position="top" effect="slide" styleClass="top" widgetVar="bar" style="height:200px;">
<h:panelGrid columns="1">
<h:panelGrid id="filterGrid1" columns="4" >
<h:outputLabel id="vhclIdLbl" value="#{general.vehicleId}"/>
<p:inputText id="fMtsId" value="#{notifyBean.fMtsId}" style="width:200px"/>
<h:outputLabel id="serialNoLabel" value="#{general.serialNo}"/>
<p:inputText id="fSerialNo" value="#{notifyBean.fSerialNo}" style="width:200px"/>
<h:outputLabel id="brandLbl" value="#{general.brand}"/>
<p:selectCheckboxMenu id="fBrand" value="#{notifyBean.fBrands}" effect="slide" style="width:210px"
appendTo="#this">
<f:selectItem itemLabel="#{general.pleaseSelect}" itemValue=""/>
<f:selectItems value="#{notifyBean.brandList}"/>
</p:selectCheckboxMenu>
<h:outputLabel id="modelLabel" value="#{general.model}"/>
<p:selectCheckboxMenu id="fModel" value="#{notifyBean.fModels}" effect="slide" style="width:210px"
appendTo="#this">
<f:selectItem itemLabel="#{general.pleaseSelect}" itemValue=""/>
<f:selectItems value="#{notifyBean.modelList}"/>
</p:selectCheckboxMenu>
<h:outputLabel id="provLabel" value="#{general.province}"/>
<p:selectCheckboxMenu id="fProvince" value="#{notifyBean.fProvinces}" effect="slide" style="width:210px"
filter="true" filterMatchMode="startsWith" appendTo="#this">
<f:selectItem itemLabel="#{general.pleaseSelect}" itemValue=""/>
<f:selectItems value="#{notifyBean.provinceList}"/>
</p:selectCheckboxMenu>
<h:outputLabel id="regionLabel" value="#{general.region}"/>
<p:selectCheckboxMenu id="fRegion" value="#{notifyBean.fRegions}" effect="slide" style="width:210px"
appendTo="#this">
<f:selectItem itemLabel="#{general.pleaseSelect}" itemValue=""/>
<f:selectItems value="#{notifyBean.regionList}"/>
</p:selectCheckboxMenu>
</h:panelGrid>
<p:commandButton id="filterBtn" value="Filter" actionListener="#{notifyBean.filterByProperties()}" icon="ui-icon-arrow-1-n"/>
<p:commandButton value="Hide" onclick="PF('bar').hide()" type="button" icon="ui-icon-arrow-1-n"/>
</h:panelGrid>
</p:notificationBar>
</h:form>
I know it is a simple use of the components but it is not working. Any help?
The notificationBar should not be embedded in a form. Just exchange the notificationBar and form tags, so the form is within the notificationbar.
<p:notificationBar position="top" effect="slide" styleClass="top" widgetVar="bar">
<h:form>
<p:commandButton value="yes" actionListener="#{backingBean.onDeleteButton}" onclick="PF('bar').hide()" />
<p:commandButton value="no" onclick="PF('bar').hide()" />
</h:form>
</p:notificationBar>

Why does p:poll do not start until I click a row of p:dataTable?

I have a p:poll that updates a p:dataTable but the problem is that it does not start updating until I click on a row of the p:dataTable. When the page loads nothing happend until I click a row, after that everything works fine.
I have read about p:poll and have autostart="true" by default.
This is my p:poll
<p:poll interval="5" listener="#{adminUsuarios.actualizarLista()}" update="tblUsuarios" />
This is my p:dataTable
<p:dataTable id="tblUsuarios" var="us" value="#{adminUsuarios.listaUsuarios}" paginator="true" rows="50" paginatorPosition="both" selectionMode="single" selection="#{adminUsuarios.usuarioSeleccionado}" rowKey="#{us.id_User}">
<p:ajax event="rowSelect" oncomplete="PF('editarDialog').show()" update=":myForm:myDialog" />
<p:column headerText="Usuario">
<h:outputText value="#{us.id_User}" />
</p:column>
<p:column headerText="Nombre">
<h:outputText value="#{us.nameU}" />
</p:column>
</p:dataTable>
When a row of a table is clicked I show a dialog. I think the problem could be with this stuff. Everything is in the same h:form and only works (the p:poll) after I click a row of the p:datatable
This is my p:dialog
<p:dialog id="myDialog" widgetVar="editarDialog" header="Editar perfil de usuario #{adminUsuarios.usuarioSeleccionado.id_User}" resizable="false" width="400" showEffect="size" hideEffect="size">
<h:panelGrid columns="2" cellpadding="4" style="margin: 0 auto;">
<h:outputText value="Perfil" />
<p:selectOneMenu id="cboPerfil" value="#{adminUsuarios.usuarioSeleccionado.nivelAlmacen}" >
<f:selectItem itemLabel="..." itemValue="0" />
<f:selectItem itemLabel="2" itemValue="2" />
<f:selectItem itemLabel="1" itemValue="1" />
</p:selectOneMenu>
</h:panelGrid>
</p:dialog>
Everything is showed is the order it is in my code.
It happens because your dialog is not dynamic and fetch it's contents on page load.
At this time no selection has been made and property #{adminUsuarios.usuarioSeleccionado} is null. That cause PropertyNotFoundException.
You can either set p:dialog componet dynamic attribute true or init usuarioSeleccionado variable before page load(for example in bean constructor).

How to update panel by doing action from panel grid in jsf

Trying to update panel by clicking button from another panelgrid.but not working
<h:panelGrid columns="3" id="qualaddpanelgrid12">
<p:selectOneMenu value="#{qualCntrl.qualificationGroup}" id="qualificationGroup" style="width:180px;" disabled="#{qualCntrl.dropDownEnable}">
<f:selectItem itemLabel="Please Select" Value="P" />
<f:selectItems itemLabel="#{qualCntrl.qualificationGroupList()}" value="#{qualCntrl.qualificationGroupList()}" />
</p:selectOneMenu>
<p:commandButton icon="ui-icon-plus" actionListener="#{qualCntrl.enableGroupPanel}" update="qualaddpanelgrid12,groupPanel" ></p:commandButton>
<p:panel id="groupPanel" header="Add New Group" closable="true" widgetVar="groupPanel" style="width:170px;" rendered="#{qualCntrl.groupPanelEnable}">
</p:panel>
groupPanel is not updating.
I guess you problem is that your panel wont appear on the screen.
The cause of this is that you can't update a component which is not rendered. You have to put your p:panel into another p:panel (or any container component) and update the outer component.
e.g.:
<p:commandButton icon="ui-icon-plus" actionListener="#{qualCntrl.enableGroupPanel}" update="qualaddpanelgrid12,updateMe" />
<p:panel id="updateMe">
<p:panel id="groupPanel" header="Add New Group" closable="true" widgetVar="groupPanel" style="width:170px;" rendered="#{qualCntrl.groupPanelEnable}"></p:panel>
</p:panel>

How to reset dropdown on primefaces commandButton without java script?

I want to reset <p:selectOneMenu> in primeface. I used type="reset" this can reset the text fields only not a selectonemenu. My code
<p:panel id="Applyleave_panel" >
<p:selectOneMenu id="leavetype" value="#{requestbean.leavetype}" required="true" style="width:50%;">
<f:selectItem itemLabel="Select type" itemValue="" />
<f:selectItems value="#{requestbean.leave_type}" />
</p:selectOneMenu>
</panel>
<p:commandButton value="Reset" type="reset"/>
You can use p:resetInput given that your component is inside a form.
<p:commandButton value="Reset" update=":form" immediate="true">
<p:resetInput target=":form" />
</p:commandButton>
EDIT: You can also target the p:panel component as well.
<p:commandButton value="Reset" update=":Applyleave_panel" immediate="true">
<p:resetInput target=":Applyleave_panel" />
</p:commandButton>
I use the below
<p:commandButton id="resetSearchCir" type="reset"
value="#{button.reset}" immediate="true">
<f:ajax event="click"
listener="#{searchBean.resetActionListener}" render="#form" />
</p:commandButton>
public void resetActionListener(AjaxBehaviorEvent event) {
LOG.info("Reset button clicked...");
setResetClicked(true);
// re-initialise your form field objects which you want to reset
logWarn("All values have been reset. Please enter the new values to search again.");
}

JSF PrimeFaces overlayPanel submit value

I would like to submit value form jsf page to bean from overlayPanel with checkbox like this:
To show overlay panel and ajax submission I use this code, and see it's OK in debugger:
<p:commandButton id="joinBtn" value="Basic" type="button" disabled="#{dataPropertyCurrent.notJoinable}"/>
<p:overlayPanel id="joinPanel" for="joinBtn" appendToBody="true" dynamic="false">
<f:facet name="header">Details</f:facet>
<p:dataList value="#{treeBean.getDataPropsCouldBeJoinedWith(dataPropertyCurrent)}" type="definition" var="dataJoinVal">
<h:panelGrid columns="2" cellpadding="10">
<h:column>
<p:selectBooleanCheckbox value="#{dataJoinVal.checked}" id="cbID">
<p:ajax event="change" update="cbID" partialSubmit="true"/>
</p:selectBooleanCheckbox>
</h:column>
<h:column>
<h:outputText value="#{dataJoinVal.caption}" />
</h:column>
</h:panelGrid>
</p:dataList>
<!--<p:commandButton value="Apply" id="btnApplyJoin" type="button" process="#parent" />-->
<h:outputLabel value="ID: #{dataPropertyCurrent.joinDataPropertyId}" />
</p:overlayPanel>
But after it when the overlayPanel is hidden and form submit button being pressed with this code:
<p:commandButton value="Apply join" update="joinAccordionPanel,dsAccordionPanelMain" actionListener="#{treeBean.applyJoinOptions}" />
it sets "false" to bean boolean value again.
So how to submit overlayPanel value to bean properly?
PrimeFaces version: 3.5
I've found explanation here: http://forum.primefaces.org/viewtopic.php?f=3&t=30550#p97737:
"If you are using appendToBody, it's strongly recommended to have a form inside the overlayPanel component that wraps all of the input fields and buttons. This is what you have done in your last solution. However, this means that you cannot place the overlayPanel inside another form in the xhtml page because of the limitation on nesting forms. The best solution is typically to avoid appendToBody wherever it's not absolutely necessary."
Edit
I've added <h:form> inside overlayPanel, and now it works fine:
<p:overlayPanel id="joinPanel" for="joinBtn" appendToBody="true" dynamic="true" >
<h:form id="formTmp">
<f:facet name="header">Details</f:facet>
<p:dataList value="#{treeBean.getDataPropsCouldBeJoinedWith(dataPropertyCurrent)}" type="definition" var="dataJoinVal">
<h:panelGrid columns="2" cellpadding="10">
<h:column>
<p:selectBooleanCheckbox value="#{dataJoinVal.checked}" id="cbID">
<p:ajax event="change" update="cbID" partialSubmit="true"/>
</p:selectBooleanCheckbox>
</h:column>
<h:column>
<h:outputText value="#{dataJoinVal.caption}" />
</h:column>
</h:panelGrid>
</p:dataList>
</h:form>
</p:overlayPanel>

Resources