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>
Related
I have 2 pages. Page 1 shows list of users in a datatable with 2 buttons for creating new user and editing existing user. On click of create and edit button both, a pop-up is opened(Page2) with a inputbox and a save button.
The issue that I am facing is if I click create(on Page1), Page2 opens. If I input something in the inputbox name, click cancel and then select an existing row in the datatable on Page1 and click edit,Page2 is opened again and whatever I inputted on create button click is retained and the PrimeFaces component is not updated even though I catch the dialog's onClose event on click of cancel button and reinitialize my view objects.
Page1:
<ui:composition template="template.xhtml>"
<ui:define name="center" >
<h:form id="myForm1">
<h:panelgroup id="panel1">
<p:datatable ..... />
This datatable shows list of users
<p:panelGrid id="buttonMenu1" >
<p:commandButton id="Create" actionListener="#{myBean1.onCreate}" oncomplete="PF('id2Var').show();" update=":myForm2" />
</p:panelGrid>
</h:panelGroup>
</h:form>
</ui:define>
<ui:define name="dialog">
<ui:include src="Page2" />
</ui:define>
</ui:composition>
Page2:
<p:dialog id="id2" widgetVar="id2Var" >
<p:ajax event="close" listener="#{myBean.onClose}" update=":myForm2" />
<h:form id="myForm2">
<h:panelgroup id="panel2">
<p:outputLabel value="Name" />
<p:inputText id="name" value="myBean.myList.name" />
<p:panelGrid id="buttonMenu" >
<p:commandButton id="Save" actionListener="#{myBean.onSave}" update=":myForm2" />
<p:commandButton id="Cancel" actionListener="#{myBean.resetInput}" update=":myForm2" oncomplete="PF('id2Var').hide();" />
</p:panelGrid>
</h:panelgroup
</h:form>
</p:dialog>
I have a form in which there are two buttons - "button" and "button1" and a split button.
The actionListener methods just update the message content.
When button1 is clicked, only growl is updated. After that if I move mouse over split button items, the selected item gets highlighted.
When button is clicked, whole form is updates. After that if I move mouse over split button items, the selected item does not get highlighted.
This issue was not there in primefaces 3.5 but is there in primefaces 5.0.
Sample code:
<h:form>
<p:growl id="messages" />
<p:commandButton value="Button" actionListener="#{tryBean.save}" update="#form"/>
<p:commandButton value="Button1" actionListener="#{tryBean.save}" update="messages"/>
<p:splitButton value="Save" actionListener="#{tryBean.save}" update="messages" icon="ui-icon-disk">
<p:menuitem value="Update" actionListener="#{tryBean.update}" update="messages" icon="ui-icon-arrowrefresh-1-w" />
<p:menuitem value="Delete" actionListener="#{tryBean.delete}" ajax="false" icon="ui-icon-close" />
<p:separator />
<p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink" />
</p:splitButton>
</h:form>
Thanks
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>
Hello I am trying to implement some primefaces commandbuttons in a p:datatable. My need is almost identical to this post:
f:setPropertyActionListener not invoked
Basically I need to have a column of buttons in a , click on one button will pass the object of the current row to the bean, and a dialog will pop out, showing some information of the chosen object.
The following is the relevant code:
<f:view>
<body>
<h:form id="theForm">
<p:dataTable id="testFailures" value="#{testDetails.report.failures}" var="failure"
styleClass="baseTable">
<p:column id="requestColumn">
<f:facet name="header">
<h:outputText value="Request" id="requestHeaderText" />
</f:facet>
<p:commandButton value="Detail" update="requestDialog"
oncomplete="PF('dlg1').show();" type="button">
<f:setPropertyActionListener
target="#{testDetails.selectedFailure}" value="#{failure}" />
</p:commandButton>
<h:message for="requestDialog" />
<p:dialog id="requestDialog" header="Request Dialog"
widgetVar="dlg1" dynamic="true">
<h:outputText value="#{selectedFailure.request}" />
</p:dialog>
</p:column>
</p:dataTable>
</h:form>
<h:message for="theForm" />
<h:message for="responseDialog" />
<p:dialog id="responseDialog" header="Request Dialog"
widgetVar="dlg2" dynamic="true">
<h:form>
<h:outputText value="#{selectedFailure.request}" />
</h:form>
</p:dialog>
</body>
</f:view>
I tried to put the dialog in different positions (see my "dlg1" and "dlg2"). But neither works. No dialog showing. does not show anything either. And I don't see any error message in the browser's console window. (I think there is a exclamation warning).
I have tried debug mode, and set method for the property "selectedFailure" is not called.
Try to remove type="button" from your commandButton and it should work. Also dialogs should not be placed inside dataTables so the position of "dlg2" is more correct.
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>