I want to have a tooltip for an inputtext and I need the tooltip to be updated when I complete the inputtext. I place this elements inside a form.
The inputtext takes the value from a backing bean, and the value is set in the bean only when I submit the form. Yhe tooltip also takes the value from the bean.\
Here is some code I use (of course, it is not working):
<h:inputText id="inp" value="#{individual.givenName}">
<a4j:support event="onchange" reRender="inp" />
</h:inputText>
<rich:toolTip id="inp_tip">#{individual.givenName}</rich:toolTip>
I want the tooltip to be updated when I type some text. Any idea how I can do this?
Thanks!
You can get the tooltip updated by implementing something like this:
<a4j:region id="a4jRegion">
<h:panelGroup layout="block" id="divTooltipInputText">
<h:inputText id="inp" value="#{individual.givenName}">
<a4j:support event="onchange" reRender="divTooltipInputText" />
</h:inputText>
<rich:toolTip for="inp" id="inp_tip">#{individual.givenName}</rich:toolTip>
</h:panelGroup>
</a4j:region>
The a4j:region will limit the processing on the onchange event to just the inputText and toolTip.
Related
I have an inputtext like this:
<h:inputText id="cpfCnpjDestino"
class="#{actionCadastrarCotacaoDadosGerais.getStyle()}" tabindex="8"
required="false" maxlength="18"
value="#{actionCadastrarCotacaoDadosGerais.cotacaoDTO.cpfCnpjDestino}"
disabled="#{boxCotacao.isTipoFreteFob}"/>
There's a selecteone that depending on its value, rerenders the inputtext disabling it enabling it.
The thing is, after disabling and enabling it, it's losing its class value (its a mask for the input btw).
Is there a way to keep the class value?
EDIT: Actually, after the rerender, the inputtext is losing its class value, not after disabling and enabling.
EDIT: here are the codes
SelectOneMenu
<a4j:outputPanel id="panelTipoFrete">
<h:selectOneMenu id="tipoFrete" tabindex="1"
value="#{actionCadastrarCotacaoDadosGerais.cotacaoDTO.idTipoFrete}"
label="Selecione" class="selectMiddle" required="false">
<f:selectItems
value="#{actionCadastrarCotacaoDadosGerais.tiposFrete}"></f:selectItems>
<a4j:support ajaxSingle="true" event="onchange"
action="#{actionCadastrarCotacaoDadosGerais.renderizarCampoCNPJDestinatario()}"
reRender="cpfCnpjDestino" />
</h:selectOneMenu>
</a4j:outputPanel>
and the method:
public String getStyle(){
return "cpfCnpjCaracteresDestino";
}
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.
I have a popup panel (id=PanelAddQueryCriteria) define on top of jsf page but it only enable it after user select a menu item (id=entityKind) and re-render take pace for that popupPanel. However because of that re-render, select item (id=queryCriteriaAttr) inside that popup panel don't trigger change listener (#{ceaDBBean.queryCriteriaAttrChanged}) in first value change, and only trigger when select again... Any help? Here the code:
<rich:popupPanel id="PanelAddQueryCriteria">
<h:form id="formAddQueryCriteria">
<h:selectOneMenu id="queryCriteriaAttr"
value="#{ceaDBBean.queryCriteriaAttr}" required="true"
valueChangeListener="#{ceaDBBean.queryCriteriaAttrChanged}">
<f:selectItems value="#{ceaDBBean.ceaEntityKindAttrs}"/>
</h:selectOneMenu>
</h:form>
</rich:popupPanel>
<h:panelGrid id="searchPanel">
<h:selectOneMenu id="entityKind"
value="#{ceaDBBean.entityKind}" required="true"
valueChangeListener="#{ceaDBBean.entityKindChanged}">
<a4j:ajax event="valueChange" render="addQueryCriteria" execute="#this" />
<f:selectItems value="#{ceaDBBean.ceaEntityKinds}" />
</h:selectOneMenu>
<a4j:commandLink styleClass="no-decor" id="addQueryCriteria"
render="PanelAddQueryCriteria"
disabled="#{empty ceaDBBean.entityKind}"
execute="#this" action="#{ceaDBBean.initAddQuryCriteria}"
oncomplete="#{rich:component('PanelAddQueryCriteria')}.show()">
<h:graphicImage id="addQueryCriteriaImg"
value="/images/icons/common/new.gif" width="16" height="16"
alt="#{adminMsg.addQueryCriteria}" />
<rich:tooltip value="#{adminMsg.addQueryCriteria}" for="addQueryCriteria" />
</a4j:commandLink>
</h:panelGrid>
Short answer: this problem is caused by JSF issue 790. Change
render="PanelAddQueryCriteria"
by
render="formAddQueryCriteria"
or maybe, if you have actually more into the panel which needs to be updated than the form itself,
render="PanelAddQueryCriteria formAddQueryCriteria"
Long answer: read following related questions:
<a4j:commandbutton> action is only invoked on second click
h:commandButton/h:commandLink does not work on first click, works only on second click
I tried different combinations to just rerender the result pannel.
it works fine with
<h:form><a4j:region>
<h:inputText value="#{myBean.keyword}">
<a4j:support event="onchange" reRender="results" eventsQueue="search" oncomplete="initResults();" />
</h:inputText>
</a4j:region>
</h:form>
But i just want to submit it when enter is pressed. So i tried
<h:form reRender="results" eventsQueue="search" oncomplete="initResults();"><a4j:region>
<h:inputText value="#{myBean.keyword}"/>
</a4j:region>
</h:form>
that returned an empty result even if it shouldn't be empty and
<a4j:region>
<h:form>
<a4j:support event="onsubmit" reRender="results" eventsQueue="search" oncomplete="initResults();" />
<h:inputText value="#{myBean.keyword}"/>
</h:form>
</a4j:region>
was reloading the whole page and not the result panel only (but results where shown). I even tried to add <h:form onSubmit="return false;"> in the last example. [EDIT: ok that return false is just overwritten by the AJAX support call]
How do i make my inputText field rerender when "enter" is pressed. (so the form is submitted) but don't want to submit the form.
EDIT: again my bad, i simplified the example code here too much. i had a second element with a4j:support in the same form, since i removed the a4j tag there and changed the onchange event to a form submit, too, it is working.
<h:selectOneMenu value="#{myBean.selectedMetaCategory}" onchange="this.form.submit();">
<a4j:support ...
<f:selectItems value="#{myBean.metaSelectItems}"/>
</h:selectOneMenu>
Try like this:
<a4j:region>
<a4j:form onsubmit="reRenderResults();">
<h:inputText value="#{myBean.keyword}"/>
</a4j:form>
<a4j:jsFunction name="reRenderResults" reRender="results" eventsQueue="search" oncomplete="initResults();" />
</a4j:region>
I am using icefaces in my application.
There is a form in the page, which has a couple of input fields.
I would like to enable the commandbutton only if the fields are valid(no errors for the other components)
Is it possible to do it ?
example code
<ice:form>
<ice:panelGrid columns="2">
<ice:outputLabel>Enter Date</ice:outputLabel>
<ice:panelGroup>
<ice:selectInputDate renderAsPopup="true" id="InputDate" value="#{Bean.FormDate}" partialSubmit="true" ></ice:selectInputDate>
<ice:message for="InputDate" />
</ice:panelGroup>
<ice:outputLabel>Days</ice:outputLabel>
<ice:panelGroup>
<ice:inputText value="#{Bean.days}"partialSubmit="true" id="inputDays">
<f:validateLongRange minimum="1" maximum="10"/>
</ice:inputText>
<ice:message for="inputDays"/>
</ice:panelGroup>
<ice:commandButton value="Submit" action="#{Bean.SomeAction}"></ice:commandButton>
</ice:panelGrid>
In the above code, I want to enable the submit commandbutton only if the days and date are valid(Don't have any error enqueued.
If you are using jsf 2.0 you can do something like this:
<ice:form>
<ice:panelGrid columns="2">
<ice:outputLabel>Enter Date</ice:outputLabel>
<ice:panelGroup>
<ice:selectInputDate renderAsPopup="true" id="InputDate"
value="#{Bean.FormDate}" partialSubmit="true"
binding="#{inputDateComponent}">
<f:ajax execute="#this" render="submit inputDateMessage" />
</ice:selectInputDate>
<ice:message id="inputDateMessage" for="InputDate" />
</ice:panelGroup>
<ice:outputLabel>Days</ice:outputLabel>
<ice:panelGroup>
<ice:inputText value="#{Bean.days}" partialSubmit="true"
id="inputDays" binding="#{inputDaysComponent}">
<f:validateLongRange minimum="1" maximum="10" />
<f:ajax execute="#this" render="submit inputDaysMessage" />
</ice:inputText>
<ice:message id="inputDaysMessage" for="inputDays" />
</ice:panelGroup>
<ice:commandButton id="submit" value="Submit"
action="#{Bean.SomeAction}"
disabled="#{!inputDateComponent.valid}" />
</ice:panelGrid>
</ice:form>
I haven't tested this specific example but you can see where I'm going. The input fields get evaluated on change and either show validation errors or create a condition where the commandButton is not disabled.
You could also use rendered= and make positive assertions if you want the button to only appear when the input fields are valid.
You could use a phase-listener as described here:
http://balusc.blogspot.com/2007/12/set-focus-in-jsf.html
The phase-listener in this example builds a string with client-ids that have messages attached. Check this string in a bean and create a bean property depending on whether there are ids with messages or not.
Then you can enable the command button depending on the bean property.
Switch each of your input fields to 'immediate="true"' and add a validator to the fields.
Have the validator set/unset a boolean to determine whether the fields contain valid data and do as sparrowhawk suggests and test this boolean value(s) in the rendered expression for the submit button.