In JSF using primeface
<p:autoComplete minQueryLength="5" value="#{itemManagementMB.itemManagementLazy.code}" forceSelection="true" autocomplete="false"
completeMethod="#{itemManagementMB.autoCompleteUsindCode}" dropdown="true">
<p:ajax event="itemSelect" listener="#{itemManagementMB.handleSelect}" />
</p:autoComplete>
When I enter 5 keywords that working fine. but I want implement in that way , if user enter 4 words and press dropdown it populate autocomplete based on 4 keywords.
One thing is blocking me that when I click on dropdown, autoCompleteUsindCode(String query) method take empty string and itemManagementMB.itemManagementLazy.code also empty.
any update ? / solution?
As per Primefaces 5.1 User Guide page 29, I quote:
Dropdown Mode
When dropdown mode is enabled, a dropdown button is displayed next to
the input field, clicking this button will do a search with an empty
query, a regular completeMethod implementation should load all
available items as a response.
After thinking a lot, I solved in that way
Solution:
<p:autoComplete id="anum" minQueryLength="5" value="#{transferInMB.itemManagementLazy.code}" forceSelection="true"
completeMethod="#{transferInMB.autoCompleteUsingCode}" dropdown="true">
<p:ajax event="itemSelect" listener="#{transferInMB.handleSelect}" />
<p:ajax event="keyup" />
</p:autoComplete>
I just add the following
<p:ajax event="keyup" />
Related
Here is the xhtml code for my autocomplete :
<p:column styleClass="col-quarter">
<p:autoComplete dropdown="false"
id="field"
value="#{managedbean.valueToAssign}"
completeMethod="#{managedbean.completeValue}"
maxResults="7">
<f:ajax event="blur" render="Next_field" />
<f:ajax event="itemSelect" render="Next_field" />
</p:autoComplete>
</p:column>
Here's what I don't get :
When I hover over that zone at the right of the field, the button is active. even if it's invisible. I want the field to be the same width than the next one, but the presence of the button prevents it.
I also tried without the dropdown="false" attribute but I still get the same result
EDIT : I managed to get the same width for both input, but the button is still active even if invisible.
<p:inputText value="#{bmiCalculatorBean.height}" update="#form" id="height">
<p:ajax update="#form" />
<f:convertNumber pattern="0" />
</p:inputText>
<p:inputText value="#{bmiCalculatorBean.weight}" update="#form" id="weight">
<p:ajax update="#form" />
<f:convertNumber pattern="0" />
</p:inputText>
I have a problem where after I enter a value into the first inputText and click on the "weight" inputText after a short delay the focus is lost and you need to click on the input box again.
How do I fix this?
This is caused by update="#form" and expected behavior.
In general, just do not update parts which do not need to be updated and update only those which really need to be updated. E.g. only the result calculated so far and the <h|p:message> of the current input:
<p:ajax update="calculatedResult currentInput_message" />
True, this may end up in a boilerplate of IDs in update attribute in large forms. The PrimeFaces Selectors (PFS, supporting jQuery selector syntax in JSF selectors) may then help a lot in this.
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>
I'm currently using JSF 1.2, and Richfaces 3.3.3.
I get a quite strange bug with a combobox in a rich:datatable :
The first time I click and select a value, it's working, and via ajax:support, it updates the page as required. But then, if I try to change the value in the combobox, it seems "blocked"... field is not editable, and the arrow not "clickable". If I click on another field of the page, then come back, it usually works better (but not always).
Here is the code :
<rich:column style="border:none;" id="KitCol">
<f:facet name="header">
<h:outputText value="Kit"/>
</f:facet>
<rich:comboBox id="kit" value="#{deployItem.kit}"
directInputSuggestions="true" defaultLabel="Enter kit name >
<f:selectItems value="#{deployItem.kits}" />
<a4j:support event="onchange" action="#{deployItem.kitChanged}"
reRender="deployActions, deployTable">
<f:setPropertyActionListener value="true" target="#{deployController.atLeastOneItem}" />
</a4j:support>
</rich:comboBox>
</rich:column>
Would somebody have an idea about how to solve this issue ?
Thanks in advance.
I am developing a jsf,richfaces application.where i want to populate the values of second select menu on the basis of selecting the choice from the first one .How i can achieve this.
<h:outputText id="section1" value="Section" />
<h:selectOneMenu id="section2" value="#{content.sectionName}" >
<f:selectItems value="#{content.sections}" />
</h:selectOneMenu>
what exactly i want is:
I have two tables one for category and one for section.
If a user choose a category from drop down menu then the other drop down menu for section should have the values only for selected category.
Please he
As per your question history you're using Ajax4jsf/RichFaces. Better use <a4j:support> instead of valueChangeListener.
<h:selectOneMenu id="section2" value="#{content.sectionName}" >
<f:selectItems value="#{content.sections}" />
<a4j:support event="onchange" action="#{content.changeSection}" reRender="otherMenuId" />
</h:selectOneMenu>
In the changeSection() method you need to populate the select items for the 2nd menu. The otherMenuId must refer to id of the other <h:selectOneMenu> in the same <a4j:region>.
You have to define a valueChangeListener for your first selectOneMenu:
<h:selectOneMenu id="select1" valueChangeListener="#{myBean.updateSections}">
<f:selectItems value="#{myBean.sections1}" />
</h:selectOneMenu>
Inside MyBean#updateSections you have to modify the list of SelectItems the second selectOneMenu has to show according to the selection you made.
Furthermore you have to submit your form or rerender section2 to display the updated values in section2.