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>
Related
I work on a xhtml page which uses two tabs which contain command buttons.
After one command button clicked in Tab1, which contains "Person Information", then the other tab, which has "Address Information" is opened.
My second tab has selectOneMenu with using p:ajax listener. After clicking first button, second tab is not visible, and besides the command button in the Tab1 is not fired.
After using different components such as outputText, components of Tab2 became visible. Could you have any solution for this problem?My code is as shown in below:
Code:
<h:form>
<p:accordionPanel>
<p:tab title="Person Information">
<h:panelGrid>
<p:selectOneMenu filterEnable="true"
disabled="#{bean1.disableChoosePerson}" required="true"
value="#{bean1.person}">
<f:selectItems value="#{bean1.personList}" />
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton value="save" rendered="#{bean1.renderSave}"
action="#{bean1.actionSavePerson}" />
</p:tab>
<p:tab title="Address Information"
disabled="#{bean1.adressDisabled}">
<h:panelGrid>
<p:selectOneMenu value="#{bean1.selectedProvince}"
required="true">
<p:ajax listener="#{bean1.actionHandleChangeProvince}" />
<f:selectItems value="#{bean1.provinceList}" />
</hm:selectOneMenu>
</h:panelGrid>
<h:panelGrid>
<hm:commandButton value="save" rendered="#{bean1.renderSave}"
action="#{bean1.actionSaveAddress}" />
</h:panelGrid>
</p:tab>
</p:accordionPanel>
</h:form>
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).
I've got a dialog with selectOneMenu.
User chooses the decision, presses 'ok' and dialog content changes according to decision (rendering content1.xhtml or content2.xhtml).
The problem is that initial combo is very small, whereas content1.xhtml contains a wide table.
When user chooses 'decision1' and presses 'ok', the dialog extends to the right border of the screen.
It is no longer centered, and the user can't move it (when he tries, it streches instead of moving).
<p:dialog id="mainDialogId" widgetVar="mainDialog" modal="true" appendToBody="true" >
<p:messages autoUpdate="true" />
<h:form id="mainForm">
<p:panel rendered="#{bean.mode eq 'mode0'}">
<p:selectOneMenu id="mainCombo" value="#{bean.decision}" style="width: 100%;">
<f:selectItem itemLabel="" itemValue="" noSelectionOption="true" />
<f:selectItem id="decision1" itemValue="decision1" itemLabel="decision1" />
<f:selectItem id="decision2" itemValue="decision2" itemLabel="decision2" />
</p:selectOneMenu>
<h:panelGroup style="display:block; text-align:right">
<p:commandButton id="ok" value="ok"
actionListener="#{bean.handleDecision()}"
update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}" >
</p:commandButton>
<p:commandButton id="cancel" value="cancel" oncomplete="mainDialog.hide();" immediate="true" />
</h:panelGroup>
</p:panel>
</h:form>
<h:form id="form1" >
<p:panel id="panel1" rendered="#{bean.mode eq 'mode1'}" >
<ui:include src="/WEB-INF/contents/content1.xhtml" />
</p:panel>
</h:form>
<h:form id="form2">
<p:panel id="panel2" rendered="#{bean.mode eq 'mode2'}" >
<ui:include src="/WEB-INF/contents/content2.xhtml" />
</p:panel>
</h:form>
</p:dialog>
Here's a button that displays the dialog:
<p:commandButton value="Go" action="#{bean.prepare()}" update=":#{p:component('mainDialogId')}" oncomplete="mainDialog.show()" />
When I change:
update=":#{p:component('mainForm')}, :#{p:component('form1')}, :#{p:component('form2')}"
to:
update=":#{p:component('mainDialogId')}"
after pressing 'ok' the dialog disappears.
Setting fixed dialog width (width="600") helps, but it's not a solution (it looks bad in both cases).
I want the dialog to recenter itself after it is resized.
Please help.
Primefaces 3.5
When I change to:
update=":#{p:component('mainDialogId')}"
That's the right solution. Stick to it. You need to update the <p:dialog> itself in order to get it to fit.
after pressing 'ok' the dialog disappears.
Prevent that from happening by checking in dialog's visible attribute if 'ok' button was pressed:
<p:dialog ... visible="#{not empty param[ok.clientId]}">
...
<p:commandButton binding="#{ok}" ... />
...
</p:dialog>
I want to create add children button with dialog form feature.
On the page there are tree and modal dialog form. On every node of tree will be the create child button. If you click on create child button, there will be shown modal form, where parentId will be set as id of node where button was clicked
Tree:
<h:form id="TestGroupListForm">
<p:tree value="#{testTreeController.root}" var="node" dynamic="true" cache="false"
selectionMode="single" selection="#{treeBean.selectedNode}" id="tree">
<p:treeNode>
<h:outputText value="#{node.getName()}" /> <p:commandButton id="createButton#{node.getIdTestGroup()}" icon="ui-icon-plus" value="#{bundle.Create}" update="tree" oncomplete="TestGroupCreateDialog.show()"/>
</p:treeNode>
</p:tree>
</h:form>
Dialog Box:
<h:form id="TestGroupCreateForm">
<h:panelGroup id="display">
<p:panelGrid columns="2" >
<p:outputLabel value="#{bundle.CreateTestGroupLabel_name}" for="name" />
<p:inputText id="name" value="#{testGroupController.selected.name}" title="#{bundle.CreateTestGroupTitle_name}" />
<h:inputHidden id="parentId" value="#{testGroupController.selected.parentId}" />
</p:panelGrid>
<p:commandButton actionListener="#{testGroupController.saveNew}" value="#{bundle.Save}" update="display,:TestGroupListForm:tree,:growl" oncomplete="handleSubmit(xhr,status,args,TestGroupCreateDialog);"/>
<p:commandButton value="#{bundle.Cancel}" onclick="TestGroupCreateDialog.hide()"/>
</h:panelGroup>
</h:form>
</p:dialog>
I want that click on
<p:commandButton id="createButton#{node.getIdTestGroup()}" icon="ui-icon-plus" value="#{bundle.Create}" update="tree" oncomplete="TestGroupCreateDialog.show()"/>
Will set value of:
<h:inputHidden id="parentId" value="#{testGroupController.selected.parentId}" />
UPDATE
I have to use action listener testGroupController.nodeListener to set parentId of the new item.
<p:commandButton process="#this" id="createButton" actionListener="#{testGroupController.nodeListener}" icon="ui-icon-plus" value="#{bundle.CreateGroup}" update=":TestGroupCreateForm" oncomplete="TestGroupCreateDialog.show()">
<f:attribute name="rawParentId" value="#{node.getIdTestGroup()}" />
</p:commandButton>
You can add parentId to the existing update= attribute like so:
update="tree parentId"
This will render parentId and set its value to testGroupController.selected.parentId.
Edit
You can process any values from the UI to the been too, by using:
process="myInputId"
Example
<h:form>
<h:inputText id="input"
value="#{bean.value}" />
<h:outputText id="output"
value="#{bean.value}" />
<p:commandButton process="input"
update="output"
value="Submit" />
Upon clicking your button, the value of id="input" will be set in bean.value (as ordered by process="input"). Next your id="output" will be rendered (or updated) with bean.value (as ordered by update="output").
I do not know if this is possible using just primefaces and JSF but I have a panel, which is collapsed on View Entry. I can open the Panel which has a checkbox that triggers an update of the Panel.
The problem is that when the panel is updated by Ajax, the Panel is collapsed again. But I want to retain the current open status of the Panel. It should no close on update. Is this possible?
I use PF 3.2 and JSF2.1
<p:fieldset style="width:200px;height:300px;overflow:auto;">
<h:outputLabel value="Available Applications"
style="font-weight: bold;font-size: 14px;" />
<br />
<br />
<h:panelGroup>
<ui:repeat var="category"
value="#{epsEditController.subscriptionCategoryVOs}">
<p:panel header="#{category.applicationCategory.name}"
id="panell" toggleable="true" closable="false" toggleSpeed="500"
collapsed="true"
widgetVar="panel_#{category.applicationCategory.name}">
<h:panelGrid columns="2" border="0">
<h:outputLabel value="Select all"
style="font-weight: bold;float:left;" />
<p:selectBooleanCheckbox value="#{category.allSelected}">
<p:ajax event="change"
listener="#{epsEditController.selectionChanged(category)}"
update="panell" />
</p:selectBooleanCheckbox>
</h:panelGrid>
<ui:repeat var="subcat"
value="#{category.applicationSubcategoryVOs}">
<p:selectBooleanCheckbox value="#{subcat.selected}"
title="#{subcat.applicationSubcategory.name}"
itemLabel="#{subcat.applicationSubcategory.name}" />
</ui:repeat>
</p:panel>
</ui:repeat>
</h:panelGroup>
</p:fieldset>
The reason the panel was collapsed after each update is caused by using a static collapsed="true" on the panel. This can be fixed in one of two ways
Just updating the content of the panel and not the panel
Keeping track of the state of collapsed state of the panel via ajax and use that state as the value of the collapsedattribute
Updating the content
By putting the form within the panel and only updating that form you effectively update the content instead of the panel. This makes sure that only the form is refreshed and the panel state is kept intact.
<p:panel header="#{category.applicationCategory.name}" id="panell"
toggleable="true" closable="false" toggleSpeed="500"
collapsed="true"
widgetVar="panel_#{category.applicationCategory.name}">
<h:form id="epsAppForm">
<h:panelGrid columns="2" border="0">
<h:outputLabel value="Select all"
style="font-weight: bold;float:left;" />
<p:selectBooleanCheckbox value="#{category.allSelected}">
<p:ajax event="change"
listener="#{epsEditController.selectionChanged(category)}"
update="#form" />
</p:selectBooleanCheckbox>
</h:panelGrid>
........
</h:form>
</p:panel>
Using EL instead of a fixed value
You can put EL in the collapsed attribute instead of the fixed collapsed="true". Something like
collapsed="#{myBean.toggleStates[category.applicationCategory]}"
You can then keep track of the state of the pannel via ajax calls
<p:ajax event="toggle" listener="#{myBean.toggleState(category.applicationCategory)" />
...'myBean' code:
Map<ApplicationCategory, boolean> toggleStates = new HashMap<>();
... prepopulate toggleStates on #init or something
public void toggleState(ApplicationCategory myCategory) {
toggleStates.put(myCategory, !(toggleStates.get(myCategory));
}