my form looks like that:
<p:inplace>
<h:inputText id="description" value="#{cc.attrs.description}" />
</p:inplace>
When the user clicks into the Text of the p:inplace the inputText will be shown to edit the value.
How can I hide the inputText or the p:inplace when the user clicks somewhere else or the control it self lose the focus.
Thanks.
Use the blur event over the inputText, passing an id value to it:
<p:inplace widgetVar="basic_#{cc.id}">
<p:inputText value="#{cc.attrs.description}" id="description">
<p:ajax event="blur" oncomplete="basic_#{cc.id}.hide();" />
</p:inputText>
</p:inplace>
Related
I'm new to jsf and not sure how to frame the question in a right way. I'm doing a name lookup functionality and my input form is as follows:
Accept input from a text field.(Backed by managed bean and
getters and setters)
Invoke the action using command button.
Display it back on the UI.
I'm not able to paste the entire code because of confidentiality.
<h:form>
<p:outputLabel value="ABC" />
<p:inputText id="a" value="#{mybean.variable}" size="10" />
<p:commandButton value="Check" actionListener="#{mybean.getName()}" update="name">
</p:commandButton>
<p:inputText id="name" value="#{mybean.Value}" />
</h:form>
The above mentioned works fine,However I have 5 input text fields and their corresponding action methods like as follows:
<p:outputLabel value="DEF" />
<p:inputText id="b" value="#{mybean.variable1}" size="10" />
<p:commandButton value="Check" actionListener="#{mybean.getName()}" update="name" >
</p:commandButton>
<p:inputText id="name" value="#{mybean.Value}" />
</h:form>
and so on.
When I put all the text boxes and their corresponding actions,the input is not passed to the backend and the console does not display anything.
Any help appreciated.
Thanks.
I'm trying to help users fill in entity Id numbers on a submittal form. I can't use a pulldown because there are 1000's.
In a PF dialog, I'm able to copy a selected value to the main form but I'm hardcoding the actionaListener into the commandLink to tell the popup dialog which h:textInput box on the main form to copy the value to and to render. If I have three h:inputText boxes I would then need to duplicate three p:dialogs.
For example in my p:dialog I would have a column in the datatable as such:
<h:commandLink value="Select This Item" onclick="PF('dlg').hide()">
<f:ajax render=":myForm:text_field_1" event="click"
listener="#{bean.popDownId1(item.id)}" />
</h:commandLink>
How can I pass those variables myForm:text_field_1 (the form name and field) to the p:dialog so that it becomes a more generic popup dialog? Also is there a way to not have to code a listener method for each field (popDownId1, popDownId2, etc...)As a bonus I'd also like to externalize the dialog and include it in every xhtml page instead of cutting and pasting as I'm doing now.
Here is more actual code:
form.xhtml
<h:form id="myForm">
<h:panelGrid columns="3">
<p:outputLabel value="Manager Employee Number: " />
<h:panelGroup>
<p:inputText id="managerId"
title="Type Employee Id or click the ? to search for their Id"
value="#{bean.department.manager}" >
<f:validator validatorId="com.company.app.EmployeeIdValidator" />
</p:inputText>
<p:commandButton title="Click here if you don't know their Employee Number"
id="managerId" value="Lookup Id"
onclick="PF('dlgManager').show();" type="button" >
</p:commandButton>
other fields and submit button
</h:form>
<p:dialog id="popup" modal="false" widgetVar="dlgManager" dynamic="true" >
<f:facet name="header">
<h:outputText value="Employee Number Finder" />
</f:facet>
<p>Search using any keyword.</p>
<h:form>
Keyword: <p:inputText id="search" value="#{employeeSearch.searchString}" />
<p:commandButton value="Search"
action="#{employeeSearch.searchByKeyword}">
<f:ajax execute="#form" render="output" />
</p:commandButton> (Enter keywords separated by spaces)
<p:dataTable id="output" var="employee" value="#{employeeSearch.employees}">
<p:column headerText="Action">
<h:commandLink value="Select" onclick="PF('dlgManager').hide()">
<f:ajax render=":myForm:managerId" event="click"
listener="#{bean.popDownManagerId(employee.id)}" />
</h:commandLink>
</p:column>
other columns(employee name, phone number, etc...)
</p:dialog>
you can see that I'd need to copy the dialog and tweak it a bit for every field on my form where I want to do an employee number lookup.
onclick="PF('dlgManager').show();">
onclick="PF('dlgSupervisor').show();">
onclick="PF('dlgFloorChief').show();">
EDIT
When applying BalusC's answer, if I add a second lookup Id button, the popup dialog to select an employee id has a command link which is tied to only the ManagerId field
action="#{bean.popDownManagerId(employee.id)}"
Also, when the second lookup id button is pressed the previous search results are still listed so the select command link would be referencing the wrong field to update
popup dialog
I´ve managed to get the code to do what I intended, but I do not understand a particular aspect of why this works. I´m running Seam 2.2.2 with Richfaces 3.3.3.
Here is the code from the xhtml page:
...
<h:form id="radiobuttontestform">
<fieldset>
<h:panelGrid columns="3">
<h:selectOneRadio layout="pageDirection" id="myRadio" value="#{actionBean.myRadioButton}">
<f:selectItem itemLabel="First" itemValue="0" />
<f:selectItem itemLabel="Second" itemValue="1" />
<a4j:support event="onclick" ajaxSingle="true" process="myDropdown" reRender="myDropdown,myCount,test" />
</h:selectOneRadio>
<h:panelGrid columns="1" border="0">
<h:selectOneListbox size="1" id="myDropdown" value="#{actionBean.rowCountPredefined}" disabled="#{actionBean.myRadioButton != '0'}">
<f:selectItem itemLabel="10" itemValue="10" />
<f:selectItem itemLabel="20" itemValue="20" />
<f:selectItem itemLabel="30" itemValue="30" />
</h:selectOneListbox>
<h:inputText id="myCount" maxlength="5" value="#{actionBean.rowCountSpecified}" disabled="#{actionBean.myRadioButton != '1'}" required="true">
<f:validateLongRange minimum="1" maximum="1000" />
<rich:ajaxValidator event="onkeyup" for="myCount" />
</h:inputText>
<rich:message id="errorMessage" for="myCount" ajaxRendered="true" showDetail="false" showSummary="true">
<f:facet name="errorMarker">ERROR:</f:facet>
</rich:message>
</h:panelGrid>
</h:panelGrid>
</fieldset>
<h:outputLabel id="test" value="RadioValue: #{actionBean.myRadioButton}" />
<a4j:commandButton id="show" value="Show Values in Log" action="#{actionBean.showValues}" />
<a4j:commandButton id="done" value="Save and end conversation" action="#{actionBean.apply}" />
</h:form>
...
The backing bean is just a simple POJO with getters and setters for the three properties here. (myRadioButton, rowCountPredefined, rowCountSpecified)
This is what I get: (the correct result)
radio button example http://katzekat.de/Bilder/radio2.png
radio button example http://katzekat.de/Bilder/radio.png
Here is my thinking:
Setting ajaxSingle to true means that only the radio button will be processed on the server. The dropdown next to it doesn´t need validation - it will always contain a correct value. I´ve added the process="myDropdown" in order to persist the value into the backing bean, otherwise when I switch the radio button to position 2 the dropdown reverts to its original value. (I realise this is only cosmetic!) I´ve checked this with a debugger and it does indeed set the property in the backing bean and everything is working as expected.
Once the radio button is switched into position 2 a value can be entered in the textbox and will be validated. This works perfectly, and when I switch the radio button back to position 1, the validation error is cleared if this field is in an error state. Presumably because the error message is only present in the request scope.
Firing up the debugger again when the radio button is in position 2 and entering a valid value in the text field reveals no update on the backing bean when switching back to position 1. I also expected this as I´m telling only the radio and the dropdown to process on the server. This is the bit I don´t understand though - the value in the textfield is persisted on postback. (See 2nd link above) Where is this value for this textfield saved if not in the backing bean ?
Submitted form values are stored in component on Apply Request Values phase.
For example in your case javax.faces.component.html.HtmlInputText#decode method of the textfield calls javax.faces.component.UIInput#setSubmittedValue. The submitted values are not set to the bean (as you expected) as the component is not included to execute part. Then inputText's renderer re-displays (writes to the response) the submitted values.
It works pretty the same when validation fails. Submitted values are stored on Apply Request Values phase, and then because of failed validation the submitted values are not set to beans (Update Model Values phase is skipped), then the submitted values are re-displayed.
I have the following usage of the p:selectOneMenu:
<p:selectOneMenu id="selectField"
value="#{someBean.someField}"
converter="#{selectItemConverter}" var="x" editable="true">
<f:selectItems
value="#{selectItemsBean.getSelectItems(tab, field)}" var="si"
itemLabel="#{si.label}" itemValue="#{si}" />
<p:column>
<h:outputText value="#{si.label}" />
</p:column>
<p:column>
<h:graphicImage library="images" name="noway_16x16.png"
title="#{si.disabledReason}" rendered="#{si.disabled}" />
</p:column>
<p:ajax event="change" update="#form" partialSubmit="true" process="selectField" />
</p:selectOneMenu>
As you can see, I use custom content in combination with editable=true. When I submit the form, the Converter gets the label of a selected item as the value, not the actual value. In the HTML page, the values are correct, e.g. <option value="C">C-style mounting</option>. With editable=false, the correct value (e.g. C is sent to the converter, with editable=true the converter retrieves C-style mounting.
What I want is that the user can either select one of the pre-defined items in the list and the server submits that value of the item OR the user enters something and that is submitted as value. But the current behavior is a bit strange - or am I just wanting too much?
My requirement is like this: I am having a text input and whenever a value change event occurs, a select many list box has to be populated. If there is no matching records found, then a text input has to appear instead of a select many list box.
<h:column>
<h:selectManyListbox size="3" value="#{hostInfoBean.gateKeeperendPointReference}" rendered="#{hostInfoBean.selectManyRendered}" id="gateKeeperendPointReference">
<f:selectItems value="#{hostInfoBean.gateKeeperendPointReferenceItems}" />
</h:selectManyListbox>
<h:inputText id="gateKeeperendPointReferenceText" size="30" rendered="#{!hostInfoBean.selectManyRendered}">
</h:inputText>
</h:column>
Also I am using a4j for the value change listener,
<a4j:support event="onchange" reRender="hostInfo:gateKeeperendPointReference" focus="GFacPath"
ajaxSingle="true" />
'selectManyRendered' is a boolean value which I am determining in the JAVA bean. The program works only for the default value of the boolean variable. If the boolean value is changed during runtime, then the toggle between the visibility of selectManyListbox and inputText is not working. Please help to fix this. Am i missing something?
regards,
Suresh
If the "rendered" attribute resolves to false, then the component isn't in your tree and can't be found as a "rerender" target. When you have components that are rendered conditionally you want to wrap them in a component that is always available as a target, like so:
<h:inputText value="#{myBean.text}" >
<a4j:support event="onkeyup" reRender="listZone" ajaxSingle="true" />
</h:inputText>
<h:panelGroup id="listZone">
<h:selectManyListbox value="#{myBean.list}" rendered="#{myBean.renderList}" >
<f:selectItems value="#{myBean.listItems}" />
</h:selectManyListbox>
<h:inputText size="30" rendered="#{!myBean.renderList}/>
<h:panelGroup id="listZone">