Action listener that calls function vcardController.renderModify doesn't fire (in the function renderModify I set the variable renderHiddenEdit to true) and the panel in editCardForm doesn't render. Somebody can help me?
<h:form id="editCardForm">
<p:panel id="editCard" style="">
<p:panel rendered="#{vcardController.renderHiddenEdit}" >
<h:inputHidden id="resourceid" value="#{vcardController.resourceId}" />
<h:inputHidden id="vcardraw" value="#{vcardController.vcardRaw}" />
<h:graphicImage alt="" style="width: 3em;" class="imagesearch" url="#{resource['img:user.svg']}"/>
</p:panel>
</p:panel>
</h:form>
<h:form id="viewCardForm">
<p:panel id="viewCard" style="">
<p:panel rendered="#{vcardController.renderHidden}" >
<h:inputHidden id="resourceid" value="#{vcardController.resourceId}" />
<h:inputHidden id="vcardraw" value="#{vcardController.vcardRaw}" />
<p:commandButton
id="testmodifica"
class="mod nocorner modifycard"
value="modify"
update=":editCardForm"
actionListener="#{vcardController.renderModify}" />
</p:panel>
</p:panel>
</h:form>
<h:form id="formReqEdit" class="formReqEdit" style="display: none;">
<h:inputHidden id="vcardraw" value="#{vcardController.vcardRaw}" />
<h:inputHidden id="resourceid" value="#{vcardController.resourceId}" />
<p:commandButton
id="requestForm"
style="display: none;"
update=":viewCardForm"
oncomplete="contactsDOMAction.showCard(xhr, status, args)"
actionListener="#{vcardController.activateModifyCard}" />
</h:form>
If you want render "editCardForm" you must put "editCardForm" in update parameter in command button
Good practice is add "process". Then you are sure what data from components will be send to bean, in your case process="#this" if you want only call action listener.
Rafa Hernández says right, how you want press button if it has display:none?
Related
I have a dialog which is contains two listboxes, one checkbox and one button. I try to pass values of these components to backing bean.
<p:dialog header="Add" widgetVar="dlgAdd" resizable="false"
id="dlgAddId" showEffect="fade" modal="true">
<h:form id="dlgAddForm">
<p:panelGrid columns="2">
<p:outputLabel>Name*</p:outputLabel>
<p:selectOneMenu id="addname" value="#{notificationsSettingManagedBean.customerUserEmailSetting.userNameSurname}" effect="fold">
<f:selectItems value="#{notificationsSettingManagedBean.customerUserNameSurnameList}" />
</p:selectOneMenu>
<p:outputLabel>Email-ID*</p:outputLabel>
<p:selectOneMenu id="addsurname" value="" effect="fold">
<f:selectItems value="#{notificationsSettingManagedBean.customerUserEmailsList}" />
</p:selectOneMenu>
</p:panelGrid>
<p:panel>
<div align="center">
<p:outputLabel>Email Notifications</p:outputLabel>
</div>
</p:panel>
<p:panelGrid columns="2" style="width: 100%;text-align: center;">
<p:outputLabel>Order Submitted</p:outputLabel>
<p:selectBooleanCheckbox value="#{notificationsSettingManagedBean.customerUserEmailSetting.orderSubmit}"/>
</p:panelGrid>
<div align="center">
<p:commandButton
actionListener="#{notificationsSettingManagedBean.saveCustomerEmailSettings}"
immediate="true" value="Save" ajax="true"
oncomplete="dlgAddId.hide();" />
</div>
</h:form>
</p:dialog>
On notificationsSettingManagedBean, i create customerUserEmailSetting object which is contains get and set methods of userNameSurname,customerUserEmailsList and ordersubmit.
Problem is when try to get this data on saveCustomerEmailSettings method on backing bean i see that these data are null. How can i pass them to backing bean?
i have a problem with the display of a dialog on a click. It's a obvious one but i can't spot the bug. I've been stuck on this for days, it's crazy. Can you help me please.
<h:form id="form">
<p:commandButton
rendered="#{characterBean.characterSession.characterName ne null}"
value="#{characterBean.characterSession.title.titleName}"
icon="fa fa-fw fa-edit" onclick="PF('dlg').show();"
update="#form"/>
<p:dialog id="titleDetail" header="#{i18n['title.yourTitles']}"
widgetVar="dlg" dynamic="true" closable="false" resizable="false"
showEffect="fade" hideEffect="fade">
<h:panelGroup>
<p:messages autoUpdate="true" />
<h:selectOneMenu id="titleSelect" converter="#{titleConverter}"
value="#{characterBean.characterSession.title}">
<f:selectItems value="#{characterBean.titleUnlocked}" var="t"
itemValue="#{t}" itemLabel="#{t.titleName}" />
</h:selectOneMenu>
<hr />
<h:panelGrid columns="2" style="width: 100%; text-align:center">
<p:commandButton value="#{i18n['general.submit']}"
icon="fa fa-check"
actionListener="#{characterBean.updateCharacterTitle}"
oncomplete="PF('dlg').hide();" update="#form" />
<p:commandButton value="#{i18n['general.cancel']}"
icon="fa fa-close" action="#{characterBean.submitCancel}"
oncomplete="PF('dlg').hide();" update="#form" process="#this" />
</h:panelGrid>
<p:remoteCommand name="updateForm()" process="#this" update="#form" />
</h:panelGroup>
</p:dialog>
</h:form>
The core problem is essentially this:
<h:form>
<p:commandButton onclick="PF('dlg').show();" update="#form"/>
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
The default state of <p:dialog> is hidden.
The onclick shows the dialog.
The update updates the entire content of the <h:form>.
The <p:dialog> is also included in the update.
So, the <p:dialog> gets hidden again.
There are several solutions:
Don't let update include the <p:dialog>.
<h:form>
<h:panelGroup id="outsideDialog">
<p:commandButton onclick="PF('dlg').show();" update="outsideDialog"/>
</h:panelGroup>
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
Replace onclick by oncomplete as it runs after the update.
<h:form>
<p:commandButton update="#form" oncomplete="PF('dlg').show();" />
<p:dialog widgetVar="dlg">
...
</p:dialog>
</h:form>
Move <p:dialog> outside the <h:form> and give it its own <h:form>.
<h:form>
<p:commandButton update="#form :dlg" oncomplete="PF('dlg').show();" />
</h:form>
<p:dialog id="dlg" widgetVar="dlg">
<h:form>
...
</h:form>
</p:dialog>
or, depending on whether you actually need to update the dialog's contents or not
<h:form>
<p:commandButton onclick="PF('dlg').show();" update="#form" />
</h:form>
<p:dialog widgetVar="dlg">
<h:form>
...
</h:form>
</p:dialog>
The recommended solution is 3.
See also:
Execution order of events when pressing PrimeFaces p:commandButton
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
p:commandbutton action doesn't work inside p:dialog
I’m working on a web-app that displays list of objects, each object has its own modal when clicked inside the modal there are two dropdown menus and a button that is supposed to call a method add in a bean, to perform an action and add the selected object while taking three values, selected object, selected two items from the two drop downs and spinner’s value.
<ui:repeat value="#{ViewTeacher.teacherList}" var="teacher"
varStatus="status">
<h:panelGroup layout="block" styleClass="name">
<p>#{teacher.name}</p>
</h:panelGroup>
<br />
<br />
<a onclick="viewModal(#{status.index})" class="btn btn-success">view</a>
<h:panelGroup id="modal" layout="block" class="modal"
style="max-width: 44em;" tabindex="1">
<h:panelGroup class="modal-content" layout="block">
<span class="close" onclick="modClose()">×</span>
<h:outputText styleClass="description" value="#{teacher.name}" />
<br />
<br />
<br />
students
<h:selectOneMenu value="ok" class="form-control">
<f:selectItems value="#{teacher.students}" var="s"
itemValue="#{s.id}" itemLabel="#{s.name}" />
</h:selectOneMenu>
classes
<h:selectOneMenu value="ok" class="form-control">
<f:selectItems value="#{teacher.classes}" var="c"
itemValue="#{c.id}" itemLabel="#{c.name}" />
</h:selectOneMenu>
<br />
<h:panelGroup layout="block" styleClass="form-group">
<p:spinner min="1" max="10" />
</h:panelGroup>
<h:commandButton id="submitButton" styleClass="btn btn-success" value="ADD">
<!—-this is the button that is supposed to take the values
</h:commandButton>
<a onclick="modClose()" class="btn btn-success">CANCEL</a>
</h:panelGroup>
</h:panelGroup>
</ui:repeat>
I tried :
<f:param name="name1" value="China" />
But the fact that param’s name will get repeated, will make it the same all the time and might be set to the latest object retrieved,
Any recommendation?
UPDATE:
<p:commandLink styleClass="btn btn-success" process="#this"
onclick="viewModal(#{status.index});">
<h:outputText value="ADD" />
<f:setPropertyActionListener
value="#{teacher.id}" target="#{ViewTeacher.selectedTeacher}" />
</p:commandLink>
Made this change to pass the teacher's id but it's still null in the bean
First of all, having a separate modal for each object isn't a good idea. You can achieve (what you are trying) by:
1). Adding a property (with its getter and setter) in bean for selected object.
2). Place single modal (<p:dialog with id="modal" and widgetVar="modal" attributes) outside ui:repeat to display data from selected object.
3). Set selected object on clicking view link, update and display modal, using:
<p:commandLink styleClass="btn btn-success" process="#this" update="modal"
onclick="PF('modal').show();">
<h:outputText value="View" />
<f:setPropertyActionListener
value="#{teacher}" target="#{ViewTeacher.selectedTeacher}" />
</p:commandLink>
Here, f:setPropertyActionListener will be setting your selected modal in bean and thus it will become available in your action listener.
Update: Change the code as following:
<ui:repeat value="#{ViewTeacher.teacherList}" var="teacher" varStatus="status">
<h:panelGroup layout="block" styleClass="name">
<p>#{teacher.name}</p>
</h:panelGroup>
<p:commandLink styleClass="btn btn-success" process="#this" update="modal"
oncomplete="PF('modal').show();">
<h:outputText value="view" />
<f:setPropertyActionListener
value="#{teacher}" target="#{ViewTeacher.selectedTeacher}" />
</p:commandLink>
</ui:repeat>
<p:dialog id="modal" widgetVar="modal" header="Edit Teacher" modal="true"
showEffect="fade" hideEffect="fade" resizable="false" closeOnEscape="true"
styleClass="teachers-dialog">
<h:outputText styleClass="description" value="#{ViewTeacher.selectedTeacher.name}" />
<br />
<br />
<br />
students
<h:selectOneMenu value="#{ViewTeacher.selectedStudentId}" class="form-control">
<f:selectItems value="#{ViewTeacher.selectedTeacher.students}"
var="s" itemValue="#{s.id}" itemLabel="#{s.name}" />
</h:selectOneMenu>
classes
<h:selectOneMenu value="#{ViewTeacher.selectedClassId}" class="form-control">
<f:selectItems value="#{ViewTeacher.selectedTeacher.classes}"
var="c" itemValue="#{c.id}" itemLabel="#{c.name}" />
</h:selectOneMenu>
<br />
<h:panelGroup layout="block" styleClass="form-group">
<p:spinner value="#{ViewTeacher.spinnerValue}" min="1" max="10" />
</h:panelGroup>
<h:commandButton id="submitButton" styleClass="btn btn-success" value="ADD">
</h:commandButton>
</p:dialog>
Where selectedTeacher, selectedStudentId, selectedClassId, spinnerValue are properties from your ViewTeacher bean.
I have a PrimeFaces dialog, that has two command buttons that executes some code in the backing bean. I want to block the dialog within the action.
I managed to do it using blockUI, but when the blockUI is present, and I open the dialog, it appears at the bottom of the page.
If I remove the blockUI component, the dialog opens at the center of the page, as I want. But I want it to be centered and with the blockUI.
<p:dialog header="Attention" id="dialog" position="center"
widgetVar="dialog" modal="true" closable="false"
dynamic="true" closeOnEscape="false">
<div class="internal-margin-top">
<h:outputText value="Location" styleClass="ui-outputtext" />
<p:inputText value="#{activityBean.location}"
id="inputLocation" maxlength="15">
</p:inputText>
</div>
<div class="internal-margin-bottom">
<p:commandButton id="closureYes" value="Yes"
styleClass="btn-green"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processItem()}" process="#all">
</p:commandButton>
<p:commandButton id="closureNo" value="No"
styleClass="btn-red"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processActivity()}" process="#all" />
</div>
</p:dialog>
<p:blockUI block="scrapDialog" widgetVar="block">
<p:graphicImage library="images" name="loading_bar.gif" />
</p:blockUI>
Thanks in advance.
Example with a centered modal dialog:
<p:dialog header="Header" position="center" widgetVar="wv_dialog" modal="true" closable="false" dynamic="true" closeOnEscape="false">
<h:form id="dialogform">
<p:panelGrid columns="1">
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
</p:panelGrid>
<p:commandButton id="closebutton"
value="Close"
oncomplete="PF('wv_dialog').hide();"
action="#{testBean.actionTest()}"
process="#form"/>
<p:blockUI block="dialogform" trigger="closebutton"/>
</h:form>
</p:dialog>
I'm developing this project using JSF 2.0, NetBeans 6.9.1, GlassFish 3.1, Mojarra 2.0.3, and PrimeFaces 2.2-RC2.
My question is similar to this question, but even though I was able to make one of my buttons work, the other one does not. Here's my situation: I have a dataTable with a column containing two links, one to edit line data, one to view line data. Clicking either the "Edit" or "View" link takes you to a detail page with <h:panelGrid> components inside <p:tabView> components. My detail page has two <p:tabView> components, one for editing, one for just viewing data. Which one you see depends on the <c:if> statements. The button in the first <p:tabView> on the page (by that I mean first working your way down from the top) works as I would like it to, this happens to be the "Edit" component. The button in the other <p:tabView> does not work. I set up break points and went through the debugger, the second button doesn't seem to fire an ActionEvent regardless of what I try. Here's my code for the page:
<ui:define name="metadata">
<f:metadata>
<f:viewParam name="id" value="#{userDetailBean.selectedUserId}" />
<f:viewParam name="action" value="#{userDetailBean.view}" />
</f:metadata>
</ui:define>
<ui:define name="main_base_content_top">
<h:form>
<p:toolbar>
<p:toolbarGroup align="left">
<h:commandButton value="Return to User List" action="user_grid" />
</p:toolbarGroup>
</p:toolbar>
</h:form>
</ui:define>
<ui:define name="main_base_content">
<c:if test="#{empty userDetailBean.view}">
<h:form>
<table align="center">
<tr>
<td>
<p:tabView>
<p:tab title="#{msgs.UserDetailTabTitle}">
<h:panelGrid columns="4">
<h:outputLabel value="#{msgs.UserDetailFirstName}" for="fname" />
<h:inputText id="fname" value="#{userDetailBean.firstName}" />
<h:outputLabel value="#{msgs.UserDetailJobTitle}" for="jtitle" />
<h:inputText id="jtitle" value="#{userDetailBean.jobTitle}" />
<h:outputLabel value="#{msgs.UserDetailLastName}" for="lname" />
<h:inputText id="lname" value="#{userDetailBean.lastName}" />
<h:outputLabel value="#{msgs.UserDetailEmployeeId}" for="empid" />
<h:inputText id="empid" value="#{userDetailBean.id}" />
<h:outputLabel value="#{msgs.UserDetailDateOfHire}" for="doh" />
<h:inputText id="doh" value="#{userDetailBean.DOH}" />
<h:outputLabel value="#{msgs.UserDetailLocation}" for="location" />
<h:inputText id="location" value="#{userDetailBean.location}" />
<h:outputLabel value="#{msgs.UserDetailStatus}" for="status" />
<h:inputText id="status" value="#{userDetailBean.status}" />
<h:inputHidden /> <h:inputHidden /> <h:inputHidden /> <h:inputHidden /> <h:inputHidden />
<h:outputLabel value="#{msgs.UserDetailComments}" for="comments" />
<h:inputTextarea id="comments" value="#{userDetailBean.comments}" />
<h:inputHidden />
<p:commandButton ajax="false" action="#{userDetailBean.submitChanges()}" value="Submit Changes" />
</h:panelGrid>
</p:tab>
</p:tabView>
</td>
</tr>
</table>
</h:form>
</c:if>
<c:if test="#{! empty userDetailBean.view}">
<h:form>
<table align="center">
<tr>
<td>
<p:tabView>
<p:tab title="#{msgs.UserDetailViewTabTitle}">
<h:panelGrid columns="4">
<h:outputLabel value="#{msgs.UserDetailFirstName}" for="fname" />
<h:outputText id="fname" value="#{userGridBean.selectedUser.firstName}" />
<h:outputLabel value="#{msgs.UserDetailJobTitle}" for="jtitle" />
<h:outputText id="jtitle" value="#{userGridBean.selectedUser.jobTitle}" />
<h:outputLabel value="#{msgs.UserDetailLastName}" for="lname" />
<h:outputText id="lname" value="#{userGridBean.selectedUser.lastName}" />
<h:outputLabel value="#{msgs.UserDetailEmployeeId}" for="empid" />
<h:outputText id="empid" value="#{userGridBean.selectedUser.id}" />
<h:outputLabel value="#{msgs.UserDetailDateOfHire}" for="doh" />
<h:outputText id="doh" value="#{userGridBean.selectedUser.DOH}" />
<h:outputLabel value="#{msgs.UserDetailLocation}" for="location" />
<h:outputText id="location" value="#{userGridBean.selectedUser.location}" />
<h:outputLabel value="#{msgs.UserDetailStatus}" for="status" />
<h:outputText id="status" value="#{userGridBean.selectedUser.status}" />
<h:inputHidden /> <h:inputHidden /> <h:inputHidden /> <h:inputHidden /> <h:inputHidden />
<h:outputLabel value="#{msgs.UserDetailComments}" for="comments" />
<h:outputText id="comments" value="#{userGridBean.selectedUser.comments}" />
<h:inputHidden /> <h:inputHidden /> <h:inputHidden />
<p:commandButton onclick="submit()" ajax="false" action="#{userDetailBean.navigation()}" value="Retur to User Grid" />
</h:panelGrid>
</p:tab>
</p:tabView>
</td>
</tr>
</table>
</h:form>
</c:if>
</ui:define>
</ui:composition>
</body>
I've tried everything I can think of for the second button: ajax="false"; onclick="submit()"; ajax="false" onclick="submit"; I've tried implicit navigation with a redirect as well as a navigation rule with a redirect. The action methods userDetailBean.submitChanges() and userDetailBean.navigate() both return the same string, which corresponds to a navigation rule in my faces-config file. The submitChanges method gets called, but my navigate method does not. I'm not filling the fields with any data at this point, I'm just trying to get the basic navigation to work. Why isn't my commandButton on the second tabView working?
Another reason that a commandbutton isn't been invoked is that the rendered attribute of the button or one of its parents evaluated false during apply request values phase of the form submit.
You have actually none, but those <c:if> tags does similar thing, only during view build time instead of view render time. The view params are not applied during building the view, but only thereafter. That's exactly why #{userDetailBean.view} is always empty.
I have never used such a construct with <c:if>, but I've had similar views like this where this all just works with a #ViewScoped bean where the rendering property is been applied on a fullworthy JSF component instead of <c:if>.
As first step, get rid of <c:if>s and move their tests into rendered attribute of the <h:form>s they are wrapping:
<h:form rendered="#{empty userDetailBean.view}">
...
</h:form>
<h:form rendered="#{not empty userDetailBean.view}">
...
</h:form>
If in vain (I guess that this will fail because you aren't using ajax and the viewparams are not preserved) and the bean is indeed #RequestScoped, then you need to mark it #ViewScoped to preserve the rendering conditions.
Related questions:
JSF h:commandLink is not being invoked
Unrelated to the problem, I'd rather use <h:panelGroup /> instead of <h:inputHidden /> to "fill" the empty cells of the table. They are cheaper to encode and decode and also ends in better HTML.