I have a Dialog to input details. At the first time , InputText are empty.
But from the second input, InputText maintain the previous value.
This is my code :
<p:commandButton id="showDialogButton1" type="button" value="add" onclick="dlg1.show()" update="firstname1"/>
<p:dialog id="dialogAjout" header="add department" widgetVar="dlg1" resizable="false">
<h:panelGrid columns="2" style="margin-bottom:10px">
<h:outputLabel for="firstname1" value="Libellé :" />
<p:inputText id="firstname1" value="#{departementBean.departement.libelleDepartement}" />
</h:panelGrid>
<p:commandButton id="submitButton1" value="Valider" oncomplete="dlg1.hide();" action="#{departementBean.addDept()}" update="tabView"/>
</p:dialog>
How can I resolve this, please !!
You can use this primefaces component:
http://www.primefaces.org/showcase/ui/misc/resetInput.xhtml
Regarding dialogs in general: don't put them inside forms.
Have this instead: <p:dialog><h:form>...
Regarding update="" values, if your appendToBody is true, put a colon in front of the id (that means it`s in another form).
You should use the following code:
<h:commandButton value="Reset" style="margin-right:20px;">
<p:ajax update="registrationForm" resetValues="true" />
</h:commandButton>
Add resetValues="true" to your commandButton
<p:commandButton resetValues="true" action="#{departementBean.prepareDialog}" id="showDialogButton1" type="button" value="add" oncomplete="dlg1.show()" update=":dialogAjout"/>
modify you open button like this : open dialog in oncomplete and before that update it by adding its id to update attribute and add action method to do the server side logic to actually init the dialog fields (populate / reset)
<p:commandButton action="#{departementBean.prepareDialog}" id="showDialogButton1" type="button" value="add" oncomplete="dlg1.show()" update=":dialogAjout"/>
b.t.w it looks like your dialog located inside your form together with your opening button , this is a "bad practice" move your dialog away from that form and place a new form inside the dialog , e.g <p:dialog><h:form> ...
I solved this question thus
<p:dialog header="myDialog" widgetVar="dlg1" minHeight="40">
<h:outputLabel for="fild1" value="Fill the field" />
<p:password id="fild1" value="#{myBean.attribute}" required="false" label="Field" redisplay="false" /><br />
<p:commandButton action="#{myBean.method()}" value="Send" oncomplete="dlg1.hide()" update="field1" />
</p:dialog>
When I used the attribute update="field1" of p:commandButton.
The value of field p:password will empty after submitting the form.
I tried do the suggestion of Dani but my attribute going empty when I submitted my form and not stayed empty after submit
Related
I use JSF PrimeFaces 6.1 version
I have confirmDialog for several commandButton looks like
<p:commandButton id="applyButton" icon="icon-interaction-upload-3"
styleClass="icon-button edit-panel-apply main-button"
rendered="#{Bean.editMode}"
onclick="setMainButtonYes(); $('[id$=hiddenApplyButton]').click(); return false;"
title="Apply"/>
<p:commandButton id="hiddenApplyButton"
actionListener="#{Bean.save}"
style="display: none"
onstart="saveScrollPosition();blockUi('blockUI')"
oncomplete="unblockUi('blockUI');setScrollPosition();">
<p:confirm header="Blablabla"
message="Apply"
icon="ui-icon-alert"/>
</p:commandButton>
<p:commandButton id="discardButton" icon="icon-interaction-remove-2"
styleClass="icon-button edit-panel-discard" rendered="#{Bean.editMode}"
title="Discard"
onclick="setMainButtonNo(); $('[id$=hiddenDiscardButton]').click(); return false;"/>
<p:commandButton id="hiddenDiscardButton"
actionListener="#{Bean.discardChanges}"
style="display: none"
onstart="saveScrollPosition();blockUi('blockUI')"
oncomplete="unblockUi('blockUI');setScrollPosition();">
<p:confirm header="Blablabla"
message="Discard"
icon="ui-icon-alert"/>
</p:commandButton>
<p:confirmDialog id="confirmationDialog" global="true" closeOnEscape="true">
<p:commandButton id="yes" value="Yes"
styleClass="ui-confirmdialog-yes edit-confim-yes yesButtonUpdate"
onstart="saveScrollPosition();" oncomplete="setScrollPosition();"
icon="ui-icon-check"/>
<p:commandButton id="no" value="No"
styleClass="ui-confirmdialog-no edit-confim-no noButtonUpdate main-button"
onstart="saveScrollPosition();" oncomplete="setScrollPosition();"
icon="ui-icon-close"/>
</p:confirmDialog>
For Apply button when the dialog opened pressing Enter works right and saves changes, but in second case for discard button i want the Enter button to close the dialog without discarding changes.
I tried to add defaultCommand tag but it doesnt work. How can i set Enter for "no" commandButton in second case?
P.S.
setMainButtonYes/No() function just add needed class to buttons to paint them.
Not a solution as you'd expect, but with the limitations of confirmDialog maybe the only option would be to change the order of the buttons so that the first button was the default command:
<p:confirmDialog id="confirmationDialog" global="true" closeOnEscape="true">
<p:commandButton id="no" value="No" />
<p:commandButton id="yes" value="Yes"/>
</p:confirmDialog>
I have this working button in a p:dataTable
<p:commandButton update=":dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
</p:commandButton>
It sets the selectedTx in the model so that I can do stuff with it in the dialog.
Now I want to add a new functionality to my button, so I chose a p:splitButton:
<p:splitButton update=":dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
<p:menuitem value="Do something else" oncomplete="PF('otherDialog').show()" update=":otherDialog" />
</p:splitButton>
When I use the new button, the selectedTx is not set. Only the first button works.
How to update my property in the model when the new button is clicked ?
The solution was to add the setPropertyActionListener inside of the menuitem (as Apostolos suggested), and the datatable needed to be updated (instead of only the dialog):
<p:splitButton update="datatable :dialog" oncomplete="PF('dialog').show()" title="Do something">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
<p:menuitem value="Do something else" oncomplete="PF('otherDialog').show()" update="datatable :otherDialog">
<f:setPropertyActionListener value="#{transaction}" target="#{transactionModel.selectedTx}" />
</p:menuitem>
</p:splitButton>
<p:overlayPanel appendToBody="true"
id="panel_l#{level.name.hashCode()}
f{filterTypeConfiguration.filterType.name.hashCode()}"
for="conrolForm_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}:
button_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}"
dynamic="true" >
...
and in overlayPanel I have:
<p:inputText value="#{filterTypeConfiguration.textToSearch}">
<p:ajax id="ajaxFilterSearch" event="keyup" update="overlayForm_l
#{level.name.hashCode()} f#{filterTypeConfiguration.filterType.name.hashCode()}
:select_l#{level.name.hashCode()}
f#{filterTypeConfiguration.filterType.name.hashCode()}"
</p:inputText>
I need clean data in inputText when overlayPanel is opening or closing.
I didn't use p:overlayPanel yet but I am able to trigger p:dialog diaglodReturn event like, I think it should be similar like this
<p:ajax event="dialogReturn" update="#form" listener="#{backing.refreshPage}" />
Or
Example from primefaces showcase, How about add action attribute for button?
<p:commandButton id="imageBtn" value="Basic" type="button" action="#{backing.refresh}" />
<p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
<p:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
</p:overlayPanel>
I have an accordion panel with few tabs with in a form . Each tab has a command button (I use the update and process attributes to process specific inputs with a tab). I have set the multiple attribute to true on the accordion panel. When the page initially loads the first tab is open by default. If i hit the enter key on the key board then the command button in the first tab has the keyboard focus and the fields are processed. now I leave the first tab open and open another tab and i hit the enter key the keyboard focus is still on the command button on the first tab . I tried using the p:focus with for/context attributes but with no help.
<h:form id="calculatorsNTools">
<p:accordionPanel multiple="true">
<p:tab title="Teenage Check">
<h:inputText id="age1" required="true" label="Age"
value="#{calculatorBacking.age}" validatorMessage="Enter a value">
<f:validateDoubleRange minimum="1" />
</h:inputText>
<p:message for="age1" id="msgage1" />
<h:panelGrid columns="3" id="gridTAresult">
<p:commandButton id="calculateTA"
action="#{calculatorBacking.calculateTA}" value="Calculate"
process="#this,age1"
update="gridTAresult">
</p:commandButton>
<b> Teenage (y/n)</b>
<h:outputLabel id="resultTA" value="#{calculatorBacking.resultTeenAge}"></h:outputLabel>
</h:panelGrid>
</p:tab>
<p:tab title="Retirement Check">
<h:inputText id="age2" required="true" label="Age"
value="#{calculatorBacking.age}" validatorMessage="Enter a value">
<f:validateDoubleRange minimum="1" />
</h:inputText>
<p:message for="age2" id="msgage2" />
<h:panelGrid columns="3" id="gridREresult">
<p:commandButton id="calculateRE"
action="#{calculatorBacking.calculateRE}" value="Calculate"
process="#this,age2"
update="gridREresult">
</p:commandButton>
<b> Retirement (y/n)</b>
<h:outputLabel id="resultRE" value="#{calculatorBacking.resultRetirement}"></h:outputLabel>
</h:panelGrid>
</p:tab>
</p:accordionPanel>
<h:form>
You can use javascript to accomplish what you want. I am not completely sure how to do it on an accordion but on a tabView it would be:
<p:tabView onTabChange="handleTabChange(event, index)">
Then create a javascript function to set the focus:
function handleTabChange(event, index){
if(index == 1){
var opControl = document.getElementById("calculatorsNTools:calculateTA");
opControl.focus();
}
}
You should be able to modify that to what you need for the accordionPanel.
Is there a way to make it so that when I click a p:button a hidden p:panel appears and is hidden again the next time that it is rendered?
<h:commandButton id="saveButton" value="save" oncomplete="cartComplete.show();">
</h:commandButton>
<p:panel widgetVar="cartComplete">
Shopping Cart Saved
</p:panel>
Try this...
<p:commandButton value="Save" action="#{myBean.setPanelVisibility}" update=":myForm:myPanel"/>
<p:panel id="myPanel" rendered="#{myBean.renderPanel}"/>
In the bean toggle the renderPanel attribute.
Here you go...
<h:body>
<h:form prependId="false">
<p:panel id="myPanel" style="display:none">
Shopping Cart Saved
</p:panel>
<p:commandButton id="show" value="show" onclick="jQuery('#myPanel').show()">
</p:commandButton>
<p:commandButton id="hide" value="hide" update="myPanel">
</p:commandButton>
</h:form>
</h:body>
explanation : style="display:none" make the panel be hidden, and whenver you want to display it use jquery (which comes already with primefaces) .show() function, and finally the update="myPanel" of the second command button will re-render the panel , and it will be hidden again...
Update
Same idea just with styleClass, use styleClass="hide" (instead of style="display:none")
where in your css
.hide {
display:none;
}
in java class
private String renderPanel = "false";
<p:commandButton value="Save" action="#{myBean.setPanelVisibility}" update="myPanel"/>
<p:panel id="myPanel" rendered="#{myBean.renderPanel=='true'}"/>