I have a nested datatable that has an Edit command button, that shows a dialog modal,
<p:commandButton value="Edit" oncomplete="PF('editStudy').show()" type="button">
<p:ajax event="click" listener="#{queryStudiesBean.setRenderDialog(true)}" update="editDialogStudy" />
<p:ajax event="click" listener="#{queryStudiesBean.setEditableStudyIndex(studyIndex)}" update="editDialogStudy: />
<p:ajax event="click" listener="#{queryStudiesBean.setEditablePatientIndex(patientIndex)}" update="editDialogStudy" />
</p:commandButton>
I was fixing the issue of keeping the rows of the child datatable expanded after updating, I was following this answer , but I faced another problem that once I load the datatable page, even before I click on the Edit button, the dialog commandButton that has the update attribute gets evaluated,
<p:commandButton process="#form" update="#form,:form2:patient-dt:#{queryStudiesBean.editablePatientIndex}:study-dt" action="#{queryStudiesBean.updateStudy()}" oncomplete="PF('editStudy').hide()" value="Save" styleClass="fixed-button-size" />
, this gives null error as patientIndex is still null, as I didn't even click on the edit button of the datatable to set the patientIndex.
So I managed to solve this by adding rendered="#{queryStudiesBean.renderDialog}" attribute to the dialog.
Now I have difficulties setting this boolean to true in the edit button action, the dialog doesn't shows right now, in the above code, I used oncomplete, and set the boolean value in <p:ajax> (as both action attribute, and <f:setPropertyActionListener> doesn't work for me, I was thinking that the boolean will be set to true before the oncomplete gets called, so the dialog shows, but this is not happend, can someone explains to me why? I saw alots of posts but no one worked for me.
full datatable code
full dialog code
I'm using:
primefaces 6.2,
java8
If your update="#form,:form2:patient-dt:#{queryStudiesBean.editablePatientIndex}:study-dt references parentIndex, it will already been called when the button is rendered.
Your update="editDialogStudy" needs to be update=":editDialogStudy" because it's
inside a row of a datatable.
You update the form, but the rendered is outside the form, so it
won't be updated. Put a <h:panelGroup... around the dialog and update
the panelGroup
Related
<p:commandButton id="excelAccountLevelOneAccLvl1" ajax="false" icon = "fa fa-fw fa-download" >
<f:param name="accountLevelOneFormRequest" value="accountLevelOneFormRequest" />
<p:dataExporter type="xlsx" target="baselineOneTable"
fileName="#{exportToExcelPageBean.fileName}"
postProcessor="#{exportToExcelPageBean.postProcessXLS}" />
</p:commandButton>
On clicking this button, somehow the forms seems to update and it activates the Faces validation and asks me to fill enter the mandatory field values! I can't figure out why! There is not update parameter here at all!
update is for ajax requests only. You are using ajax="false" which means the commandButton activates a
full page request. That in turn means that the whole form in which the commandButton is included is
processed. If you want to avoid this put your commandButton in a separate form.
The scenario is like this:
There is a datatable with many rows and each row contains an inputtext, there is a keypad outside the table, when user click a button in the keypad, the inputtext within the selectedRow would be updated, I want it to be onfocus so user can also use keyboard to input further texts.
I used p:commandButton to be the keypad button with use ajax submit to set selectedItem in bean and update the datatable to make the inputtext change, but after that, the focus is either lost or on the first inputtext of the page.
I am using primeface 3.4.
The codes go something like this:
<p:dataTable id="datatable1" var="item" value="#{bean.itemlist}" rowKey="#{item.id}" rowIndexVar="rowIndex"
widgetVar="datatableVar" selection="#{bean.selectedItem}" selectionMode="single">
<p:column>
<p:inputText id="name" value="#{bean.selectedItem.name}"
onfocus="datatableVar.unselectAllRows();datatableVar.selectRow(#{rowIndex})" >
</p:column>
...
</p:dataTable>
<p:commandButton value="1" update="datatable1" id="bt1"
actionListener="#{bean.appendItem('1')}" />
I guest I could use oncomplete event of p:commandButton to set the inputtext focus, but there seems no client side API in p:dataTable to get the selected Row.
I ended up using jQuery selector to select that inputText. In the rendered html code,the selected row(tr) has an attributed "aria-selected='true'".
The JS code goes:
var ele=$($("[aria-selected='true']").find('input').get(0));
The ele is a jQuery component that I can operate with, like ele.focus() or ele.keyup()
I have a form inside a modal dialog and after closing (hiding in fact) one I wanted to reset all inputs that user might have changed. I though about something like as follow:
<p:dialog widgetVar="myDialog">
<h:form id="formId">
<!-- ... -->
<p:commandButton value="Cancel" onclick="myDialog.hide();"
update="formId">
<p:resetInput target="formId" />
</p:commandButton>
</h:form>
</p:dialog>
But the result was not that I expected. After a while of searching I found a solution that was to add process="#this" attribute to the <p:commandButton>. And my question is why it is necessary? What is really happening in backgroud that this process is desired. I don't really get the idea of process attribute at all.
I have done some work with dialog boxes and the way I did to make the form null is, when clicking the button to open dialog box, I ran a method in backing bean which cleared my pojo so my form had empty values.
In your case it could be something like this:
<h:form id="form-button">
<p:commandButton id="AddButton" value="open dialog box"
update=":form" action="#{myBean.myMethodToSetPojoNull}" immediate="true"
oncomplete="PF('myDialog').show()" />
</h:form>
When clicking this button, the called method will set to null all the fields and your dialog box will be empty. Getting back to your question of why process=#this is neccessary much better explained answer is here
What is the function of #this exactly?
You can also reset input after submitting through this method:
<p:commandButton value="Reset Non-Ajax"
actionListener="#{pprBean.reset}" immediate="true" ajax="false">
<p:resetInput target="panel" />
</p:commandButton>
If you don't add process="#this" then by default attribute value will be set to process="#form" which means all the elements in the form are processed. In command buttons process="#this" is mandatory to execute the corresponding actions associated with that button.
You can directly refer the answer from Balusc in this link
What is the function of #this exactly?
i wanted to know if theres a way how to hide a commandbutton to the end users when he deselects all items in the selectCheckboxMenu.
thanks for every comments and suggestions.
Just let the rendered attribute of the command button check if the very same property behind the value attribute of select checkbox menu does not represent an empty collection. You can re-execute this check by updating a persistent parent component of the button using <p:ajax> on change of the select checkbox menu.
So, in a nutshell:
<p:selectCheckboxMenu value="#{bean.selectedItems}">
<f:selectItems value="#{bean.availableItems}" />
<p:ajax update="button" />
</p:selectCheckboxMenu>
<h:panelGroup id="button">
<p:commandButton value="Submit" rendered="#{not empty bean.selectedItems}" />
</h:panelGroup>
No need for unnecessary code such as additional bean properties or listener methods specifically for value change and rendered attribute or ugly hacks such as valueChangeListener as mentioned by the other answer whose answerer is apparently having JSF 1.x in mind.
For command button set rendered attribute for ex
In managed bean create a boolean variable allCheckBoxNotSelected with getters and setters
For checkboxes in valueChangeListener attribute call a managed bean method which will check current values for all check box. If it is not selected then put false to allCheckBoxNotSelected variable and then upadate command button through its id.
I would like to achieve this functionality.
<p:column>
<p:commandLink value="prihlasit" oncomplete="dlg.show();"
action="#{signForProjectBean.setProjectForDetail(item)}" />
</p:column>
I think is pretty clear what I am trying to do, I would like to display detail of the row in dataTable on which user have clicked. So my approach is to set property of current row to bean and then show the detail in dialog. But it is not working and I am feeling that I am doing something really wrong:-)
If the dialog component is supposed to display the selected item, then you need to ajax-udpate the dialog's content before opening it. Otherwise it will still display the old content as it was when the page is rendered for the first time.
<p:commandLink value="prihlasit" update=":dlg" oncomplete="dlg.show();"
action="#{signForProjectBean.setProjectForDetail(item)}" />
...
<p:dialog id="dlg" ...>