Opening a Rich Modal Panel on Button Click - jsf

I m trying to open a rich modal panel with populated data on a button click
tried
<h:commandButton id="btn_search" value="#{text['button.add']}"
action="#{cartBean.search}"
oncomplete="#{rich:component('dlg_results')}.show()">
</h:commandButton>
and
<h:commandButton id="btn_search" value="#{text['button.add']}"
action="#{cartBean.search}" immediate="true">
<rich:componentControl for="dlg_results" attachTo="btn_search" operation="show" event="onclick"/>
</h:commandButton>
This code opens the model panel on button click but when response is sent back from the server the whole page gets refreshed
can some one suggest a way to handle this ???

Use <a4j:commandButton> instead of h:commandButton.

Thanks, this was helpful information.
I used showWhenRendered tag in rich:modalpanel to solve my problem. I added a variable in my bean and set its value to true on click of button if records are found.

Related

JSF dropdown list inside a tab header

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.)

How to hide/show a panel conditionally in primefaces/jsf2 on commandButton click?

I want to hide/show <p:panel> on commandButton click with some condition ,I tried following
<h:form>
// some tag here
<p:commandButton value="EDIT" ajax="false"
onclick="if(#{bean.status == 'ACTIVE'}){editable.show();}"
actionListener="#{beanMgnt.edit}">
</h:form>
and editable is a panel as
<p:panel widgetVar="editable" closable="true"
toggleable="true" visible="false">
// some tags here
</p:panel
edit method is doing only sysout.
What I want when enduser clicks the button this panel will be visible with bean data populated with Editable text boxes.
I want to make visible this panel visible with button click.How to do that?
You also have to use update="<id>" in your button...
so,for example, you would need <p:commandButton...update="thepanelid".../> <p:panel id="thepanelid"...
I think you could use a boolean attribute in your backing bean. In the panel you put : visible="backingbean.yourAttribute" and you use a method in your bean to control it via onclick.
onclick="backingbean.theMethod"
In the method, if your condition is verified, you can set the attribute to "true".

Open dialog to register vehicle on the register of notes

Personally I have a registration page of notes, it got a selectOneMenu vehicle. But I want to offer the user the ability to click a button to open a dialog where he registers a vehicle if you do not already in the registry. And this is set back in the notes page to close the dialog. I know it sounds very simple. But would an example of how I can do this.I use JSF, Primefaces, JEE7 Thank you
Here's the most important, the buttons:
In main page, surrounded by form mainForm:
<p:commandButton icon="ui-icon-plus"
value="New"
actionListener="#{bean.prepareCreate}"
update=":formInDialog"
oncomplete="PF('dialogWidgetVar').show()"/>
In bean.prepareCreate you create the new entity for binding into.
In dialog, which has its own form formInDialog inside it:
<p:commandButton actionListener="#{bean.create}"
value="Save"
update=":mainForm:listOfEntities, formInDialog, :growl"
oncomplete="if(args && !args.validationFailed {PF('dialogWidgetVar').hide()}" />
formInDialog and growl needs to be updated in case of errors.

JSF richfaces: update (rerender) element + close popup on click a4j:commandButton

I have a a4j:commandButton in my popup. On click I want to hide my popup and rerender some component.
<a4j:commandButton type="button" styleClass="left" value="#{bean.value}"
actionListener="#{bean.action}"
render="updComponent"
oncomplete="#{rich:component('popup')}.hide()"/>
In this case component is rerendered, but popup isn't hiding.
If I use rerender="updComponent" instead of render="updComponent", popup is hiding, but element isn't rerendered.
If I use instead of oncomplete="#{rich:component('popup')}.hide()" this:
<rich:componentControl target="deactivateIp" event="oncomplete" operation="hide"/>
popup isn't hiding, component isn't rerendering.
What I'm doing wrong and how to achieve what I want?
I've used onbegin instead of oncomplete and it works for me.
If I don't mistake, it's jsf bug: after render oncomplete event isn't firing.
<a4j:commandButton type="button" styleClass="left" value="#{bean.value}"
actionListener="#{bean.action}"
render="updComponent"
onbegin="#{rich:component('popup')}.hide()"/>
Maybe not the best solution, but I haven't found out any other.

Setting bean property before opening Primefaces dialog

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" ...>

Resources