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'}"/>
Related
I'm currently implementing a data table with a delete function in prime faces. Before deleting the user confirms his decision inside a dialog: if it's a "yes", then the "current" row (aka on which the user clicked the delete button) should be deleted. Currently the last row gets deleted irrespectable of on which row delete action has been triggered:
<p:dataTable var="var" value="#{bean.list}">
//some columns
//relevant column
<p:column id="id">
<p:commandButton id="deleteButton" onclick="PF('deleteDialog').show();" />
<p:confirmDialog id="deleteDialogId" widgetVar="deleteDialog" appendTo="#form">
<p:commandButton id="confirm" onclick="PF('deleteDialog').hide();"
actionListener="#{bean.deleteRowAction(var)}" />
<p:commandButton id="cancel" onclick="PF('deleteDialog').hide();" />
</p:confirmDialog>
</p:column>
</p:dataTable>
It seems like the actionListener of confirm button cannot access the current row by only getting var as an input. If I get rid of the dialog and trigger the action listener on deleteButton instead, everything works as expected:
// works, but no dialog
<p:dataTable var="var" value="#{bean.list}">
//some columns
//relevant column
<p:column id="id">
<p:commandButton id="deleteButton" actionListener="#{bean.deleteRowAction(var)}" />
</p:column>
</p:dataTable>
I have found How can I pass selected row to commandLink inside dataTable or ui:repeat? as well as JSF Delete entity on DataTable with p:dialog but unfortunately it didn't help.
Is there a way to somehow pass "the current" table entry onto an external button?
There is an easier way to do this, by using the p:confirmDialog. This allows you to simply add p:confirm to your p:commandButton and you're done:
<h:form>
<p:dataTable var="var" value="#{bean.list}">
<p:column id="id">
<p:commandButton id="deleteButton"
action="#{bean.deleteRowAction(var)}">
<p:confirm header="Confirmation"
message="Are you sure?"
icon="pi pi-exclamation-triangle" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:confirmDialog global="true">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes" icon="pi pi-check" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no" icon="pi pi-times" />
</p:confirmDialog>
</h:form>
I just use confirm right inside the column:
<p:dataTable var="item" ...
<p:column headerText="Item">
<p:commandButton action="#{myBean.deleteItem(item)}">
<p:confirm header="Confirmation" message="Delete item?" icon="ui-icon-alert"/>
</p:commandButton>
</p:column>
I have a JSF form with a Slider and a reset button :
<div class="field">
<p:outputLabel for="amount" value="Amount" />
<h:panelGrid columns="1" style="margin-bottom: 10px" id="amount">
<p:inputText id="slider" value="#{myBean.myBo.amount}" />
<p:slider for="slider" maxValue="20" />
</h:panelGrid>
</div>
<h:commandButton value="Reset" type="reset" action="#{myBean.reset}" update="form" process="#this" class="button"></h:commandButton>
The reset function looks like this :
public void reset() {
RequestContext.getCurrentInstance().reset("form:form");
this.registrationFormBo.clear();
}
when resetting the slider its output looks like this :
The p:inputText has the correct value while the slider itself has the value 9 in this example.
Problem
The slider does not reset while the value does.
SOLUTION
I solved This problem by using Primefaces p:resetInput. The final html of the reset button looks like this:
<p:commandButton value="Reset" update="registrationForm" process="#this" >
<p:resetInput target="registrationForm" />
</p:commandButton>
This resets the slider and every other element in the form correctly.
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>
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.
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