We are using iFrame to display reports generated in the application on the GUI.
The report is correctly displayed on the GUI within the iframe.
However, on certain button click I want the iframe to disappear(render=false). But to my utter disbelief, this is not happening.
Once iframe is rendered on the page, it is not getting rendered=false unless I refresh the entire page.
The iframe is placed inside <rich:layoutPanel>.
I tried keeping iframe inside <h:panelGrid> and <h:panelGroup> and rendered it using there render property however the iframe itself was not coming up.
When it came, even when render attribute of <h:panelGrid> was set to false, the iframe was not being rendered=false.
I understand that iframe will create a separate DOM against the existing DOM for the entire page but there should be some way out to render the iframe based on certain button click.
Code snippet for iFrame:
<h:panelGroup id="checkIFrame" rendered="#{Bean.renderPanelGroup}">
<iframe frameborder="0" align="left"
src="${pageContext['request'].contextPath}/moduleName/PageName.jsf"
name="PdfPnl" id="PdfPnl" scrolling="auto" width="750"
height="500" marginheight="5" marginwidth="10">
</iframe>
</h:panelGroup>
Code snippet for button on clicking which, the iframe should be rendered=false
<a4j:outputPanel id="outButton">
<a4j:commandButton value="Send" immediate="true" status="Hello"
rendered="#{Bean.renderTrueFalse}" reRender="outButton,checkIFrame"
id="Again" process="FormName" actionListener="#{bean.affirmative}"
/>
</a4j:outputPanel>
How can I render the iframe=false/true based on some button click?
You can't reRender a component that has a rendered attribute defined on it. You need to reRender a parent component of checkIFrame that has no rendered attribute defined on it.
UPDATE:
<h:panelGroup id="aParentPanel">
<h:panelGroup id="checkIFrame" rendered="#{Bean.renderPanelGroup}">
<iframe frameborder="0" align="left"
src="${pageContext['request'].contextPath}/moduleName/PageName.jsf"
name="PdfPnl" id="PdfPnl" scrolling="auto" width="750"
height="500" marginheight="5" marginwidth="10">
</iframe>
</h:panelGroup>
</h:panelGroup>
...
<a4j:commandButton reRender="aParentPanel".../>
...
Related
I have to make a webpage with jsf and primafecas, but I don't have to much experience with it. I have to change the content of the page without reloading everything( the background is quite large).
I made a menu(with toolbar) and an iframe to easily change the content (gmap, text, forms, datatable etc). I know it is one of the worst solution, but I couldn't find better.
Now I have to change the menu from the iframe, but it looks impossible, so I'd like to use a nice method instead of the iframe. I tried a few things, but nothing worked well, sometimes i got duplicate id error or nothing worked, but sometimes nothing rendered except the menu.
Now the code looks like this:
<ui:define name="menu">
<h:form id="menuForm">
<p:toolbar activeIndex="#{navigationBean.pageCount}">
<p:toolbarGroup align="right">
<p:commandButton value="menu1" action="#{navigationBean.setUrl(...)}" update=":frmContent,menuForm" />
<p:commandButton value="menu2" action="#{navigationBean.setUrl(...)}" update=":frmContent,menuForm" />
<p:commandButton value="menu3" action="#{navigationBean.setUrl(...)}" update=":frmContent,menuForm" />
<p:commandButton value="menu3" action="#{navigationBean.setUrl(...)}" update=":frmContent,menuForm"/>
</p:toolbar>
</h:form>
</ui:define>
<ui:define name="content">
<h:form id="frmContent" style="height:100%;width:100%" height="100%" width="100%">
<iframe src="#{navigationBean.url}" id="frame" frameborder="0" style="height:100%;width:100%" height="100vh" width="100%"/>
</h:form>
I need a working method to change the content or the whole page without the background.
Try using
<ui:include src="#{navigationBean.url}" />
instead of the iframe.
I have a JSF page with charts without AJAX support. I noticed that the time of loading of the charts is very slow. Is it possible for example to load the body of the JSF page and to display "Loading..." inside the DIVs where the charts are positioned while the chart is being loaded? I use Primefaces for charts generation.
You could experiment with BlockUI and the preRenderComponent event for the chart. Refer this link How to display 'loading' while loading PF chart
you can use this prime-faces ajax code while you are trying to load
<p:ajax event="page" update=":statusbar" onstart="statusDialog.show();" oncomplete="statusDialog.hide();" onerror="statusDialog.hide();"/>
from ajax you are calling to this dialog box
<p:dialog widgetVar="statusDialog" id="statusbar" modal="true" showHeader="false" closable="false" width="250" resizable="false">
<h:form>
//You can also give loading image here
<div class="ft-row ft-center"><img src="#{request.contextPath}/resources/images/loding.gif" /></div>
<h5>Please wait..</h5>
</h:form>
</p:dialog>
when i click the button handler.toggleCreatingTheme() is called, but the outputPanel is not rendering. When i refresh the page(f5) the content of the panel is showed.
<a4j:commandButton styleClass="simple-submit-button"
action="#{handler.toggleCreatingTheme()}"
rendered="#{!handler.creatingTheme}"
value="txt"
immediate="true"
render="newThemeForm" oncomplete="initEditor()" status="statusWait" />
<a4j:outputPanel id="newThemeForm" ajaxRendered="true" rendered="#{handler.creatingTheme}">
this tags are both in a h:form tag, there is just that one h:form.
How do I let the page refreshing on his own, so rendering the panel at the moment when i click the button?
Embed newThemeForm within another a4j:outputPanel and render it instead of reRendering newThemeForm.This is because newThemeForm will not be in DOM when trying to render it as it's rendered attribute will still be false.
Like:
<a4j:outputPanel id="outerPanel>
<a4j:outputPanel id="newThemeForm" rendered="#{bean.booleanvalue}">
</a4j:outputPanel>
</a4j:outputPanel>
Render outerPanel and not the newThemeForm.
i have tried the way that AhamedMustafaM mentioned but it didnt work with me , so i searched and tried for a little while so finally i got to make it work with a workaround, here is how
<a4j:commandButton id="clear" value="Clear" action="#{handler.clearData}" immediate="true" >
<!-- dummy call just to make it work -->
<a4j:actionListener listener="#{ViewerController.test}"/>
<f:ajax render="dataGroupPanel"/>
</a4j:commandButton>
I have created a page with primefaces where I use the Lightbox component.
I use it in a dynamic matter as I create tumbnails on the fly with a servlet call.
The first page shows up nice and the lightbox works as expected but when I load a new set of pictures for the next page the pictures are shown but when you click on it, it just shows the original picture in a new page, when I then return with the previous button and click on a a thumbnail it works as expected.
This is the jsf code:
<h:outputLabel id="curpage" value="#{pictureBean.currentPage}" />
<h:commandButton value="next" action="#{pictureBean.nextPage}" id="next">
<f:ajax render="lightBox curpage" />
</h:commandButton>
<br/>
<p:lightBox height="500px" id="lightBox">
<ui:repeat value="#{pictureBean.pictures}" var="pic">
<h:outputLink value="#{pic.url}" title="#{pic.description}">
<h:graphicImage value="#{pic.urlThumb}" style="width:100px;height:75px;"/>
</h:outputLink>
</ui:repeat>
</p:lightBox>
I fixed it myself :-) I was forgotten to add the tags between form tags.
I have a small JSF application where the user is required to enter some data about themselves.
For each component on the page that has required="true" I want to show an icon depending if there is data in the field or not.
My problem is that when the page is initially shown all fields are valid, even if they do not have any data in them.
So my question is how I can set a component to be invalid based on if there is data in the field or not?
After a submit of the page (or after the component loses focus) the icon is shown properly, it is only on the initial page load I have a problem. (i.e there is no post data)
Here is my xhtml for a component that needs to be validated:
<s:decorate id="employeeIdDecoration" template="/general/util/errorStyle.xhtml">
<ui:define name="label">#{messages['userdetails.employeeId']}</ui:define>
<h:inputText value="#{authenticator.user.employeeId}" required="true">
<a4j:support event="onblur" reRender="employeeIdDecoration" bypassUpdates="true"/>
</h:inputText>
the template:
<s:label styleClass="#{invalid?'error':''}">
<ui:insert name="label"/>
<s:span styleClass="required" rendered="#{required}">*</s:span>
</s:label>
<span class="#{invalid?'error':''}">
<s:validateAll>
<ui:insert/>
</s:validateAll>
<h:graphicImage value="/resources/redx.png" rendered="#{invalid}"
height="16"
width="16"
style="vertical-align:middle;"/>
<h:graphicImage value="/resources/Checkmark.png" rendered="#{!invalid}"
height="16"
width="16"
style="vertical-align:middle;"/>
</span>
Any help will be appreciated.
You can:
on window.onload() iterate all inputs with javascript and trigger the blur event
on window.onload() call <a4j:jsFunction> which reRenders a parent <h:panelGroup> to all the inputs.