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
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 work on primefaces 6.0 and I have a dialog box, called by a command button, I have several element in this dialog box and 2 command button, one is for closing the dialog box, the other (commandButton id="enableDisableButton") is an option of my program. It must display True or False, like a select boolean button. But when I click on the button, it close my dialog box and I don't understand why !
<p:dialog header="Modal Dialog" widgetVar="rulesDialogBox" modal="true"
width="540" height="400" minWidth="540" minHeight="400"
dynamic="true">
<p:panelGrid columns="1" style="border:none !important;">
<h:outputText id="selectedFile" value="#{eventConfigurationView.loadedFile}"/>
<p:fileUpload label="#{msgs.rule_browse}" fileUploadListener="#{eventConfigurationView.handleFileUpload}" mode="advanced"
update="selectedFile" auto="true" sizeLimit="100000" allowTypes="/(\.|\/)(xls)$/"
minHeight="30px" minWidth="110px"
style="margin-bottom:20px;" />
<!-- allowTypes="/(\.|\/)(xls|csv|xlsx)$/" -->
<p:commandButton value="#{msgs.download}" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);" style="margin:5px;"
minHeight="30px" minWidth="110px">
<p:fileDownload value="#{eventConfigurationView.file}" />
</p:commandButton>
<p:commandButton id="enableDisableButton"
value="#{eventConfigurationView.myEnable}" style="margin:5px;"
action="#{eventConfigurationView.buttonAction}"
ajax="false"
minHeight="30px" minWidth="110px">
</p:commandButton>
<p:commandButton value="#{msgs.close}" onclick="PF('rulesDialogBox').hide();" type="button" style="margin:5px;"
minHeight="30px" minWidth="110px"/>
</p:panelGrid>
</p:dialog>
public void buttonAction() {
System.out.println("buttonAction");
}
Supposing you refer to p:commandButton id="enableDisableButton" you have disabled ajax on it via ajax="false".
This reloads the entire page on click. As the initial state of the p:dialog is hidden, it looks like the dialog disappers while in fact the page has reloaded completely.
I have primefaces tree with button and outputtext in treenode. Ajax row select event calls rendering of button. The button has primefaces tired menu which has to appear when button is clicked. The problem is that the button click calls the row select event and the button is rerendered and the menu dissapeared.
<p:tree id="tree1" value="#{treeDNDView.root1}" var="node" selectionMode="single"
selection="#{treeDNDView.selectedNode1}">
<p:ajax event="select" update=" mainform:tree1"/>
<p:treeNode>
<h:panelGrid columns="3" columnClasses="width-5pct,verticalLine,width-95pct">
<p:outputPanel>
<p:commandButton id="dynaButton" value="Show" rendered="#{treeDNDView.selectedNode1.data eq node}" type="button"/>
<p:tieredMenu id="treeNodePanel" overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:menuitem value="Save" action="#{menuView.save}"/>
</p:tieredMenu>
</p:outputPanel>
<p:spacer width="5px"/>
<p:outputPanel>
<h:outputText value="#{node}" escape="false"/>
</p:outputPanel>
</h:panelGrid>
</p:treeNode>
</p:tree>
How to separate button click and row select events in this case? How rewrite code to make functionaliry succesfull working?
The problem will be solved by adding the .stopPropagation() to on click event.
<p:outputPanel>
<div onclick="(function(e) { e.preventDefault(); e.stopPropagation(); })(event)">
<p:commandButton id="dynaButton" value="Show" rendered="#{treeDNDView.selectedNode1.data eq node}" type="button"/>
<p:tieredMenu id="treeNodePanel" overlay="true" trigger="dynaButton" my="left top" at="left bottom">
<p:menuitem value="Save" action="#{menuView.save}"/>
</p:tieredMenu>
</div>
</p:outputPanel>
I have an inputTextArea in a dialog and wanted that the bean property shouldn't be sent/changed when the user clicks on the cancel button, but it does.
<p:dialog header="Notizen" id="paketNotizenDialog" modal="true"
widgetVar="paketNotizenDialogWV">
<h:form>
<p:panelGrid columns="1">
<p:inputTextarea scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Save" process="#form" oncomplete="PF('paketNotizenDialogWV').hide();"/>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
</h:form>
</p:dialog>
The button which opens the dialog:
<p:commandButton id="notizEintragButton" value="T" process="#this"
onclick="PF('paketNotizenDialogWV').show();" />
Any hints? Thanks in advance.
As you are using the commandButton, the default behaviour would be to submit the enclosing form with ajax request.
I suspect what you want to do here is to reset the form input and close the dialog. In that case you should go for the type="reset" which according to the primefaces doc:
Reset buttons do not submit the form, just resets the form contents.
And once that is done, trigger your closing javascript code:
<p:commandButton value="Cancel" type="reset"
onclick="PF('paketNotizenDialogWV').hide();"/>
If you do not want to reset the form, just close the dialog then use:
<p:commandButton value="Cancel" type="button"
onclick="PF('paketNotizenDialogWV').hide();"/>
Which according to the primefaces doc would:
Push buttons are used to execute custom javascript without causing an
ajax/non-ajax request. To create a push button set type as "button"
Update
If you want to reset the values from the backing bean then use reset input fields functionality of primefaces.
In your case it would be something like:
<p:panelGrid columns="1">
<p:inputTextarea id="input" scrollHeight="200" rows="6" cols="33" autoResize="false"
value="#{paketErstellenDialogController.selectedPaket.notiz}" />
</p:panelGrid>
<p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();"
process="#this" update="input" >
<p:resetInput target="input" />
</p:commandButton>
just add type="button" and remove process="#none" update="#none"
from <p:commandButton value="Cancel" oncomplete="PF('paketNotizenDialogWV').hide();" process="#none" update="#none" />
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>