I'm trying to update a primefaces dialog every time it pops up.
The dialog is triggered by a calendar field changing and the actual call is made from the bean.
When I call it the first time, the datas are fine but, if I close it and open it again, it'll still show the old datas.
It kinda makes sense: it's rendered just once and then it's shown and hidden and never actually updated.
I was thinking about updating it before the dialog.show() in the bean, but I don't know how to do that.
Any idea?
<p:dialog
site ="sectionDlg"
widgetVar ="Dlg"
minWidth ="430"
modal ="true"
closable ="true"
resizable ="false"
dynamic ="true"
width="450" height="300"
>
<h:form id="Form">
<br/>
<p:panelGrid id ="dates" styleClass="cmt-no-grid-100perc" columns="4">
<calendar attribName ="offerStartDateDlg"
value ="#{bean.startDate}"
writable ="#{false}"/>
<calendar attribName="offerEndDateDlg"
value="#{bean.endDate}"
writable="#{false}"/>
</p:panelGrid>
<div align="center">
<p:commandButton
onclick ="PF('whichSectionDlg').hide()"
>
</p:commandButton>
<p:commandButton
onclick ="PF('whichSectionDlg').hide()">
</p:commandButton>
</div>
</h:form>
This could make things easier
Ok so, I managed to figure it out.
I solved it by updating it from the bean, right before the call
public void show_dlg_method(){
RequestContext.getCurrentInstance().update("Dlg");
RequestContext.getCurrentInstance().execute("PF('Dlg').show()");
}
with "Dlg" being the widgetVar attribute value.
Some code of what you already have is always helpful. However, depending on what triggers the dialog to show up you can:
add an update to the triggering link/button/whatever or
initiate the update by the dialog itself like shown below.
<h:form>
<p:remoteCommand name="updateDialog" update="dialogpanelid" />
</h:form>
<dialog onShow="updateDialog">
<p:outputPanel id="dialogpanelid"> your content here </p:outputPanel>
</dialog>
Note that:
You need the remoteCommand to reside inside h:form
You should always update the dialogs content, not the dialog itself
the client-side id might differ depending on your page structure.
Related
I have a list of autocompletes that is rendered using a p:dataList. Something like shown below:
<h:panelGroup layout="block" id="outerPanel">
<p:dataList rendered="#{bean.myModel.listOfItems.size()>0}"
var="additionalMP"
value="#{bean.myModel.listOfItems}"
rowIndexVar="index" emptyMessage="">
<div class="wrapper ui-g">
<div>
<p:autoComplete
cache="true"
value="#{bean.myModel.listOfItems[index]}"
completeMethod ="#{handler.getAutoCompleteData}"
rendered ="true"
required="false"
scrollHeight="200"
styleClass="custom"
forceSelection="true">
<p:ajax event="query" global="false"/>
<f:attribute name="filter" value="filterName" />
<f:attribute name="mode" value="edit" />
</p:autoComplete>
</div>
<div>
<p:commandLink value="+ Add" actionListener="#{bean.addAutoComplete()}"
update=":formName:outerPanel"></p:commandLink>
</div>
</div>
</p:dataList>
</h:panelGroup>
So, the Add button inserts a new item in the list and I update the container panel so that the newly added item can be rendered on the UI.
As expected the panel is updated and I see another autocomplete on the UI. But the problem is, all the auto completes now don't work. i.e. they stop firing the query event and don't give any suggestions.
Edited: The partial response that updates the section of form with autocomplete fields, contains some script tags, which probably execute on page ready/load event. So I know that basically the newly added prime faces widgets are not being initialized.
Any idea how I can initialize the newly added autocompletes in the DOM?
The reason for all this trouble was an error in javascript that was caused by trying to scrollTo a particular element on the page from the bean. This crappy line of code in the bean was the source of all the trouble. There was no element on the page with the id messages. A glaring example of why UI should not be coupled in such a way.
RequestContext.getCurrentInstance().scrollTo("formId:messages");
I have a datatable, with a command Button in each row,
The issue is that when i need to open one dialog for the first one, and then by clicking on another button, i need to update it. The issue is when i click on the second button, it closes the dialog and the user have to click once again on the second button to open the dialog again!
Thank's in advance for your help,
i'm here for further explanation
to my knowldege,You can open as many dialog as you want, only make sure that you gave them a unique widgetVar id:
<p:dialog widgetVar="dlg1">
<h:outputText value="Hello from first dialog"/>
</p:dialog>
<p:dialog widgetVar="dlg2">
<h:outputText value="Hello from second dialog"/>
</p:dialog>
...
<p:commandButton value="Open First" onclick="dlg1.show()"/>
<p:commandButton value="Open Second" onclick="dlg2.show()"/>
Clicking on the commandButton above will open two separate dialog parallelly.
I think your buttons made an update to the entire Naming Container that wraps your Dialog. If u do that, that's what you get.
You should update Container inside your Dialog that wraps your component inside.
Example :
Don't :
<h:panelGrid id="gridContainer">
<p:dialog id="dialogComponent>
// components
</p:dialog>
</h:panelGrid>
<p:commandButton update="#{p:component('gridContainer')}"/>
Do :
<h:panelGrid id="gridContainer">
<p:dialog id="dialogComponent>
<h:panelGrid id="insideContainer">
// components
</h:panelGrid>
</p:dialog>
</h:panelGrid>
<p:commandButton update="#{p:component('insideContainer')}"/>
I think you get the idea.
Hope it helps.
I have a datatable and on each row there is a commandLink. On click of commandLink I set the row object to a property of baking bean using f:setPropertyActionListener tag.
When I debut I can see setter of property has been called and correct value is getting passed. On commandLink oncomplete I also have a call to open ConfirmDialog, which shows some values from selected row to user before confirming the action.
The problem is that ConfirmDialog is not showing the latest value selected.
<p:commandLink id="divAdj"
styleClass="commandlink"
value="Confirm"
oncomplete="confirmation.show()"
update="#form"
process="#this">
<f:setPropertyActionListener target="#{corporateActionBean.selectedCARecord}"
value="#{dividendRecord}"/>
</p:commandLink>
<p:confirmDialog id="confirmDialog"
header="Confirm Corporate Action #{corporateActionBean.selectedCARecord.umcaType}" severity="alert" widgetVar="confirmation">
Do you have the dialog in same <h:form> element? Looks like the update="#form" attribute is causing the problem. Try to put table and dialog in the same form and set update="confirmDialog".
I have a button in primefaces, that when is pressed I make some calculations and a new panel should appear showing the results.
I have the code
<p:commandButton value="Submit"
ajax="false" actionListener="#{myBean.search}" oncomplete="panelwv.show();">
</p:commandButton>
<p:panel widgetVar="panelwv" visible="false" closable="true"
toggleable="true">
So, when the button is clicked, the MyBean.search method is called, and when is finished I want the panel "panelwv" to appear, but it does not.
What am I doing wrong?
Thank you!
oncomplete can only be executed if ajax is true. Otherwise the whole page is reloaded. You will probably also want to update the contents of your panel by giving it an id and setting the update property of the command button to this id.
I am getting confused on the constrcut of a Primefaces 3 dialog.
I see question in SO that has this pattern. The form is outside the dialog.
<h:form>
<p:dialog id="dialog" modal="true" widgetVar="dlg">
</p:dialog>
</h:form>
But other question has this.
<p:dialog id="dialog" modal="true" widgetVar="dlg">
<h:form>
</h:form>
</p:dialog>
The Primefaces showcase http://www.primefaces.org/showcase/ui/dialogLogin.jsf favors the latter one.
I am getting confused if there's any valid reason for using the one over the other?
Thanks
You always better use place the <h:form> inside <p:dialog like this
<p:dialog id="dialog" modal="true" widgetVar="dlg">
<h:form>
</h:form>
</p:dialog>
cause you dialog content might be "taken" out from your page and appended some where else in your DOM tree , so if you place the dialog inside some form, it can cause your dialog to be relocated somewhere else and to cause all your buttons/links and other elements to stop working (this is a very common question here in SO)
So in order to be allays on the safe side place you <h:form> tag inside your <p:dialog tag
Another example is when you use appendToBody="true" in dialog :
if dialog is inside an h:form component and appendToBody is enabled, on the browser
dialog would be outside of form and may cause unexpected results. In this case, nest a form inside
a dialog.