In the page below,Topic__c is a single-select picklist. My intention is to have this list control which of the input fields is available below. The user selects an option, and the onchange event should fire, and rerender the fields.
<apex:inputField value="{!Call_Report__c.Topic__c}" id="topic" >
<apex:actionSupport event="onchange" reRender="tickerInput,sectorInput,bondInput">
<apex:param name="topicSelection" value="{!Call_Report__c.Topic__c}" />
</apex:actionSupport>
</apex:inputField>
<apex:inputField value="{!Call_Report__c.Tickers__c}" rendered="{!Call_Report__c.Topic__c='Issuer'}" id="tickerInput" />
<apex:inputField value="{!Call_Report__c.Sector__c}" rendered="{!Call_Report__c.Topic__c='Industry'}" id="sectorInput"/>
<apex:inputField value="{!Call_Report__c.Security__c}" rendered="{!Call_Report__c.Topic__c='Specific Bond'}" id="bondInput" />
Am I doing something obviously wrong here? http://community.salesforce.com/t5/Visualforce-Development/Multi-select-picklist-not-firing-event-for-AJAX-refreshes/m-p/173572/highlight/false#M22119 seems to imply that what I am doing is reasonable...
I'm pretty sure you need to rerender at a higher level than that, like at the level of an <apex:outputPanel id="thePanel"> or an <apex:page id="thePage">
I agree. Try wrapping your code in an outputPanel and rerendering that.
Related
In a basic registration screen (with button register records the screen) there are two panels:
Data panel:
Address panel:
I can register by completing only the Data panel. It is not necessary to fill the Address panel. However, if at least one field of the Address panel is filled, then all other fields in the same panel should be required.
How can I achieve this?
You need to check in the required attribute if the other inputs have submitted a non-empty value. Since this can result in quite some boilerplate, here's a kickoff example with only 3 input components.
<h:form id="form">
<h:inputText id="input1" value="#{bean.input1}" required="#{empty param['form:input2'] and empty param['form:input3']}" />
<h:inputText id="input2" value="#{bean.input2}" required="#{empty param['form:input1'] and empty param['form:input3']}" />
<h:inputText id="input3" value="#{bean.input3}" required="#{empty param['form:input1'] and empty param['form:input2']}" />
</h:form>
An alternative is to bind the components to the view and use UIInput#getValue() to check the value of the previous components and UIInput#getSubmittedValue() to check them for next components (components are namely processed in the order as they appear in the component tree). This way you don't need to hardcode client ID's. You only need to ensure that binding names doesn't conflict with existing managed bean names.
<h:inputText binding="#{input1}" value="#{bean.input1}" required="#{empty input2.submittedValue and empty input3.submittedValue}" />
<h:inputText binding="#{input2}" value="#{bean.input2}" required="#{empty input1.value and empty input3.submittedValue}" />
<h:inputText binding="#{input3}" value="#{bean.input3}" required="#{empty input1.value and empty input2.value}" />
You'll understand that this produces ugly boilerplate when you have more and more components. The JSF utility library OmniFaces has a <o:validateAllOrNone> validator for the exact purpose. See also the live demo. Based on your quesiton tags, you're using OmniFaces, so you should already be set with just this:
<o:validateAllOrNone components="input1 input2 input3" />
<h:inputText id="input1" value="#{bean.input1}" />
<h:inputText id="input2" value="#{bean.input2}" />
<h:inputText id="input3" value="#{bean.input3}" />
First you should add a method to backing bean something like this:
public boolean isAddressPanelRequired() {
// Check if at least one field is entered
// and return true if it is and false othervise
}
Each input element on address panel should have required="#{backingBean.addressPanelRequired}"
Then add onblur ajax listener on each input component on address panel which process that component, and updates address panel.
I need to validate across multiple fields in such a way that validation should be violated only when one of the given fields is violated.
It is distinct from cross field validation in which a value of one field is dependent upon the value(s) of one or more of the rest of the fields.
Given below a simple scenario.
<p:inputText id="txt1" value="#{testBean.txt1}" required="false" maxlength="45"/>
<p:inputText id="txt2" value="#{testBean.txt2}" required="false" maxlength="45"/>
<p:inputText id="txt3" value="#{testBean.txt3}" required="false" maxlength="45"/>
<p:commandButton id="btnSubmit" actionListener="#{testBean.insert}"
icon="ui-icon-check" value="Save"/>
In which, validation violation should be occurred only when one of the given three text fields is left blank. If anyone of them is filled with a value then, all should be validated. In which case, validation should not be violated.
How to proceed with this scenario? Does JSF/PrimeFaces provide some way to perform validation in this way?
I have a hard time in wrapping my head around your concrete functional requirement, but I believe you're looking for "all or none" validation. I.e. either all fields should be blank, or all fields should be filled. JSF utility library OmniFaces has a validator for exactly this purpose, the <o:validateAllOrNone>.
Here's how you could use it:
<p:inputText id="txt1" value="#{testBean.txt1}" maxlength="45" />
<p:inputText id="txt2" value="#{testBean.txt2}" maxlength="45" />
<p:inputText id="txt3" value="#{testBean.txt3}" maxlength="45" />
<o:validateAllOrNone components="txt1 txt2 txt3" />
Of course!
Primefaces provide a lot of ways that can satisfact you. First of all, you can make validations in your MBean method. In your case, you're calling insert method, so you can do something like this:
public String insert(){
boolean error = false;
if(txt1.isEmpty()){
error = true;
}
if(txt2.isEmpty()){
error = true;
}
if(txt3.isEmpty()){
error = true;
}
if(error == true){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_WARN,"Empty fields!", "Insert something in at least one input!"));
return null;
}else{
return "myPage"
}
}
Note that you can improve the validations by yourself, following your needs. You can also change the message from:
FacesMessage.SEVERITY_WARN
to:
FacesMessage.SEVERITY_INFO
FacesMessage.SEVERITY_ERROR
FacesMessage.SEVERITY_FATAL
What can give your application a better error message.
Before this works, add this above your input fields:
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
Probably this will work like a charm! If you're interested, check the Primefaces Messages showcase, where you can find some examples and understand better how <p:messages> works. Also, feel free to check <p:growl>, that in my opinion is a lot better than simple messages. Check out the growl here.
Hope I helped you (:
I have a form with, say a text field and a multi-select field.
<h:form id="form2">
<h:messages for="text3" />
<h:inputText id="text3" value="#{danielBean.text3}" required="true"/>
<br/>
<h:messages for="select1" />
<h:selectManyMenu id="select1" value="#{danielBean.selStrings}"
style="height:8em;" required="true"/>
<f:selectItems value="#{danielBean.allStrings}" var="_item" itemLabel="#{_item} (length #{_item.length()})" />
<br/>
<p:commandButton
value="Submit"
action="#{danielBean.save()}"
update=":form2"
>
</h:form>
On submit, both get validated, and if validation is successful, the relevant variables in the backing bean are updated. Fair enough.
The problem happens when the validation (of the multi-select) is NOT successful. In my Bean, I have (particularly for the List<String>s allStrings and selStrings)...
#PostConstruct
public void init() {
text3 = "";
allStrings.clear();
allStrings.add("This");
allStrings.add("is");
allStrings.add("a");
allStrings.add("test");
selStrings.clear();
selStrings.add("a");
}
...so that the multi-select has one pre-selected option. If the user unselects that option (i.e. no options chosen), the validation will -of course- fail, an error message will be displayed...
...but the multiselect will not be empty. It will show the content from the bean, i.e. "a" selected. This is confusing to the user - getting an error message "input required", and being shown a filled-out field.
This appears to be a feature of JSF's lifecycle, see this article by BalusC:
"When JSF renders input components, then it will first test if the submitted value is not null and then display it, else if the local value is not null and then display it, else it will display the model value."
This works fine for the text field text3, because it submits as an empty string, not null.
The problem is that zero selected options from a multi-select means that the submitted value is null, that the local copy (I guess, since it's the first submit) is null, so that the model value ("a" selected) is displayed.
I do not want that.
How can I force JSF to use the null value it got submitted when rendering the validation response?
Thanks in advance
Antares42
There is no solution for this (other than reporting an issue to JSF guys and/or hacking in JSF source code). There's however a workaround: update only the components which really need to be updated on submit. Currently, you've set ajax to update the entire form. How about updating just the messages?
<h:messages id="text3_m" for="text3" />
...
<h:messages id="select1_m" for="select1" />
...
<p:commandButton ... update="text3_m select1_m" />
You can if necessary make use of PrimeFaces Selectors to minimize the boilerplate if you have rather a lot of fields:
<h:messages for="text3" styleClass="messages" />
...
<h:messages for="select1" styleClass="messages" />
...
<p:commandButton ... update="#(.messages)" />
hava an inputText and a gmap
<h:inputText class="text" value="#{restaurant.address}" />
<p:gmap id="gmap" center="21.027845,105.852268" zoom="12" type="ROADMAP"
style="width:360px;height:388px"
model="#{restaurant.emptyModel}"
onPointClick="handlePointClick(event);"
widgetVar="map">
First, address="", when i click on gmap, address="xxx" not null.So how can i show its value in inputText tag after clicking on gmap. Thank you!
You can just add an ajax event to the map
<p:gmap id="gmap" center="21.027845,105.852268" zoom="12"
type="ROADMAP" style="width:360px;height:388px"
model="#{restaurant.emptyModel}"
onPointClick="handlePointClick(event);" widgetVar="map">
<p:ajax event="pointSelect" update="theInputText"/>
</p:gmap>
Where theInputText is going to be the id of the <p:inputText/> to be updated
I m trying call method bean when an item is selected in combo (rich: select) as follow:
<rich:select id="combo"
value="#{bean.code}"
valueChangeListener="#{bean.productChanged}"
immediate="true" required="true">
<a4j:ajax event="change" render="callConflict"
oncomplete="javascript:showConflict();" />
<f:selectItems
value="#{bean.products}" />
<f:attribute name="attributeName"
value="#{bean.attribute}" />
</rich:select>
But this code, the method in the bean is only called when the item is changed AND WHEN THE COMBO LOSES FOCUS
As should be done to invoke the method on the bean after changing the product without having to wait for combo loses focus?
Thanks.
There are several ways to solve your problem. One of them, is removing the focus from your component
onlistclick = "x.blur()"
or
onlistclick = "window.blur()"
Yeah, this could work, but I guess it is not the best solution.
Another (better) way is to use:
<a4j:ajax event="selectitem" render="xxx"/>
Remember that: the event tag may be case senstive. For me, event = "selectItem" does not work (only "selectitem").