The title says it all.
--
I'm using primefaces's autocomplete. Whenever a query to server is triggered for fetching suggestions, I need to submit some data from an input field.
How do I do it ?
Just add a keyup ajax event to the other input, in order to send it when user changes its value. Later on, you'll have it already available for completion:
<p:inputText value="#{autoCompleteBean.value}">
<p:ajax event="keyup" />
</p:inputText>
<p:autoComplete value="#{val2}"
completeMethod="#{autoCompleteBean.completeItem}" />
Related
In some cases, I need to do some simple client side validation, and depending on that, fire an ajax call or not.
However, it appears that in IE, even when returning false in onchange, or in onstart on the p:ajax, the ajax event is still getting fired anyway.
So, my component currently looks like this:
<p:inputText id="pc" value="#{bean.pc}" valueChangeListener="#{bean.doStuff}" styleClass="if-nospace-upper" onchange="return isOK()">
<p:ajax immediate="true" onstart="PF('busyPopup').show();" oncomplete="PF('busyPopup').hide();" />
</p:inputText>
When invalid, my isOK() function returns false, but the ajax call is still being made, whereas I don't want it to.
Is there any possibility to do this at all?
One alternative is
<p:remoteCommand>
<p:inputText id="pc" value="#{bean.pc}"
valueChangeListener="#{bean.doStuff}" styleClass="if-nospace-upper"
onchange="return isOK()">
</p:inputText>
<p:remoteCommand name="rc">
<p:ajax onstart="PF('busyPopup').show();" oncomplete="PF('busyPopup').hide();" />
</p:remoteCommand>
and from javascript :
funtion isOK(){
//If Condtion matches
rc();
}
and please take out immediate="true" noticed you are using for <p:ajax> although it is not giving you any problem here but it's not good to force jsf to skip some life cycle steps unless and untill you have requirement
I need to show the response page depending on some of the input fields. E.g. the tabid inputHidden below:
#{controllerBean.tabId}
...
<h:form id="edit">
<h:inputHidden value="#{controllerBean.tabId}" id="tabid" />
<h:inputText value="#{controllerBean.name}" id="name" />
</h:form>
But when some other input in the same form has validation error (e.g. the "name" inputText). The "controllerBean.tabId" value will not be assigned because JSF returns at validation stage.
I still need the tabId to show the page correctly and having 2 ideas in mind:
#{param['edit:tabid']}
or use binding:
#{tabId.value}
<h:inputHidden value="#{controllerBean.tabId}" id="tabid" binding="tabId" />
My question is, which of these 2 is the better or Best Practice? Or there are even better ways to do this?
update:
Note. In my specific case, the tabid is set by client javascript.
Server reply with a few items in the html.
Javascript put these items into different tabs on the page.
One of the tabs POST data to server with the current tabid in the form.
So my server need to know the tabid to show the response page with the correct tab selected.
You can add a lifecycle event listener to the component and pick the value from it. I'm going to recommend the preValidate listener:
<h:form id="edit">
<h:inputHidden value="#{controllerBean.tabId}" id="tabid">
<f:event type="preValidate" listener="#{controller.grabTabId}"/>
</h:inputHidden>
<h:inputText value="#{controllerBean.name}" id="name" />
</h:form>
This registers the listener to fire just before the validation phase of the request. You'll now have a listener defined in your backing bean to look like:
public void grabTabId(ComponentSystemEvent cse){
//obtain a reference to the component
HtmlInputHidden hiddenElement = (HtmlInputHidden)cse.getComponent();
//get the value from the component.
String hiddenValue = hiddenElement.getValue();
}
<h:form id="edit">
<h:inputHidden value="#{controllerBean.tabId}" id="tabid" />
<h:inputText value="#{controllerBean.name}" id="name" >
<p:ajax process="tabid" immediate="true" event="keyup" />
</h:inputText>
</h:form>
The above code will do is when the user put some value the value will be processed and will be set the managedBean. that what you want I think.
Another non-perfect way of accomplishing this is to move the validation logic to your action method. If validation fails, you just stop processing (and add an applicable FacesMessage). You just need to be aware that all model values will have been updated, and you can clear them if necessary.
Since updating model values on failed validation goes against the JSF lifecycle, I think any solution will be somewhat of a hack.
I need to trigger an ajax update upon change to a text box, which is a <p:autoComplete> component. I have observed that if the user opts to type the text manually, the event is a change, whereas if the user clicks one of the suggestions for the autocomplete, the event is itemSelect. So I added two <p:ajax> children to the input, each calling the same method and having the same update list, but one having event="change" and the other event="itemSelect".
However, I now discover something odd. For example, while in normal server mode I opened my page and typed "12". The autocomplete offered "1233" and "1234" as suggestions. I clicked "1233" and seemingly nothing happened. I clicked again and everything else filled in.
Repeat this in the debugger with a breakpoint on the event handler, and I can see that after the first click, the value is "12" and on the second click, it becomes "1233".
By switching commenting out the two different <p:ajax> I can see the different consequences. Without the "change" one, the handler is never called if the user selects an autocomplete suggestion, and without the "itemSelect" one, the handler is never called if the user types manually. But with both of them, there are two calls, and I'm sure there will be complaints about the double-click.
Some pseudo-code for those that like, first the xhtml:
<p:autoComplete id="itemId" value="#{myBacker.myBean.itemNumber}"
required="true" completeMethod="#{myBacker.idAutoComplete}">
<p:ajax event="itemSelect" update="beanDetails"
listener="#{myBacker.idChangeEventListener()}" />
<p:ajax event="change" update="beanDetails"
listener="#{myBacker.idChangeEventListener()}" />
</p:autoComplete>
<h:panelGroup id="beanDetails">
<h:panelGroup rendered="#{not empty myBacker.myBean.institutionName}">
<h:outputText value="#{myBacker.myBean.institutionName}" />
<!-- Continues with address, phone, etc.. -->
</h:panelGroup>
</h:panelGroup>
Then the Java backing bean code:
public void idChangeEventListener() {
myBean = myDAO.getDetails(myBean);
// another couple of init-type method calls
}
Give the parent tag a widgetVar attribute, then add this little attribute to the <p:ajax event="change" ...> child tag:
onstart="if(widgetVarName.panel.is(':visible')) return false;"
When the question was written, we were on PrimeFaces version 3.5, if I recall correctly. Since then, we need to update the solution to:
onstart="if(PF('widgetVarName').panel.is(':visible')) return false;"
with thanks to mwalter for pointing out the change.
I'd like to execute valueChangeListener for p:inputText when user changes text and inputText looses focus (onchange). Is this possible? For now it only executed after I press return.
The valueChangeListener method requires a form submit to be invoked. This is a server side event, not a client side event or so. Just changing and blurring the input does by default not submit the form at all. Bring in a <p:ajax> to do the magic.
<p:inputText value="#{bean.inputValue}" valueChangeListener="#{bean.inputChanged}">
<p:ajax />
</p:inputText>
However, although you didn't tell anything about the concrete functional requirement for which you thought that this is the right solution, I just wanted to mention that the valueChangeListener is more than often the wrong tool for the job you had in mind. Use <p:ajax listener> instead.
<p:inputText value="#{bean.inputValue}">
<p:ajax listener="#{bean.inputChanged}" />
</p:inputText>
Note that this would then make it possible to pass method arguments by EL 2.2, which would immediately then answer the possible underlying functional requirement of your other — actually pretty poor — question.
<p:inputText value="#{bean.inputValue}">
<p:ajax listener="#{bean.inputChanged('arg1', 'arg2')}" />
</p:inputText>
Also note that this might not be the solution at all if you're actually interested on the entered value; you could just access the inputValue property directly.
See also:
When to use valueChangeListener or f:ajax listener?
I don't know how to implement onclick event on a combobox, my boss want me to do is once the user click a value in the combobox it automatically search and display all the value of the selected/click item. First question is it possible to have an onclick event on a JSF page without using any javascript/jquery? Right now I'm using ADF for designing the interface. Second question how can I implements this onclick event on my combobox?
There are a couple of ways to achieve this:
Use a valueChangeListener and execute your query when it fires.
Set autoSubmit="true" and when the bound value changes, execute your query.
Only selecting a value in a dropdown won't submit your form. This is not about JSF but HTML .. so without any JS i think it's not possible.
I do not know anything about ADF in special but in plain JSF you just have to add an ajax-event to your dropdown (e.g. in primefaces)
<h:form id="id1">
<p:selectOneMenu id="id2" value="#{myBean.value}"
immediate="true" editable="true" >
<f:ajax execute="#this" listener="#{myBean.doSomeAction}" />
<f:converter converterId="myConverter" />
<f:selectItems value="#{myBean.availableOptions}" />
</p:selectOneMenu>
</h:form>