I have encountered a problem with updating a dialog in a tabview ui:include page:
I have my page:
<p:tabView id="tabView" widgetVar="tabViewMain" >
<p:tab title="P1" >
<ui:include src="page1.xhtml"/>
</p:tab>
<p:tab title="p2">
<ui:include src="page2.xhtml"/>
</p:tab>
</p:tabView>
In page 2 I have a dataTable with:
the onDbClickByElement method try to do instruction and then show a dialog
<p:dialog closeOnEscape="true" id="editEtudeInListIdByElement"
header="Traitement de Lot #{infoGeneralesManagedBean.selectedElemetRadio.lot} selectionné" widgetVar="editEtudeInListByElement"
width="700" height="100%">
<h:form id="editEtudeInListformByElement">
</h:form>
</p:dialog>
The problem comes when i tried to update the dialog as follows:
<p:ajax event="rowDblselect" listener="#{infoGeneralesManagedBean.onDbClickByElement}"
update=":tabView:t:editEtudeInListIdByElement" />
Where i got this error :Cannot find component with expression
":tabView:t:editEtudeInListIdByElement" referenced from
"tabView:t:listInjection".
I always update my dialog like this and it's okay but now I don''t know what happens with the code!
Can I have any help how to correctly do the update of the dialog from a tabView
try
<p:ajax event="rowDblselect" listener="#{infoGeneralesManagedBean.onDbClickByElement}"
update=":tabView:editEtudeInListIdByElement" />
If it still fails, try to open your browser developer's tool and locate your "editEtudeInListIdByElement" element. You could try to use the id of that element. (:tabView:xxxx)
Related
I working with primefaces 6.2 on JavaEE 8 .
I have a basic dialog with a commandbutton created a modal over that .(Sory for bad english !)
I want to close modal without closing basic dialog .
How can fix this problem ?
<p:dialog header="Basic Dialog" id="user-management" widgetVar="user-management" width="700px" height="300px" resizable="false">
<p:toolbar>
<f:facet name="left">
<p:commandButton type="button" title="Add" icon="ui-icon-plus" onclick="PF('userDialog').show();"/>
</f:facet>
</p:toolbar>
<p:spacer/>
<p:dataTable value="#{userGroupBean.userSet}" var="user">
// Show user information
</p:dataTable>
</p:dialog>
<p:dialog header="User"
widgetVar="userDialog"
closeOnEscape="true"
resizable="true"
modal="true"
showEffect="fade"
hideEffect="fade"
height="auto"
width="auto">
<h:panelGrid columns="2">
// Some inputs ...
</h:panelGrid>
<p:spacer/>
<div class="dialog-footer">
<p:commandButton value="Save"
oncomplete="PF('userDialog').hide();"
process="#form"
update="user-management"
action="#{userGroupBean.save}"/>
</div>
</p:dialog>
The basic dialog is not 'closed' it is updated via update="user-management" and hence the html that is returned from the server is put in the html dom in with the dialog in the default state: closed. You have several options:
Don't update the dialog but update it's contents (my prefered solution) by adding e.g. a panel inside it and update that
Set a flag in a beanand use visible="#{mybean.dialogIsVisibleFlag}"
in the oncomplete of the ajax call do a PF('user-management').show()
I have a dynamic dialog
<p:dialog
dynamic="true"
closeOnEscape="true"
id="modalID"
modal="true"
>
<p:outputPanel rendered="#{empty testBean.someArrayList}">
empty
</p:outputPanel>
</p:dialog>
When I include this dialog on a page the testBean is not initialized - great, that is what I want. It is only initialized when I show the dialog.
However when I include a p:dataTable in the dialog:
<p:dialog
dynamic="true"
closeOnEscape="true"
id="modalID"
modal="true"
>
<p:outputPanel>
<p:dataTable rendered="#{not empty testBean.someArrayList}" value="#{testBean.someArrayList}" var="item">
<p:column>
#{item}
</p:column>
</p:dataTable>
</p:outputPanel>
</p:dialog>
The testBean is being initialised and testBean.getSomeArrayList() is called on the backing bean.
I have read that this is the case with ui:includes (see Launching dialogs using PrimeFaces via <p:dialog> and <ui:include>) but why is that the case with a p:dataTable? Btw. putting a rendered around the p:dataTable didn't fix the problem either.
What options do I have to not have testBean initialised straight away?
I could use c:if but from my experience you can get strange results when you mix JSTL and JSF. I normally only use it to exclude stuff that will not be rendered (even after some ajax requests). When I used it before with ajax it did sort of worked but could cause unexpected problems.
Another option I could see is to use ui:include with dynamic src e.g.
<p:dialog
dynamic="true"
closeOnEscape="true"
id="modalID"
modal="true"
>
<p:outputPanel id="updateMeWhenOpeningModal">
<ui:insert src="#{dialogManager.testBeanSrc}"/>
</p:outputPanel>
</p:dialog>
And then change the testBeanSrc from path to an empty file to a file containing the p:dataTable.
Are there any other solutions? Which one would have the least side effects?
I try to show a dialog with an action from a menuitem but doesn't work
I have the follow menuitem:
<p:menuitem value="About" action="#{loginManagedBean.showAbout}" icon="icon-info-circled"/>
and in my managed bean I have:
public void showAbout(){
RequestContext.getCurrentInstance().execute("PF('dgAbout').show()");
}
but doesnt work
I use PrimeFaces 5
the dialog to show is:
<h:panelGrid>
<p:dialog widgetVar="dgAbout" header="About us"
hideEffect="fade"
showEffect="fade"
resizable="true"
modal="true">
<h:panelGrid>
<h:outputText value="INFO"/>
</h:panelGrid>
</p:dialog>
</h:panelGrid>
The code was right, the problem was a navigation rule established by a
colleague without inform to me.
Thanks for help
Sorry for the disadvantages
I can't seem to make p:sticky work inside a p:dialog :
my dialog xhtml :
<p:dialog modal="true" height="490" width="700" resizable="false" >
<h:form id="form">
<p:toolbar id="tb">
<p:toolbarGroup align="right">
<p:commandButton value="save" />
</p:toolbarGroup>
</p:toolbar>
<p:sticky target="form:tb" />
</h:form>
</p:dialog>
It works fine from a simple page. any thoughts?
You are not doing anything wrong, it is just not supported. And due to a 'bad' issue report, it is closed as invalid http://code.google.com/p/primefaces/issues/detail?id=6341
Looking at the javascript source code of the sticky component, it checks scrolling of the window and not any other part inside it. So there is a big chance it will also fail in e.g. a p:layout.
I use primeface 3.5. I have a tabview and each tabview has got inputMasks with a form. I want to reset inputMask when i change the tab. I listen ontabchange event and reset value to="" but bean reset values but View doesn't reset.
<p:tabView id="tabViewOS" binding="#{docData.tabView}" dynamic="true" cache="true" rendered="#{userData.opRendered}">
<p:ajax event="tabChange" listener="#{docData.onTabChange}" immediate="true"/>
<p:tab id="tab1" title="AB">
<h:form id="ABForm">
<h:panelGrid id="abgrid" columns="3" cellpadding="5">
<h:outputText value="AB NO: " />
<p:inputMask value="#{docData.abNo}" mask="999-99999999"
id="ABinput" required="true"
</p:inputMask>
<p:message id="msgAB" for="ABinput" showDetail="true" autoUpdate="true" />
<h:outputText value="" />
<p:commandButton value="GETİR" style="float:right;" ajax="false"
action="#{docData.getDoc}" />
</h:panelGrid>
</h:form>
</p:tab>
public void onTabChange(TabChangeEvent event) {
this.activeTabIndex = tabView.getChildren().indexOf(event.getTab());
FacesContext.getCurrentInstance().renderResponse();
System.out.println(this.activeTabIndex);
this.abNo="";
documents.clear();
}
Try changing the way the event is called. Instead of immediate=true use process="#this".
Change this:
<p:ajax event="tabChange" listener="#{docData.onTabChange}" immediate="true"/>
To this:
<p:ajax event="tabChange" listener="#{docData.onTabChange}" process="#this" update="ABinput"/>
i guess as you said -dynamic="true" cache="false">- is solve my problem. Actually I tested program faulty, my problem has already solved. I think in my case cause of this situation cache=false as documentation said. Thank you.
Have a look at the primefaces documentation on p:tabView. On the one hand you have the property dynamic which specifies if the content of a tab is loaded with AJAX when you select some tag. On the other hand there is the property cache which specifies wheter or not the content of a tab is only dynamically loaded the first time you select a tab.
So regarding this informations setting dynamic="true" cache="false" on the p:tabView should do the trick for you.
Another interesting property for you would be activeIndex. As I see you are setting the index of the active tab manually on tab change. If you can submit tabview on tabchange and you have set activeIndex="#{docData.activeTabIndex}" the active tabindex is tracked automatically. Have a look at the documentation if this fits your requirements.