How to reset <f:ajax> disabled attribute - jsf

given the following code:
<h:inputText id="minRate" value="#{bakingController.minRate}">
<f:convertNumber type="currency" pattern="#{msg.currencyPattern}" maxFractionDigits="0"/>
<f:ajax event="keyup" listener="#{bankingController.listProviders()}" execute="minRate" render="minRate btn-submit" disabled="#{facesContext.validationFailed}"/>
</h:inputText>
i would like to disable the ajax-listener if the validation is failed for the first keyup-event, e.g. user enters some non-digits. but when i clear the input field or enter a valid number then, it won't get reactivated, although the parent field is re-rendered. how can i solve that?
may you answers help.

there was a thinking flaw -.-
i have to validate with javascript if the input matches the appropriate format. then the listener will only be called, if the javascript-function returns true. so the disabled attribute is not needed.
<h:inputText id="minRate" value="#{bakingController.minRate}" onkeyup="return $.isNumeric(this.value)">
<f:convertNumber type="currency" pattern="#{msg.currencyPattern}" maxFractionDigits="0"/>
<f:ajax event="keyup" listener="#{bankingController.listProviders()}"
execute="minRate" render="minRate btn-submit"/>
</h:inputText>

Related

PrimeFaces, Disabling/Enabling an p:inputText does not save its value to database

I'm combining a <p:selectBooleanCheckbox> and a <p:inputText>. The <p:selectBooleanCheckbox>´s value must be enabled/disabled the <p:inputText>. When <p:inputText> is enabled (<p:inputText> property disabled=false) the user is allowed to type a value to the input text field to later it be saved to a Database ( both values, checkBox and inputText). Everything is working fine, except that the value introduced to the inpuText object is not saved to data base. I'm using a PestgreSQL database, field dpNumPasaporte in database is numeric.
<p:selectBooleanCheckbox id="chkPasaporte"
value="#{DatosPersonalesBean.chkPasaporte}"
style="float: right;padding-top: 9px;" >
<p:ajax event="change"
update="inpPasaporte"/>
</p:selectBooleanCheckbox>
<p:inputText id="inpPasaporte"
value="#DatosPersonalesBean.datosPersonales.dpNumPasaporte}"
style="alignment-adjust: baseline; width: 190px"
disabled="#{!(DatosPersonalesBean.chkPasaporte)}">
</p:inputText>
Note: I tested the block <p:inputText> separately and it is saving in database.
Thanks in advance,
you must add an ajax event and I think that you have missed by entering the name of your Bean, you must add :
<p:inputText ... value="#{datosPersonalesBean.datosPersonales.dpNumPasaporte}` >
<p:ajax event="change" process="#this" />
</p:inputText>

How to make one field from two required at least with JSF/Primefaces

I'm using primefaces with jsf and i want to make one of two fields required at least. that means that the error message will be displayed if this two fields are empties togheter:
this is a sample of my code:
<h:outputLabel for="srcNumber" value="Originator MSISDN (EXAMPLE 32495959595)" />
<p:inputText id="srcNumber" value="#{cdrMmscRecBean.srcNumber}" label="srcNumber" />
<h:outputLabel for="destNumber" value="Destination MSISDN (EXAMPLE 32495959595)" />
<p:inputText id="destNumber" value="#{cdrMmscRecBean.destNumber} label="destNumber" />
thanks :)
You can implement it this way:
<p:inputText id="srcNumber" value="#{cdrMmscRecBean.srcNumber}" label="srcNumber"
required="#{empty cdrMmscRecBean.destNumber}" requiredMessage="SRC Number Required">
<p:ajax event="change" update="destNumber" />
</p:inputText>
<p:inputText id="destNumber" value="#{cdrMmscRecBean.destNumber}" label="destNumber"
required="#{empty cdrMmscRecBean.srcNumber}" requiredMessage="DEST Number Required">
<p:ajax event="change" update="srcNumber" />
</p:inputText>
For more reference on how to parametrize your validation message:
Parametrized Messages in JSF with Facelets Taglib Functions
If you want to show the validation error use <p:message for="srcNumber" />
and same for test number, get rid of your outputLabels, this will show the validations warnings.
You neeed to add the required="true" flag to your inputTexts as well.
This is primefaces
EDIT
Purpose of the h:outputLabel and its "for" attribute this here shows the outputLabel for using non primefaces to show validatoin messages if this is all your problem was then u just need to add the required="true" validation flag indicators on your input texts

CommandLink with parameter in actionListener method doesn't work inside f:facet of datatable

I'd like to be able to click the headers in a table to sort the respective columns. When I try to do this with a h:commandLink and pass the column name as a parameter I get an error saying that the commandLink needs to be ended with > or />, which I do. Example:
<h:column>
<f:facet name="header">
<h:commandLink
value="name"
actionListener="#{albumListBean.sort("album_name")}">
</h:commandLink>
</f:facet>
<h:outputText value="#{item.name}" styleClass="tableItem" />
</h:column>
I get the same result using f:ajax or p:commandLink. If I remove the parameter however, I get no error (but of course the sorting doesn't work either).
Is it not allowed to pass a parameter this way inside the f:facet?
The strings inside EL expressions must be expressed inside simple cotes :
<h:commandLink
value="name"
actionListener="#{albumListBean.sort('album_name')}">
</h:commandLink>

Check box and Radio Button selection gets cleared on h:selectOneMenu value change

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.

Dynamically changing the visibility of the JSF components

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">

Resources