Primefaces AutoComplete

[fabio moreira]

Hi Guys!
It is possible to render the same page another component using the autocomplete ?
My code:

<h:form id="company">
		
        <p:outputLabel autoUpdate="true" value="Company:" />        	
           <p:messages autoUpdate="true"/>
                               //I need to draw this component when any company is found, but does not work!!!
               <p:commandButton  autoUpdate="true" id="test" action="#" value="Not found the company? Click Here...." binding="#{Employ.createNewCompany}"/>
           
            <p:autoComplete    id="company" value="#{Company.search}"  completeMethod="#{Company.completeCompany}"
             var="c" itemLabel="#{c.name}" itemValue="#{v}"  converter="CompanyConverter">           
            <p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}"/>     
        </p:autoComplete>
 
	    </h:form> 

My ManageBean is

public List<Company> completeCompany(String query) {
     if(query != null){
		   Session s  = HibernateUtil.getSession().getCurrentSession();
		   Criteria crit = s.createCriteria(Company.class);
	       crit.add(Restrictions.like("name","%"+query+"%"));
	       selectedThemes = crit.list();
	       FacesContext contex = FacesContext.getCurrentInstance();
	       if(selectedThemes.size() == 0){
	    	   
	    		contex.addMessage(null, new FacesMessage("Nou found Company! Do you create the new Company?"));
	                //private HtmlCommandButton newCompany;
	                newCompany.setRendered(true);     //But does not work!!!!
	       }else{
	    	      newCompany.setRendered(false);   //But does not work!!!!
	       }
     }
	return selectedThemes;
	
}

Help!

[Mark Yevgeny]

 <p:autoComplete    id="company" value="#{Company.search}"  completeMethod="#{Company.completeCompany}"
             var="c" itemLabel="#{c.name}" itemValue="#{v}"  converter="CompanyConverter">    

why itemValue is set to #{v} ? (what is v ?). on getting company object as value why cant you enable render attribute ? with update of panel or specific id.

[fabio moreira]

Arun Giridhar wrote:

 <p:autoComplete    id="company" value="#{Company.search}"  completeMethod="#{Company.completeCompany}"
             var="c" itemLabel="#{c.name}" itemValue="#{v}"  converter="CompanyConverter">    

why itemValue is set to #{v} ? (what is v ?). on getting company object as value why cant you enable render attribute ? with update of panel or specific id.

Hy Arun Giridthar! Thanks for your reply!!
Sorry I typed in this code #{v} im typed wrong! The correct is #{c} (Variable for Company).
well, i tried to give an update but it did not work, see :

<h:form id="company">
         
        <p:outputLabel autoUpdate="true" value="Company:" />          
           <p:messages autoUpdate="true"/>
                               //I need to draw this component when any company is found, but does not work!!!
               <p:commandButton  autoUpdate="true" id="test" action="#" value="Not found the company? Click Here...." binding="#{Employ.createNewCompany}"/>
            
            <p:autoComplete    id="company" value="#{Company.search}"  completeMethod="#{Company.completeCompany}"
             var="c" itemLabel="#{c.name}" itemValue="#{v}"  converter="CompanyConverter"  update="test">//Does not Work, the component commandButton is not update!!!            
            <p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}"                     update="test"/>//Does not Work,the component commandButton is not render is not update!!!
        </p:autoComplete>
  
        </h:form> 

[Mark Yevgeny]

first i dont know why you have used binding (often i have no use of it), second there is an attribute for p:commandButton called rendered="true/false" you can set a listener for p:autocomplete , when you get an object (with an event="itemSelect " ) update the rendered value rendered=#{managedBean.buttonEnabler}

<p:commandButton  autoUpdate="true" id="test"  action="#{managedbean.action}" rendered="#{managedbean.buttonEnabler}"  value="Not found the company? Click Here...." />
<p:autoComplete    id="company" value="#{Company.search}"  completeMethod="#{Company.completeCompany}"
             var="c" itemLabel="#{c.name}" itemValue="#{c}"  converter="CompanyConverter"  >
            <p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="test"/> // in onItemSelectListner check for the object !=null
        </p:autoComplete>

I would use rendered=#{managedbean.search!=null} as rendered condition in p:commandButton

go through
primeface,this

[fabio moreira]

Arun Giridhar wrote:first i dont know why you have used binding (often i have no use of it), second there is an attribute for p:commandButton called rendered="true/false" you can set a listener for p:autocomplete , when you get an object (with an event="itemSelect " ) update the rendered value rendered=#{managedBean.buttonEnabler}

<p:commandButton  autoUpdate="true" id="test"  action="#{managedbean.action}" rendered="#{managedbean.buttonEnabler}"  value="Not found the company? Click Here...." />
<p:autoComplete    id="company" value="#{Company.search}"  completeMethod="#{Company.completeCompany}"
             var="c" itemLabel="#{c.name}" itemValue="#{c}"  converter="CompanyConverter"  >
            <p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="test"/> // in onItemSelectListner check for the object !=null
        </p:autoComplete>

I would use rendered=#{managedbean.search!=null} as rendered condition in p:commandButton

go through
primeface,this

Thanks, but unfortunately does not work. To be more exact , only works when i give a refresh (F5) on the page. In this case appears the button, because the boolean variable (buttonEnabler) is was set!!!
The component should be redrawn , but it seems the autocomplete does not leave!!!

[Axel Janssen]

Fabio,

take a look at this stackoverflow answer: http://stackoverflow.com/a/13779025

Try to put a <h:panelGroup autoUpdate="true"> arround the 3 elements you want to rerender after the ajax request - response circle initiated by the itemSelect of the p:autoComplete.

I tend to allways prefer ids referenced in render/update-attributes

<h:form id="company"> <h:panelGroup id="companyDisp"/> <p:outputLabel value="Company:" /> <p:messages"/> //I need to draw this component when any company is found, but does not work!!! <p:commandButton id="test" action="#" value="Not found the company? Click Here...." binding="#{Employ.createNewCompany}"/> </h:panelGroup> <p:autoComplete id="company" value="#{Company.search}" completeMethod="#{Company.completeCompany}" var="c" itemLabel="#{c.name}" itemValue="#{v}" converter="CompanyConverter"> <p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp @this"/> </p:autoComplete> </h:form>

I don't understand the binding of the commandButton.

[fabio moreira]

Axel Janssen wrote:Fabio,

take a look at this stackoverflow answer: http://stackoverflow.com/a/13779025

Try to put a <h:panelGroup autoUpdate="true"> arround the 3 elements you want to rerender after the ajax request - response circle initiated by the itemSelect of the p:autoComplete.

I tend to allways prefer ids referenced in render/update-attributes

<h:form id="company"> <h:panelGroup id="companyDisp"/> <p:outputLabel value="Company:" /> <p:messages"/> //I need to draw this component when any company is found, but does not work!!! <p:commandButton id="test" action="#" value="Not found the company? Click Here...." binding="#{Employ.createNewCompany}"/> </h:panelGroup> <p:autoComplete id="company" value="#{Company.search}" completeMethod="#{Company.completeCompany}" var="c" itemLabel="#{c.name}" itemValue="#{v}" converter="CompanyConverter"> <p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp @this"/> </p:autoComplete> </h:form>

I don't understand the binding of the commandButton.

Thanks Axel,
I have explained me wrong. The repainting of the component needs to be after the autocomplete event.Must perform repintagen after autocomplete event.
The binding was an attempt to manipulate a DOM HTLM Component.
But unfortunately still not solved this problem!!!I do not know what else to do!!!

[Mark Yevgeny]

try setting
like this

<p:commandButton id="test" value="Not found the company? Click Here...." rendered="#{Company.search!=null}"/>

next
make update like this

<p:autoComplete    id="company" value="#{Company.search}"  completeMethod="#{Company.completeCompany}"
             var="c" itemLabel="#{c.name}" itemValue="#{c}"  converter="CompanyConverter"  >
            <p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="test"/> 
        </p:autoComplete>

[Mark Yevgeny]

Axel Janssen wrote:

 <p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp @this"/>  

1. render of <f:ajax> (core) use white space as delimiter and (primeface) update of <p:ajax> use ", " (comma)

<p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp @this"/>  

to

<p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp,@this"/>  

2. your making update to current element and also updating the panelgroup which means your updating same component twice

<p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp,@this"/>  

to

<p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp"/>  

[fabio moreira]

Arun Giridhar wrote:

Axel Janssen wrote:

 <p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp @this"/>  

1. render of <f:ajax> (core) use white space as delimiter and (primeface) update of <p:ajax> use ", " (comma)

<p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp @this"/>  

to

<p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp,@this"/>  

2. your making update to current element and also updating the panelgroup which means your updating same component twice

<p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp,@this"/>  

to

<p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}" update="companyDisp"/>  

God morning Axel, Thanks you for your help!!!
Sorry now I realized that this code line is not required,
2. your making update to current element and also updating the panelgroup which means your updating same component twice

<p:ajax event="itemSelect" listener="#{Company.onItemSelectListner}"/>  

The ajax only serves to be able to capture a list value!
I need to repaint the screen after the User clicks the autocomplete.If nothing appears, I must warn you that it can create a company!

<h:form id="company">          
        <p:outputLabel autoUpdate="true" value="Company:" />          
           <p:messages autoUpdate="true"/>
                               //I need to draw this component when any company is found, but does not work!!!
               <p:commandButton  autoUpdate="true" id="test" action="#" value="Not found the company? Click Here and make the new Company"/>
            <p:autoComplete    id="company" value="#{Company.search}"  completeMethod="#{Company.completeCompany}"
             var="c" itemLabel="#{c.name}" itemValue="#{v}"  converter="CompanyConverter"  update="test">//Does not Work, the component commandButton is not update!!!            
        </p:autoComplete>
 </h:form> 

Thanks a lot for the help!I think this problem is not easy to solve , you may need to implement a javascript. I honestly do not like!! I prefer JAVA!!!

[Tim Holloway]

You can do this without (directly) using Javascript, by using AJAX.

Basically, it works like this.

1. The parent control fires AJAX listener events when you input to it. The AJAX element indicates not only the event type and listener method, but what parts of the View (dependent control's id) to (re)render on completion of the listener method call.

2. The AJAX listener method sets a backing bean boolean property ("showMe") to indicate whether the dependent control should be visible or not.

3. The dependent control has a 'rendered="#{mybean.showMe}" attribute that causes it to appear if and only if that property is true when the control is rendered or re-rendered.

That's all you need.

[fabio moreira]

Tim Holloway wrote:You can do this without (directly) using Javascript, by using AJAX.

Basically, it works like this.

1. The parent control fires AJAX listener events when you input to it. The AJAX element indicates not only the event type and listener method, but what parts of the View (dependent control's id) to (re)render on completion of the listener method call.

2. The AJAX listener method sets a backing bean boolean property ("showMe") to indicate whether the dependent control should be visible or not.

3. The dependent control has a 'rendered="#{mybean.showMe}" attribute that causes it to appear if and only if that property is true when the control is rendered or re-rendered.

That's all you need.

Thanks Tim Holloway for your class on ajax! But the problem relates to the autocomplete component, because i need to redesign <h:comandButton> after his execution.
I tried to put a variable within the component but still not worked.

<p:autoComplete    id="company" value="#{Company.search}"  completeMethod="#{Company.completeCompany}"
             var="c" itemLabel="#{c.name}" itemValue="#{c}"  converter="CompanyConverter"  >
        </p:autoComplete>
       <h:panelGroup id="companyDisp"/>
      <p:outputLabel value="Company:" />          
                               //After the autocomplete event, this component is not being affected! This component is not repainted!!!
      <p:commandButton id="test" action="#" value="Not found the company? Click Here!" rendered="#{Employ.booleanCreate}"/>
   </h:panelGroup> 
   

[Tim Holloway]

Since the autocomplete tag apparently does not have a re-render attribute itself, you should try adding an f:ajax tag under it to provide the render functionality.

The other alternative is to show/hide the commandButton using CSS attribute settings as an "oncomplete" method, which would look something like this:

oncomplete="showhide(#{myBean.showMe})"

...
function showHide(showme) {
   var visibility_style = 'hidden';
   if ( showme ) {
       visibility_style = 'visible';
   }
   var ctlCommanButton = ... // lookup button by ID in DOM
   ctlCommandButton.visible = visibility_style;
}

Modify the above code as needed. I couldn't remember the exact stylenames or function call to locate DOM objects, but that's the shape of the logic.

Alos, please note that backing bean names should not begin with uppercase letters in accordance with the Java convention that class names start with upper case, but instance names start with lower case. JSF doesn't care, but some development tools will get annoyed, and if you use annotations on your backing beans, the default naming will be wrong.

[fabio moreira]

Tim Holloway wrote:Since the autocomplete tag apparently does not have a re-render attribute itself, you should try adding an f:ajax tag under it to provide the render functionality.

The other alternative is to show/hide the commandButton using CSS attribute settings as an "oncomplete" method, which would look something like this:

oncomplete="showhide(#{myBean.showMe})"

...
function showHide(showme) {
   var visibility_style = 'hidden';
   if ( showme ) {
       visibility_style = 'visible';
   }
   var ctlCommanButton = ... // lookup button by ID in DOM
   ctlCommandButton.visible = visibility_style;
}

Modify the above code as needed. I couldn't remember the exact stylenames or function call to locate DOM objects, but that's the shape of the logic.

Alos, please note that backing bean names should not begin with uppercase letters in accordance with the Java convention that class names start with upper case, but instance names start with lower case. JSF doesn't care, but some development tools will get annoyed, and if you use annotations on your backing beans, the default naming will be wrong.

Thank you all, the solution is simpler than I imagined!!!
<p:outputPanel autoUpdate="true">