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.
Related
I'm using JSF and rich faces 4.5.5 and I'm trying to display a dropdown in the header of a tab panel. So far this is what I have:
<rich:tabPanel id="reportTabPanel" >
<a4j:repeat var="reportCategory" value="${workBean.categories}">
<rich:tab>
<f:facet name="header">
<h:panelGroup>
<h:selectOneMenu value="#{reportCategory.currentSelection}" style="background:none;border:none;width:15px">
<f:selectItems value="#{reportCategory.availableReports}" />
</h:selectOneMenu>
<h:outputText value="#{reportCategory.displayedTitle}" />
</h:panelGroup>
</f:facet>
<div id="reportContent" name="content" >
<h:outputText value="#{reportCategory.displayedContent}" escape="false" />
</div>
</rich:tab>
</a4j:repeat>
</rich:tabPanel>
It displays fine. I have the drop-down arrow displayed on the left and the tab's name on the right of each tab header. However the event handling is dodgy. When I click the dropdown, the list opens and closes as soon as I release the button (preventing me from making a selection in the list). In order to select anything from the dropdown list, I have to keep the mouse button pressed and release it outside of the header area so that the list does not close. Only then am I able to select my option in the dropdown zone.
I believe that the tab header is grabbing the release button event and using it to change tab if needed (which seems obvious).
What I would like is the dropdown to take priority over the tab header. Anyway of doing that?
Alternatively, is there a way of opening the dropdown when it is hovered over?
I'm not a huge expert in JSF. I've tried looking at implementing a custom Renderer but my issue is more to do with events than visual so not sure that is the right way to go. Any suggestion? Pointers?
Thanks
w.
Simply add onclick="event.stopPropagation()" to the h:selectOneMenu, that will prevent the click event reaching the tab.
(That said why do you need a select in the tab header? It's a navigation element.)
In a html page I have a h:commandButton that I want to make it to work in combination with a h:selectBooleanCheckbox, so every time I press the button the checkbox will be checked and otherwise.
Is it possible to do that directly in the html, and not in the java code behind it?
<h:commandButton value="#{userBean.buttonText()}" action="#{userBean.changeOutput()}"/>
<h:panelGrid columns="4" rendered="#{userBean.details}" styleClass="clicked" >
<h:outputText .... />
<h:outputText ..../>
</h:panelGrid>`
If you are using JSF 2, you have to update the area that include your checkbox, using f:ajax tag.
You can find a lot of examples here in stackoverflow, look this example just hide/show a div: After showing / hiding a JSF element with AJAX how to hide the triggering element?
Hope it helps.
I'm working with JSF and PrimeFaces, and I can't handle the following situation:
I have a dialog, and I placed a dataTable on it. In one of the cells of the table I would like to display given data in 3 different ways, and I'd like to switch between them. So far I managed to switch between these rendering types via commandLink, but my problem is that when I click on one of the 3 links, the dialog closes! Can I update the content of the dialog, and be able to keep it open the same time? (I'm updating which render type to use via myMethod)
my commandLink looks like this:
<p:commandLink id="id" update=":myForm:myDialog" ajax="false"
action="#{myBean.myMethod}" oncomplete="dialog.show()">
If i don't use the ajax=false attribute, the method is not called, and I also tried imediate=true, but that's not it either.
You need to define an p:outputPanel inside your dialog and update the outputpanel, not the dialog itself (that's why your dialog closes):
<p:dialog id="myDialog" ...>
<p:outputPanel id="myOutputPanel">
... your dialog content goes here
</p>
</p:dialog>
and change your commandlink
<p:commandLink id="id" update=":myForm:myDialog:myOutputPanel" ajax="true"
action="#{myBean.myMethod}" oncomplete="dialog.show()">
Regarding the oncomplete="dialog.show()" - I'm not entirely sure if you need that. A precise answer can be given if you provide more code regarding your table and code.
I had the same problem, and solution is to update a form instead of dialog. For example:
<p:dialog id="id_dialog" ...>
<h:form id="id_form">
... content
</h>
</p:dialog>
and commandLink:
<p:commandLink update=":id_form" process="#all" ...>
This worked for me!
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>
I would like to achieve this functionality.
<p:column>
<p:commandLink value="prihlasit" oncomplete="dlg.show();"
action="#{signForProjectBean.setProjectForDetail(item)}" />
</p:column>
I think is pretty clear what I am trying to do, I would like to display detail of the row in dataTable on which user have clicked. So my approach is to set property of current row to bean and then show the detail in dialog. But it is not working and I am feeling that I am doing something really wrong:-)
If the dialog component is supposed to display the selected item, then you need to ajax-udpate the dialog's content before opening it. Otherwise it will still display the old content as it was when the page is rendered for the first time.
<p:commandLink value="prihlasit" update=":dlg" oncomplete="dlg.show();"
action="#{signForProjectBean.setProjectForDetail(item)}" />
...
<p:dialog id="dlg" ...>