How can I show/hide the overlay panel conditionally from #ManagedBean based on some result.
In the below code: p:overlayPanel is for p:commandButton. I want to show overlay panel conditionally from Action method.
Right now it is showing every time I click the commandbutton.
<h:form id="form">
<h:outputLabel value="Town Name:"/>
<h:inputText value="#{myBean.town}"/>
<p:commandButton id="checkBtn" value="Check" action="#{myBean.action}"/>
<p:overlayPanel widgetVar="overL" id="over" for="checkBtn">
<h:outputText value="This town is not Listed in our records"/>
</p:overlayPanel>
</h:form>
Note : I'm using **Primefaces 3.5**
Give the overlay panel a widget name and set showEvent to none (this kills the default behavior and assign a javascript handle to the panel):
widgetVar="myOverlay" showEvent="none"
add oncomplete attr to you button, something like:
oncomplete="if(args && !args.validationFailed) myOverlay.show();"
Related
I have to radio buttons and text fields on the page. If the first radio button is clicked, the input text gets filled with the data. If the second radio button is clicked , then the same form gets updated and field with new information. In both cases I invoke two different functions for getting result. By default when I open the page, the first radio button is selected.
I have to color input text on the first radio button where the data in the first and second radio button are different. I have to compare if the value from for example (Name input text value from first radio button is equals to Name input text value from the second radio button). How to do that? I am new to PrimeFaces
<p:outputLabel for="name" value="#{msg['label.name']}" />
<p:inputText id="name" value="#{tab.radioButton=='First' ? tab.data.name1 : tab.data.name2}" disabled="true" />
You need ajax to update managed bean field when radio button is chosen, add conditional class to input field and refresh/update it.
XHTML
<h:form id="myForm">
<p:selectOneRadio value="#{tab.radioButton}">
<f:selectItem itemLabel="Choice 1" itemValue="First" />
<f:selectItem itemLabel="Choice 2" itemValue="Second" />
<p:ajax event="change" update=":myForm:name"/>
</p:selectOneRadio>
<p:outputLabel for="name" value="Name" />
<p:inputText id="name" value="#{tab.radioButton=='First' ? tab.data.name1 : tab.data.name2}" disabled="true"
styleClass="#{tab.radioButton == 'First' ? 'first-radio-checked' : 'other-radio-checked'}"/>
</h:form>
CSS
#myForm .first-radio-checked {
background-color: green;
}
#myForm .other-radio-checked {
background-color: red;
}
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
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>
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 am working on a form which has two datatables. In the first datatable, I am displaying the radio buttons and checkboxes, whereas the second datatable contains
selectOneMenu(s). Value change listener has been implemented on the selectOneMenu and on value change, the subsequent fields gets populated based on the selection.
Everything works fine except that when I select the value from the dropdown, the checkbox and the radio button values are cleared.
f:ajax event="change" has been used for the change event on selectOneMenu. Looks like the whole page gets refreshed and the values are cleared.
I also tried using f:ajax by updating the id of the datatable in which the selectOneMenu is present.
<p:dataTable styleClass="borderless" id="inResultTable" var="result" value="#{RequestBean.fooFields}" rendered="#{not empty RequestBean.fooFields}">
<p:column style="width:150px;">
<f:facet name="header">
<h:outputText value=" " />
</f:facet>
<h:outputText value="#{msg[result.fldLabel]}" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="" />
</f:facet>
<ui:repeat value="#{RequestBean.fooFields}"
var="itm">
<h:selectOneMenu value="#{itm.indFieldValue}"
rendered="#{result.lvlid==itm.lvlid}"
style="width:250px;padding-right:150px;text-align: left;">
<f:selectItems value="#{RequestBean[itm.indField]}" />
</h:selectOneMenu>
<h:selectOneRadio value="#{itm.indFieldValue}" rendered="#{result.lvlid==itm.lvlid and result.fldType=='radio'}"
style="width:250px;padding-right:150px;text-align: left;">
<f:selectItems value="#{RequestBean[itm.indField]}" />
</h:selectOneRadio>
<h:selectManyCheckbox value="#{itm.indFieldCheckBox}" rendered="#{result.lvlid==itm.lvlid and result.fldType=='selectbox'}">
<f:selectItems value="#{RequestBean[itm.indField]}" />
</h:selectManyCheckbox>
</ui:repeat>
</p:column>
</p:dataTable>
<p:dataTable styleClass="borderless"
id="resultTable" var="result"
value="#{RequestBean.depFields}">
<h:selectOneMenu value="#{RequestBean.field4Value}"
valueChangeListener="#{RequestBean.processValueChange4}"
rendered="#{result.lvlid=='5' and result.fldType=='selectbox'}"
style="width:250px;padding-right:150px;text-align: left;">
<f:selectItem itemLabel="--Please Select--" itemValue="#{null}" />
<f:selectItems value="#{RequestBean[result.field]}" />
<f:ajax event="change" render="#form" />
</h:selectOneMenu>
...
...
</p:dataTable>
N.B: The requirement is such that the datatable with checkbox and radio buttons has to be placed at the top. IDs cannot be used for the selectOneMenu in the second table since I am
populating the selecOneMenu(s) dynamically based upon the entries in the database.
I know that this might be a simple issue but didn't have any luck with the info posted on most websites.
Any help would be appreciated.
Here's your <f:ajax>.
<f:ajax event="change" render="#form" />
You didn't specify the process attribute. So it defaults to #this, which means that only the current input component is processed during submit. However, you specified a render of the whole form. So the whole form will be refreshed. However, the other input components aren't been processed during submit. So their model values won't be updated, which means that during render response the initial values will be redisplayed instead of the submitted values, which are in your case apparently blank/null.
You've basically 2 options:
Process the whole form during submit.
<f:ajax process="#form" render="#form" />
Or, update only those components which really needs to be updated.
<f:ajax render="clientId1 clientId2 clientId3" />
In your particular case I think option 2 isn't viable, so option 1 is the best one. Please note that I omitted the event attribute. It defaults to change already.
Unrelated to the concrete problem, I'm not sure what you're all doing in your value change listener method, but I only want to note that most starters abuse it for the purpose of manipulating the model values and that it don't always work quite as expected (changed model values are not reflected at all). If this is true in your case, then you should actually be using <f:ajax listener> instead.
See also:
When to use valueChangeListener or f:ajax listener?
The main reason for the values of Check boxes & Radio buttons getting cleared after a value change listener could be that the model values are not updated.
Value change listeners are called before updating the model.
For these kind of issues, it is very important to have an understanding of the JSF lifecycle.
Please try following code in your value change listener and see.
public void valueChange(ValueChangeEvent event){
PhaseId phase = event.getPhaseId();
if (phase.equals(PhaseId.ANY_PHASE))
{
event.setPhaseId(PhaseId.UPDATE_MODEL_VALUES);
event.queue();
return;
}
if(!phase.equals(PhaseId.UPDATE_MODEL_VALUES))
{
return;
}
// Your code
}
I didn't try this code with your example. Please let me know with complete example source code if it is not working.
Thanks.