To reproduce the problem move pupup in front of pdf and try to resize it. In IE (tested on 8 and 9) popup partialy hides behind pdf. In Firefox and Chrome everything is ok.
<h:body>
<h:form>
<iframe id="overviewFrame" src="http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/pdf/richfaces_reference.pdf" width="900" height="800" />
<h:commandButton value="openPopupWithPdf">
<rich:componentControl target="pdfPopup" operation="show" />
</h:commandButton>
</h:form>
<h:form>
<rich:popupPanel autosized="false" id="pdfPopup" resizeable="true" width="300" height="100" moveable="true" overlapEmbedObjects="true">
<f:facet name="controls">
<a4j:commandLink id="documentHideEditLink" styleClass="hidelink" onclick="#{rich:component('pdfPopup')}.hide()" execute="#this">
<h:graphicImage value="/img/modal/close.png" />
</a4j:commandLink>
</f:facet>
<f:facet name="header">
This is popup header
</f:facet>
<h:panelGrid>
Some text
</h:panelGrid>
</rich:popupPanel>
</h:form>
</h:body>
Same thing if I use a4j:mediaOutput instead of iframe.
Related
i have one form inside the form i have one datatable and one chart so i need to export both in either PDF or excel file, i am using following command for export data
<h:form id="contenForm">
<!-- chart -->
<p:chart type="bar" model="#{dataModel.barModel}" id="barChart" />
<!-- Datatable -->
<p:dataTable value="#{dataModel.list}" var="loc" width="100%" paginator="true"
id="tableResulta" paginatorPosition="bottom" tableStyle="margin:0 auto; width:100%" rendered="#{not empty dataModel.list}">
<p:column>
<f:facet name="header">
<h:outputText value="Surname" />
</f:facet>
<h:outputText value="#{loc.surname}" />
</p:column>
<!-- and other colume-->
</p:dataTable>
<!-- Export button -->
<h:panelGrid columns="2" rendered="#{not empty dataModel.list}">
<h:commandLink immediate="true">
<p:commandButton value="Export excel" immediate="true" />
<p:dataExporter type="xls" target="barChart,tableResulta" fileName="formInformation" />
</h:commandLink>
<h:commandLink immediate="true">
<p:commandButton value="Export PDF" immediate="true" />
<p:dataExporter type="pdf" target="barChart,tableResulta" fileName="formInformation" />
</h:commandLink>
</h:panelGrid>
</h:form>
i have tried above code but not able to export both when i export only datatable then its work properly.
so please help me how can i export chart and datatable into signle file?
thanks in advances.
You just can't, not without creating a complex custom exporter... Sidenote: I think a real reporting tool is in the end a much better fit...
I've got a JSF page with <rich:tabPanel> which contains 4 tabs.
On the 4th tab I'm trying to use <a4j:commandButton> to execute the action and render resulTable.
Here is the shorten example
<rich:tab header="Journal">
<h:form id="filterForm">
<a4j:jsFunction name="submitByEnter"
action="#{smsLogList.refresh}" render="smsTable" />
<s:div id="divSearch">
<rich:collapsiblePanel header="#{messages['search']}"
switchType="client">
<h:panelGrid column="1">
<s:decorate template="/layout/edit.xhtml">
<ui:define name="label">Package number</ui:define>
<h:inputText id="packNum" style="width:200px"
value="#{smsLogList.packNum}">
<a4j:ajax event="keyup" listener="#{smsLogList.refresh}"
ignoreDupResponses="true" requestDelay="1500"
render="smsTable" />
</h:inputText>
</s:decorate>
<!---some other search elements-->
<s:div styleClass="actionButtons">
<a4j:commandButton id="search" value="#{messages['search']}"
render="smsTable" action="#{smsLogList.go}" />
<a4j:commandButton id="reset" value="#{messages['clear']}"
onclick="document.getElementById('filterForm').reset();"
action="#{smsLogList.clear}" render="divSearch,smsTable" />
</s:div>
</h:panelGrid>
</rich:collapsiblePanel>
</s:div>
<!--- results table-->
<h:panelGrid id="smsTable">
<s:div>
<rich:dataTable value="#{smsLogList.resultList}" var="sms"
id="table" rendered="#{not empty smsLogList.resultList}">
<rich:column>
<f:facet name="header">Type</f:facet>
<h:outputText value="#{sms.smsType}" />
</rich:column>
<!---- some other columns-->
</rich:dataTable>
<rich:dataScroller for="table" />
</s:div>
</h:panelGrid>
</h:form>
</rich:tab>
So, when I'm clicking on the <a4j:commandButton> - nothing happens, but if I'm switching to the other tab and back - the result is as necessary.
I tried to change a4j to <h:commandButton>, but after it's pressed the page switches to the first tab.
Is any solution how to work this out?
The solution is quite simple.
I used <h:form> inside other <h:form>. It will not work anyway. When I remove internal - the jsf works smooth and as it should.
I have a p:dialog. My intention is to create a list using p:datagrid and when user clicks an item this dialog will open and show its details. Please consider the example of p:datagrid in the showcase. However, currently it works fine in IE but not in Chrome. If I define "modal=true" then the browser turns black but the dialog doesn't show up.
<p:commandButton update=":form:sharePanel" value="Share" style="font-size: 10px" oncomplete="PF('dlg').show()" rendered="false">
<f:setPropertyActionListener target="#{shareController.current}" value="#{status}" />
</p:commandButton>
<p:dialog widgetVar="dlg" resizable="false" id="sharePanel" styleClass="no-border" modal="true">
<h:outputText value="#{shareController.current.url.url}" />
<h:panelGrid columns="3">
<p:dataGrid value="#{shareController.current.url.NLinkList}" var="nshare" columns="1" rendered="#{shareController.current.url.NLinkList.size() > 0}">
<h:panelGroup styleClass="tag noun">
<h:outputText value="#{nshare.noun}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.VLinkList}" var="vshare" columns="1" rendered="#{shareController.current.url.VLinkList.size() > 0}">
<h:panelGroup styleClass="tag verb">
<h:outputText value="#{vshare.verb}" />
</h:panelGroup>
</p:dataGrid>
<p:dataGrid value="#{shareController.current.url.PLinkList}" var="pshare" columns="1" rendered="#{shareController.current.url.PLinkList.size() > 0}">
<h:panelGroup styleClass="tag prep">
<h:outputText value="#{pshare.prep}" />
</h:panelGroup>
</p:dataGrid>
</h:panelGrid>
</p:dialog>
What is wrong here?
If you are using Primefaces versions before 4.0 use dlg.show() instead of PF('dlg').show().
And try appending the dialog in body using attribute appendToBody="true", because if the Facelet is more complex and if you are using Layouts the dialog won't fire ind some browsers only model will appear.
<p:dialog appendToBody="true" >
I'm trying to rerender a couple of components following the upload of a file (a photo) but for some reason, upon completion of the upload, the components are not being rerendered. Could anyone please help?
I'm using Java 1.6 JSF 1.2 Richfaces 3.3.3 Seam 2.2GA on a 64 bit Windows 7 machine running the app in Tomcat 6;
<h:panelGrid columns="2" id="photoGrid"
rendered="#{not signUpAction.fileUpRendered}" styleClass="standard">
<h:graphicImage value="#{signUpAction.imageUrl}" width="150" height="171" />
<a4j:region>
<a4j:commandLink id="remove" action="#{signUpAction.removePhoto}"
reRender="a4jphotoUpload" value="Remove Photo" />
</a4j:region>
</h:panelGrid>
<h:panelGroup id="photoGroup" rendered="#{signUpAction.fileUpRendered}">
<rich:fileUpload maxFilesQuantity="1"
fileUploadListener="#{signUpAction.listener}"
addControlLabel="Add a photo..." allowFlash="true"
id="photoUploadWidget" autoclear="true"
listHeight="1" immediateUpload="true" acceptedTypes="jpg,jpeg,png,gif">
<f:facet name="label">
<h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}" />
</f:facet>
<a4j:support event="onuploadcomplete" reRender="photoGrid,photoGroup"/>
</rich:fileUpload>
</h:panelGroup>
I finally figured out a solution, I call a a4j:jsFunction that rerenders the components and call it from the onuploadcomplete event (see the code below)
<h:panelGroup id="photoGroup" rendered="#{signUpAction.fileUpRendered}">
<rich:fileUpload maxFilesQuantity="1" fileUploadListener="#{signUpAction.listener}"
addControlLabel="Add a photo..."
id="photoUploadWidget" autoclear="true" onuploadcomplete="reloadPhotoPanel()" onfileuploadcomplete="reloadPhotoPanel()"
listHeight="1" immediateUpload="true" acceptedTypes="jpg,jpeg,png,gif">
</rich:fileUpload>
</h:panelGroup>
</a4j:outputPanel>
<a4j:jsFunction id="reloadPhotoPanel" name="reloadPhotoPanel" reRender="photoPanel,photoGrid,photoGroup" />
The problem is that you're trying to rerender a component that isn't rendered the first time the page loaded, this would be the photoGrid component.
In order to make it work, you should wrap the non-rendererd component inside a UIContainer (like <a4j:outputPanel>) that will be always rendered and rerender the bigger container.
<!--
now you will rerender the a4j:outputPanel
and the inner h:panelGrid will appear/dissapear
-->
<a4j:outputPanel id="photoGrid">
<h:panelGrid columns="2"
rendered="#{not signUpAction.fileUpRendered}" styleClass="standard">
<h:graphicImage value="#{signUpAction.imageUrl}" width="150" height="171" />
<a4j:region>
<a4j:commandLink id="remove" action="#{signUpAction.removePhoto}"
reRender="a4jphotoUpload" value="Remove Photo" />
</a4j:region>
</h:panelGrid>
</a4j:outputPanel>
<!--
following the same logic in the h:panelGroup that renders
the rich:fileUpload component
-->
<a4j:outputPanel id="photoGroup">
<h:panelGroup rendered="#{signUpAction.fileUpRendered}">
<rich:fileUpload maxFilesQuantity="1"
fileUploadListener="#{signUpAction.listener}"
addControlLabel="Add a photo..." allowFlash="true"
id="photoUploadWidget" autoclear="true"
listHeight="1" immediateUpload="true" acceptedTypes="jpg,jpeg,png,gif">
<f:facet name="label">
<h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}" />
</f:facet>
<a4j:support event="onuploadcomplete" reRender="photoGrid,photoGroup"/>
</rich:fileUpload>
</h:panelGroup>
</a4j:outputPanel>
I have the following popupPanel in my JSF Page.
<rich:popupPanel id="popup" modal="true" autosized="true"
resizeable="false" domElementAttachment="form">
<f:facet name="header">
<h:outputText value="Process Teller Transaction" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup')}.hide(); return false;">
x
</h:outputLink>
</f:facet>
<h:panelGroup id="container" layout="block">
<div id="container">
<!--Popup Content -->
</div>
</h:panelGroup>
</rich:popupPanel>
Now if i remove the header facet, from the popup the header disappears. What i want is to have a custom header panel, that is more intune with my application. How can i do this. Secondly the popup should be drag gable. Is there anyway i can achieve this ?
Kind Regards,