After much hair-pulling, I am finally able to open a full html page as a dialog box. I'm doing this with a commandLink as the button needs to be a clickable image.
Unfortunately it seems that commandLink does not handle the "returnDialog" event.
What would be a convenient way do get hold of the data from the dialog in this case ?
<h:form>
<h:commandLink id="pdf" actionListener="#{testBean.viewSelector}">
<h:graphicImage library="images" name="icon_pdf.png" />
<p:ajax event="dialogReturn" etc.. /><!-- This does not work -->
</h:commandLink>
<p:commandButton value="View" icon="ui-icon-extlink" actionListener="#{testBean.viewSelector}">
<p:ajax event="dialogReturn" listener="#{testBean.onPageSelectionSubmitted}" /><!-- This one does but I don't want a button -->
</p:commandButton>
</h:form>
EDIT version + implementation info :
primefaces 5.3
JSF 2.2, mojarra
Related
I have a Primefaces 5.0 modal dialog on a composite control. The dialog has a few field marked as required. When the button on the dialog is clicked I expected the client validation to fire and it seems it does as the backing bean is not called, but the messages are not displaying:
<p:dialog id="dialogCorporateShareHolder" header="Shareholder (Company)"
widgetVar="dlgCorporateShareHolder" modal="true">
<p:panelGrid columns="3" id="corporateShareHolderDetails">
<h:outputLabel for="companyName" value="Company name"/>
<p:inputText id="companyName" required="true"
value="#{cc.attrs.corporateShareHolder.companyName}"
label="Company name"/>
<p:message for="companyName"/>
<f:facet name="footer">
<p:commandButton id="submitCorporate" value="Submit"
update="corporateShareholders"
actionListener="#{cc.attrs.controller.addCorporateShareHolder}"/>
</f:facet>
</p:panelGrid>
</p:dialog>
The dialog displays, the validation gets called (I'm pretty sure), but no message is displayed.
You only need to update the p:message or a parent too, for example with
update="corporateShareholders corporateShareholderDetails"
Btw. I believe best practises are to
have the dialog(s) last in xhtml, outside of other forms
have a form inside the dialog itself
I've been struggling with this for two days with no success and I think it's already time to ask for your help. But first of all, this is what I'm using:
JSF 2 Mojara 2.1.1
Primefaces 3.4.2
Netbeans 7.1.1
Tomcat 7.0.37
And now, the problem: I have a main page which is composed by several other pages using several <ui:include .. /> tags, like this:
<ui:composition template="/resources/templates/template1.xhtml">
<ui:define name="appData">
<p:panelGrid columns="1" id="contenidoAplicacion" styleClass="noborder">
<h:form id="fNewPerson">
<p:panel header="New employee" style="min-height:40em">
<ui:include src="./forms/personal.xhtml" />
<p:accordionPanel styleClass="noborder" activeIndex="3">
<p:tab id="tabSomeData" title="Identidad profesional" >
<ui:include src="./forms/formSomeData.xhtml" />
</p:tab>
....
....
</ui:define>
</ui:composition>
The personal.xhtm file looks like this:
<p:panelGrid>
<p:row>
<p:column >
<h:outputLabel value="Field1"/>
<p:inputText label="Field1" id="field1" value="#{dataBacking.selectedPerson.field1}" tabindex="1"
required="true" size="10" >
<f:convertNumber for="field1" integerOnly="true" groupingUsed="false"/>
</p:inputText>
<p:inputText id="field2" value="#{dataBacking.selectedPerson.field2}" tabindex="2" required="true" size="1" maxlength="1" >
<p:ajax event="keyup" listener="#{dataBacking.check}"
process="field1 field2" partialSubmit="true"
update="field1 field2 photo"/>
</p:inputText>
</p:column>
<p:column rowspan="5" >
<p:graphicImage id="photo" value="#{dataBacking.selectedPerson.photo}" width="90" />
</p:column>
</p:row>
...
</p:panelGrid>
The check() method in the dataBacking class is irrelevant because it only checks if the field1 and the field2 meet some rules and it works properly. The problem comes when the main page is loaded for the first time. In that case, the <p:ajax /> component in personal.xhtml doesn't work. I have to reload the page (simply by pressing the F5 key) and this time it works as it would be expected.
I've been changing some attributes of the component, but nothing seems to work. I really don't know what else to do. Any kind of help will be apreciated.
EDITED. After one more day, I think the problem has nothing to do with Primefaces ajax component, as the title of the question suggested. I've come to this conclusion through these two facts:
The behaviour with the <f:ajax .../> component remains the same.
I've figured out that the view relative to the first time I load the page is not persisted. I'll try to explain myself.
The DataBacking class has defined its scope as view so that the page can "see" all the attributes and methods during the time it's been shown to the user. However, I've noticed that the constructor is called twice: the first time the page is loaded (and then, none of the methods of the class are successfully invoked) and when I refresh the page. In this last case, the behaviour of both the page and the class is the expected one.
This question already has answers here:
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
(6 answers)
Closed 4 years ago.
<p:dataTable id="id" value="#{bean.soemList}" var="account">
<p:commandLink value="#{account.id}" action="#{bean.methodCall}"
update="dialogID" oncomplete="dlg1.show();">
</p:commandLink>
...
<p:dialog header="#{i18n.details}" widgetVar="dlg1" modal="true" height="200" width="600">
<h:panelGroup id="dialogID" layout="block">
<h:outputLabel value="#{bean.var1}"></h:outputLabel>
</h:panelGroup>
</p:dialog>
p:dialog gets updated when the link is outside p:dataTable, but when the link is placed in p:dataTable, p:dialog doesnt show updated value. I need to keep the link in p:dataTable.The component to be updated is not in dataTable.
I have only been able to get a <p:commandLink> within a dataTable to update a component of a dialog if the elements of that dialog were within their own <h:form>.
Example:
<p:dialog appendToBody="true" ...>
<h:form id="dialogForm" ...>
...
</h:form>
</p:dialog>
<p:dataTable ...>
<h:form id="dataTableForm" ...>
...
</h:form>
</p:dataTable>
Also note that I added to the dialog the attribute, appendToBody="true". This is important for locating the dialog by id after an AJAX update.
Hi did you try to append the form id as follows
<form id="myformid">
.....
<p:commandLink value="#{account.id}" action="#{bean.methodCall}" update=":myformid:dialogID" oncomplete="dlg1.show();">
</p:commandLink>
....
<p:dialog header="#{i18n.details}" widgetVar="dlg1" modal="true"
height="200" width="600">
<h:panelGroup id="dialogID" layout="block">
<h:outputLabel value="#{bean.var1}"></h:outputLabel>
....
</form>
Hope it helps !
So I have been stumped most of the day today trying to call a method in my backing bean when a component changes values. Everything works correctly if my components are outside of a <p:dialog>, however when nested inside a dialog the server side never happens. Originally I was working with the <p:calendar> control, but noticed it also didn't work with a simple inputText. The following example works:
<h:panelGrid columns="3">
<h:outputText value="Start"/>
<p:inputText id="startOfRange" value="#{myBean.startRange}" valueChangeListener="#{myBean.startChanged}">
<p:ajax event="change" update="play"/>
</p:inputText>
<h:outputText id="play" style="margin-left: 10px;" value="#{myBean.startRange}"/>
</h:panelGrid>
My backing bean method looks like
public void startChanged(ValueChangeEvent event) { }
This method is invoked after a tab out of the inputText, however when wrapped like the following the method never gets invoked:
<p:dialog widgetVar="efDlg" zindex="10" appendToBody="true" header="Create Custom Date Range"
modal="true" height="375" width="450" resizable="false" closable="false" >
<h:panelGrid columns="4">
<h:outputText value="Start"/>
<p:inputText id="startOfRange" value="#{myBean.startRange}" valueChangeListener="#{myBean.startChanged}">
<p:ajax event="change" update="play"/>
</p:inputText>
<h:outputText id="play" style="margin-left: 10px;" value="#{myBean.startRange}"/>
<p:inputText id="endOfRange" value="#{myBean.endRange}" valueChangeListener="#{myBean.endChanged}"/>
</h:panelGrid>
<div class="customRangeButtons">
<span>
<p:commandButton value="Cancel" onstart="efDlg.hide();" actionListener="#{myBean.cancelCustomDateRange}" update="pGraphs"/>
</span>
<span style="margin-left: 300px;">
<p:commandButton value="Ok" type="submit" onstart="efDlg.hide();" action="#{myBean.saveCustomDateRange()}" update="pGraphs"/>
</span>
</div>
</p:dialog>
Note I am using Primefaces 2.2.1 with Mojarra 2.1.0. Any ideas as to why I can't get the startChanged method to be called when the value has changed?
Maybe I'm wrong about this (I don't have my project code at home to verify) but isn't this:
<p:ajax event="change" update="play"/>
supposed to be:
<p:ajax event="valueChange" update="play"/>
I know that most of the Ajax event values are like the JavaScript event handlers with the 'on' removed, but valueChange is a special value in JSF Ajax tags.
For the record, I sometimes pair up two Ajax child tags inside an inputText, like:
<p:ajax event="valueChange" process="#this" update="whatever"/>
<p:ajax event="keyUp" process="#this" update="whatever"/>
This will deal with each keystroke at it is entered as well as copy-and-paste and loss of focus on the parent input text.
I have also come across the same problem. I am also using a single form and no form inside the dialog. As long as I do not have the appendToBody="true" for my dialog the input values and ajax and submit happens correctly. As soon as I add that attribute with true, for better/correct rendering, the input values are not accepted.
I am using JSF 2.0 & Richfaces 4.0 for my project.There is one model as download file and for that purpose I used
h:outputlink to download file.The file downloads properly.But i used icon to show download option & attached rich:tooltip to show tooltip when mouse hover on that icon but it is not showing.If I used a4j:commandlink then tooltip shows but i cant implelement download functionality using a4j:commandlink. Can anybody tell me what is the reason that tooltip is not working for h:outputlink? Here is my code...
<h:outputLink rendered="#{docList.docType=='FILE' and not empty docList.docName}" value="/FileDownload" title="Download Documents">
<f:param name="fileId" value="#{docList.docId}"/>
<f:param name="fileName" value="#{docList.docName}"/>
<f:param name="fileSize" value="#{docList.docLength}"/>
<h:graphicImage library="images" name="doc_save_icon.png" style="border:0;"/>
<rich:tooltip styleClass="tooltip" layout="block" mode="ajax" value="Download Documents">
Download Documents
</rich:tooltip>
</h:outputLink>
Oh you missed sth the for attribute and id example
<h:commandLink value="TEST12" action="STH" **id="cmdlnk"** />
<rich:toolTip **for="cmdlnk"**>This is test CMD Link</rich:toolTip>
<a4j:commandLink value="TEst" id="cmdlnka4j"></a4j:commandLink>
<rich:toolTip for="cmdlnka4j">This is test A4j LInk</rich:toolTip>
Your New Code :
<h:outputLink id="fileDld" rendered="#{docList.docType=='FILE' and not empty docList.docName}" value="/FileDownload" title="Download Documents">
<f:param name="fileId" value="#{docList.docId}"/>
<f:param name="fileName" value="#{docList.docName}"/>
<f:param name="fileSize" value="#{docList.docLength}"/>
<h:graphicImage library="images" name="doc_save_icon.png" style="border:0;"/>
<rich:tooltip for="fileDld" styleClass="tooltip" layout="block" mode="ajax" value="Download Documents">
Download Documents
</rich:tooltip>
</h:outputLink>