I am using JSF with Primefaces components. When primefaces's light box playing video, it is not showing close button on top right corner. I don't want use Escape button or clicking outside of the light box. I just want to provide a button on that to close or I just want allow user to see that light box's close button
Try this
<p:lightBox id="myLightBoxId" widgetVar="myLightBoxWidgetVar" >
<h:outputLink value="#">
<h:outputText value="SHOW"/>
</h:outputLink>
<f:facet name="inline">
<p:button value="HIDE" onclick="myLightBoxWidgetVar.hide();return false;" />
</f:facet>
</p:lightBox>
Related
First of all, this issue is on Edge only, everything works just fine on Chrome and Firefox.
I'm working with JSF 1.2 and RichFaces 3.3.3.Final (with community fix for IE9+).
I have a rich:modalPanel which is opened by a a4j:commandButton. On the modal panel there is a h:commandButton which hides the modal panel and exports a pdf generated with jasperReports. My issue is that after exporting a file for the first time, the modal panel doesn't show up anymore. I have to reload the page and then it works again. There's nothing new in console when I press a4j:commandButton to open the modal panel, the last log is "HTML1300: Navigation occured." which comes from pressing h:commandButton.
Open modal panel (contents.jspx) - sets printBean.showModalPanel to true:
<a4j:commandButton
image="/img/print.gif"
styleClass="clsCursorPointer"
action="#{ printBean.onExportReport}"
ajaxSingle="true"
reRender="printConfirmationPanel" />
Modal panel (forms.jspx):
<h:panelGroup id="printConfirmationPanel" >
<rich:modalPanel id="printConfirmationMP"
autosized="true"
showWhenRendered="true"
rendered="#{ printBean.showModalPanel}" >
<h:form>
<h:panelGrid columns="2" style="margin: auto">
<h:commandButton id="confirmButton" <--- Export button
value="#{ msgs['printButton']}"
actionListener="#{ printBean.onExportButton}" >
<f:attribute name="format" value="PDF"/>
(more attributes)
</h:commandButton>
<rich:componentControl
attachTo="confirmButton"
for="printConfirmationMP"
operation="hide"
event="onclick" />
</h:panelGrid>
</h:form>
</rich:modalPanel>
</h:panelGroup>
Problem is solved by updating Edge to version 81.0.416.53.
I need to put extra buttons in the dialog box in Primefaces.
For example I want to put some buttons like Save Update Close instead of just close button.
Is there any way to do that?
Thank you for your time.
<p:dialog ... >
<f:facet name="header">
<p:commandButton value="Hello button"></p:commandButton>
</f:facet>
But it will appear on the left side of dialog header. You will need to override Primefaces CSS:
.ui-dialog .ui-dialog-title
it has float: left; attribute.
Also use some browser developer tool like FireBug to fix CSS. Good luck.
I need a rich:popup that shows a rich:extendedDataTable, and when the user presses a button, the popup should be shown, and the extendedDataTable must be re-rendered, here is the code:
<rich:popupPanel id="popupId" show="false" modal="true">
<h:form>
<rich:extendedDataTable
value="#{bean.list}"
var="item" rows="5" id="table">
<rich:column>
<h:outputLabel value="#{item}" />
</rich:column>
</rich:extendedDataTable>
<a4j:commandButton value="x" immediate="true"
oncomplete="#{rich:component('popupId')}.hide(); return false;"/>
</h:form>
</rich:popupPanel>
<h:form>
<a4j:commandButton value="show"
oncomplete="#{rich:component('popupId')}.show(); return false;"
render="table" immediate="true" />
</h:form>
The first time I press the show it works fine, but when I close the panel with the X button and press again the show button, the extendedDataTable appears empty (It's rendered but appear empty, see image below).
The problem is fixed if I add an empty extendedDataTable before the popup, like this:
<rich:extendedDataTable />
<rich:popupPanel>
...
With rich:dataTable the problem doesn't exits, but I need a extendedDataTable.
And aditional extrange behaviour is when I resize the browser, the data appears.
Platform
RichFaces: 4.2.2.Final
Spring: 3.1.1.RELEASE
Cheers
Use onclick instead of oncomplete. ExtendedDataTable doesn't render properly inside invisible elements (it's a bug) so the popupPanel has to be made visible before the rerendering.
I had kinda the same issue.
I solved it in a not 100% richface correct way:
<a4j:commandButton
value="show"
action="#{actionForm.setShowEditor('true')}"
oncomplete="javascript:location.reload(true)"/>
<a4j:region layout="block" rendered="#{actionForm.showEditor}" id="panelArea">
<rich:popupPanel id="#{popupID}" modal="true" show="true" domElementAttachment="parent">
....
tabel
buttons
....
</rich:popupPanel>
</a4j:region>
The popup is always shown (show="true") inside the a4j:region.
But the a4j:region is only shown if variable to show the popup = true.
The full page refresh was in my case needed because otherwise my ckeditor had some initialisation errors. It should also work if you only rerender the a4j:region after you set the "#{actionForm.setShowEditor('true')}.
I have a dialog on one of my pages. It opens fine. It works fine if you use the button on the page, it closes. However, if you try and "x" out of the dialog it will not close. I believe it is related to the fact that I have an input field on the dialog, but I am not sure. I apologize if this is a dupe, I could not find a similar post.
<p:commandButton action="#{phoneListBean.debugger}"
value="Merge Unqiue" onclick="mdlg.show();"
update=":pmsg, :createNewPanel, :listform" />
<p:dialog id="mdialog" header="Merge Unqiue" widgetVar="mdlg"
appendToBody="true">
<h:form id="mform">
<h:panelGrid columns="2" cellpadding="5" id="m">
<h:outputLabel for="listName" value="Enter the List Name:" />
<p:inputText value="#{phoneListBean.mergeList.name}" id="listName" />
<p:commandButton action="#{phoneListBean.mergeUnique}"
value="Merge Unqiue" update=":pmsg, :listform"
onclick="mdlg.hide();" />
</h:panelGrid>
</h:form>
</p:dialog>
Thanks in advance for the help.
Your problem is that you don't want to use the onclick attribute with Primefaces buttons for displaying and hiding the dialogs. The click event may not get invoked before the postback because these buttons are not Ajax enabled.
Instead you should use oncomplete attribute. This will notify the Javascript event to execute only after the server postback has occurred, meaning that show() will display already updated dialog contents, and hide() will occur only after the server side execution has finished.
I have this module in my webapp where i need to update come catalogs.
The idea is to disable the h:commandButton and show a h:graphicImage, both actions are supposed to happen right after the button was clicked.
Finally, when the update process has ended it should do the other way, hide the h:graphicImage, enable the h:commandButton but this time also show a label h:outputText that says either 'Update Success' or 'Update Failure'.
The problem in my code is that the image and the label appear right after the process is finished and I can't find the way to do what I described above.
Where or what am I missing?,
Cheers.
<a4j:commandButton id="btnActualiza" value="Actualizar catálogos"
render="messageCatalogos actualizacionCorrecta
#this imgProcesando"
onclick="this.disabled=true;"
oncomplete="this.disabled=false"
actionListener="#{administrationBean.doImgProcesandoVisible}"
action="#{administrationBean.doActualizaCatalogos}"/>
<a4j:outputPanel id="imgProcesando">
<h:graphicImage rendered="#{administrationBean.imgProcesandoRendered}"
url="img/imgLoading.gif"/>
</a4j:outputPanel>
<h:panelGroup/>
<h:panelGroup/>
<a4j:outputPanel id="actualizacionCorrecta" style="font-size: 14px; color: #D17100">
<h:outputText rendered="#{administrationBean.actualizacionCorrectaLabelRendered}"
value="Actualización correcta !"/>
<h:outputText rendered="#{administrationBean.actualizacionFalloLabelRendered}"
value="Fallo la actualización !"/>
</a4j:outputPanel>
UPDATE
My dev environment:
Mojarra 2.1.6
RichFaces 4.1.0.Final
Tomcat 7.0.14(test) / Tomcat 7.0.22(prod)
You need to show and hide the image by JS instead.
<h:graphicImage id="loading" url="img/imgLoading.gif" style="display:none" />
with
<a4j:commandButton ...
onbegin="this.disabled=true; $('#formId\\:loading').show()"
oncomplete="this.disabled=false; $('#formId\\:loading').hide()"
/>