I am trying to submit values in a pop-up panel inside another panel that has a submit/action event. But before opening pop-up panel I need to invoke a function on my managed bean that create a new entity object. The outer panel has the only h:form, since you can't nest them. I have wrapped the pop-up panel in a a4j:region to submit only this part when the use submits the values inside the pop-up panel. This works, but not the execution of the preparing function that need to be invoked when the pop-up panel executes. I have tried a4j:commandLink but that component don't work together with the rich:popupPanel (strange since both of them are Richfaces components?!). So I have to relay on the h:commandLink and use ajax.
How can I invoke a function on my managed bean when the link to open/render the pop-up panel fires?
(What is the correct pattern for this?)
PS. The initial question has changed, but not the problem concerning submitting values in a pop-up panel.
Part of the xhtml file:
<h.form>
...
<a4j:region>
<rich:popupPanel id="popup_sys_user_req" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Request New Sector/Category" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#"
onclick="#{rich:component('popup_sys_user_req')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<h:panelGrid columns="2">
<h:outputLabel value="Request New:" />
<h:selectOneMenu id="sys_req_type" value="#{userController.selectedSysUserRequest.sysrequesttype}" required="true" >
<f:selectItems value="#{userController.getSysRequestTypeItems('SECTOR_CATEGORY')}">
</f:selectItems>
</h:selectOneMenu>
<h:outputLabel value="Description:" />
<h:inputTextarea id="user_req_desc" value="#{userController.selectedSysUserRequest.description(desc)}" required="true" requiredMessage="Decription is missing" />
</h:panelGrid>
<a4j:commandButton action="#{userController.CreateSysUserRequest()}" value="Send Request" execute="sys_user_req_form" oncomplete="#{rich:component('popup_sys_user_req')}.hide(); return false;"/>
</rich:popupPanel>
</a4j:region>
</h:form>
The commandLink (re-edit)
<h:commandLink actionListener="#{userController.prepareCreateSysRequest}" value="Request New Sector/Category">
<f:ajax execute="popup_sys_user_req #this" render="popup_sys_user_req">
<rich:componentControl id="popup_ctr" event="click" target="popup_sys_user_req" operation="show"/>
</f:ajax>
</h:commandLink>
----------------------------
//Managed Bean:
public void prepareCreateSysRequest(ActionEvent event ) {
selectedSysUserRequest = new Sysuserrequest();
JsfUtil.log("Prepare Create System User Request");
}
This post continues the dicussion about the pop-up panel.
Greetings Chris.
If I understand correctly you want to submit all form elements inside popupPanel but not outside the panel when you invoke someAction1? I can think of two ways to do this:
1. a4jcommandButton has a limitToList attribute, you can list which components you want to be updated on the server
2. create your popupPanel outside of the first form and then use its own form:
<h:form>
...
<a4j:commandButton action="someAction2"...
</h:form>
<rich:popupPanel>
<h:form>
...
<a4j:commandButton action="someAction1"...
</h:form>
</rich:popupPanel>
Update
If you are using RichFaces 4 you can replace the limitToList attribute with limitRender
The problem is that the popup isn't a child of the form in jsf, you only need to use the domElementAttachment attribute to change that. So your code would look like this:
<h.form>
...
<a4j:region>
<rich:popupPanel id="popup_sys_user_req" modal="false" autosized="true" resizeable="false" domElementAttachment="form">
<f:facet name="header">
...
Related
as simple as this. But the outputtext is not passed to another function or form. inputtext of course works but looks ugly.
What should I subsititute outputtext with?
<h:form>
<h:outputtext value="xx" />
<h:commandButton action="#{serviceTest.function() }" value="test"
</h:commandButton>
</h:form>
Real world example
<p:column id="average" sortBy="#{resultClub.stringAverage}">
<f:facet name="header">Snitt</f:facet>
<h:outputText id="testing" value="#{resultClub.stringAverage}" />
<h:inputHidden id="hiddenAvg" value="#{resultClub.stringAverage}" />
</p:column>
javax.faces.component.UpdateModelException: javax.el.PropertyNotFoundException: /hcp/showAverages.xhtml #96,74 value="#{resultClub.stringAverage}": Property 'stringAverage' not writable on type com.jk.hcp.ResultClub
javax.faces.component.UIInput.updateModel(UIInput.java:867)
javax.faces.component.UIInput.processUpdates(UIInput.java:749)
org.primefaces.component.api.UIData.process(UIData.java:328)
After you described the problem to me, I figure it out for you...
You can do this by using javascript
Outputtext:
<h:outputText id="text1" value="xx" />
Button:
<h:commandButton value="click me"
action="#{serviceTest.function()}" value="test"
onclick="submitFieldValue()" >
</h:commandButton>
XHTML:
This will set the myfield instance variable in your controller. It basically will generate a java script function at compile time which will be able to call the controller.
<a4j:jsFunction name="setTheValue">
<a4j:actionparam name="param" assignTo="#{serviceTest.myfield}"/>
</a4j:jsFunction>
JavaScript:
This will call setTheValue with the outputtext value
function submitFieldValue(){
var x = document.getElementById("text1").value;
setTheValue(x);
}
If you want to have the "xx" value submitted after clicking on the commandButton, you can either use hidden field for it
<h:inputHidden value="some text" />
or you can use
<h:inputText readonly="true" />
which will render the text in an input text that user cannot change (it may look like the outputText), but its value will be submitted after clicking the button.
What I understand is that you want to view some data in the outputtext after the button is pressed, right?
Please if I got it wrong, tell me to delete the answer!
Is this case you need to make the button renders the outputfield upon clicked:
Outputtext:
<h:outputText id="text1" value="#{serviceTest.text1Value}" />
Button:
<a4j:commandButton value="click me"
action="#{serviceTest.function() }" value="test"
render="text1" >
</a4j:commandButton>
As you can see I used a4j:commandButton which will enable me to render any element on the page by id upon click.
My code looks like this:
<h:panelGroup id="panelA" >
<h:panelGroup id="panelB" rendered="#{!bean.editEnabled}">
<h:outputText value="#{bean.valueA}" styleClass="readOnlyBox wide hasButton" />
<a4j:commandLink title="edit" action="#{bean.setEditingModeToTrue}"
styleClass="icon edit" render="panelA">
</a4j:commandLink>
</h:panelGroup>
<h:panelGroup id="panelC" rendered="#{bean.editEnabled}">
<h:inputText value="#{bean.valueA}" styleClass="input wide" validatorMessage="Error">
<f:validateLength maximum="80"/>
<f:validateRegex pattern=".*\\<[^>]+>.*"/>
</h:inputText>
<a4j:commandLink title="save" action="#{bean.doValueSave}"
styleClass="icon save" render="panelA">
</a4j:commandLink>
</h:panelGroup>
</h:panelGroup>
Problem occurs when I click on link save. Then linked method is not called. Bean has a view scope and I guess that when I click on edit button (that is required in order to make field editable) then view state is lost so that when I click on save button nothing happends. Am I right? Is there any workaround for this problem? Bean must to have view scope... :/
I have a page where I ask the user to input a value into a inputText box. Based on the entered value I create a datetable with information from my database. One of the columns in the datatable is a selectOneRadio therefore each row has its own radio button. The user should then be able to select one of the radio buttons and then click a commandbutton (which is the footer of the datatable) that will obtain which row is selected based on which radio button is selected. The problem that I am having is upon the button click the backing bean method isn't being called. This issue only happens when i create the table after going to the page. if i hard code a value to cause the datatable to exist at the creation of the page this problem does not happen. I'm not completely sure but I believe this problem is happening because the datatable rendered is initially set to false and for some reason this is effecting either the binding or the valueChangeListener some how.
This is the jsf
<h:panelGrid columns="3">
<h:outputLabel for="searchByContrId" value="Company Code: " />
<h:inputText id="searchByContrId" value="#{applContAdminB.searchContrId}">
</h:inputText>
<h:commandButton type="submit" value="Search" id="submitSearch" action="#{applContAdminB.getEmployeesByContrId}" />
</h:panelGrid>
<br />
<h:outputText rendered="#{applContAdminB.contrIdEntered}" value="Current Administrator: " />
<h:outputText value="#{applContAdminB.adminName}" />
<h:dataTable id="empTable" var="loc" rendered="#{applContAdminB.contrIdEntered}" value="#{applContAdminB.employeesListModel}" binding="#{applContAdminB.htmlDataTable}">
<h:column>
<h:selectOneRadio onclick="updateRadioButtons(this);" valueChangeListener="#{applContAdminB.setSelectedRow}">
<f:selectItem itemValue="null" itemLabel="" />
</h:selectOneRadio>
</h:column>
<h:column>
<f:facet name="header">Employee Name</f:facet>
<h:outputText value="#{loc.empName}" />
</h:column>
<h:column>
<f:facet name="header">Employee Email</f:facet>
<h:outputText value="#{loc.empEmail}" />
</h:column>
<h:column>
<f:facet name="header">Status</f:facet>
<h:outputText value="#{loc.userStatus}" />
</h:column>
<f:facet name="footer">
<h:panelGrid columns="2">
<h:commandButton type="submit" id="transferRights-submit" value="Transfer Rights" action="#{applContAdminB.adjustAdminUser}" />
</h:panelGrid>
</facet>
</h:dataTable>
you answered your own question. this is a weakness in using rendered with ajax. i had a similar issue with a navigation widget i had that toggled the attribute that rendered was bound to via ajax. no manner of magic i could muster would get the invisible panel to render while hiding the panel that was initially rendered. you might try just hiding the div via javascript and when your ajax returns twiddle the "display" attribute of the div(s) accordingly. that's how i solved it. it's unfortunate, but i could not find an alternate solution that was desirable. – him
I use a Primefaces carousel component to display a list of items. What i would like to do is show a commandButton on every carousel item which triggers a method on the bean to confirm or decline the entry.
Now it works only for the first entry of the carousel. Clicking on another entry does not invoke the action confirmResource. I guess it has something to do with the IDs but i can't figure it out.
Here's the form:
<h:form id="form" prependId="false">
<p:carousel id="resourceCarousel" value="#{resourceRatingBean.resourceProposalList}" var="var" rows="1" itemStyle="width:500px; height: 400px; text-align:center;" circular="true">
<p:column>
<h:panelGrid columns="1" cellpadding="3">
<p:graphicImage value="/cache/images/#{var.imagePath}" width="100"/>
<h:outputText value="#{var.imagePath}" />
<h:outputText value="#{var.name}" />
<h:outputText value="#{var.description}" />
</h:panelGrid>
<p:commandButton value="confirm" action="#{resourceRatingBean.confirmResource}" process="#this">
<f:setPropertyActionListener value="#{var}" target="#{resourceRatingBean.ratedResource}" />
</p:commandButton>
</p:column>
</p:carousel>
</h:form>
I see two likely problems here:
The process="#this" is likely an issue as this will only invoke the process of the invoke the action of the commandButton and not the changes in the carousel component. Try setting this attribute to resourceCarousel or #form instead.
If you are still having issues and using JSF 2 + EL 2.2, then instead of depending on setPropertyActionListener to set the value of a managed property, then instead you can pass the argument var to an actionListener method through an EL expression.
Here is an example:
<p:commandButton value="confirm" actionListener="${resourceRatingBean.confirmResourceListener(var)}"
this="resourceCarousel" />
I have a composite displayed inside a dialog. I have an edit button that get the current bean #SessionScoped (item in a data table) and then update the UI. My app is very similar to a simple CRUD app like http://balusc.blogspot.com/2010/06/benefits-and-pitfalls-of-viewscoped.html.
The problem is that the UI is updated correctly when using <h:outputText/> but not when using a form element.
<h:inputTextarea value="#{cc.attrs.managedBean.assertionStatement}" />
<h:inputText value="#{cc.attrs.managedBean.assertionStatement}" />
<h:outputText value="#{cc.attrs.managedBean.assertionStatement}"/>
The UI shows an empty textarea and input but the outputText renders the correct value. The getAssertionStatement() is called 3 times which seems to be the correct behavior.
When I close the dialog and reopen it, everything (form element) is populated.
The dialog call (ag namespace is for composite component):
<p:dialog widgetVar="DataValueRuleDialog" modal="true" height="600" width="800">
<p:outputPanel id="DataValueRulePanel">
<ag:DataValueAssertion managedBean="#{dataValueAssertionController}" id="DataValueComposite" />
</p:outputPanel>
</p:dialog>
The composite that calls another composite:
<h:form id="DataValueForm">
<ag:assertionMetadataComponent
managedBean="#{cc.attrs.managedBean.dataValueAssertionBean.assertionMetadataBean}"
assertionStatementRows="5" />
<p:dataTable value="#{cc.attrs.managedBean.model}" var="item">
<p:column>
<f:facet name="header">Assertion Statement</f:facet>
<h:outputText rendered="#{item.profileBean.profileLocation == cc.attrs.managedBean.selectedComformanceProfile.name}" value="#{item.assertionMetadataBean.assertionStatement}" />
</p:column>
<p:column>
<p:commandButton rendered="#{item.profileBean.profileLocation == cc.attrs.managedBean.selectedComformanceProfile.name}" value="edit" immediate="true"
actionListener="#{cc.attrs.managedBean.editDataValueAssertion}" update=":DataValueComposite:DataValueForm">
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
When I remove the immediate=true the form is validated and since one of the required field (supposed to be populated) is missing, I got a validation error. This is why I have immediate=true but it should be necessary since all the items in the data table should be valid.