2 Replies Latest reply on Apr 27, 2012 11:28 AM by Andreas Panagiotidis

    after autocomplete - render other components

    Andreas Panagiotidis Novice

      My goal is to update the value of a field after the call of the autocomplete method of a rich:autocomplete component.

       

      <h:form id="myform">
      
            <h:outputText id="out1" value=" #{mybean.value}" />
      
            <rich:autocomplete
                  mode="ajax"
                  value="#{bean.criteria}" 
                  minChars="1" 
                  autocompleteMethod="#{action.method}"
                  fetchValue="#{result.name}" 
                  var="result" 
                  render="myform:out1,myform:out2"> 
      
                  <h:column>
                      <h:outputText value="#{result.value}" />
                   </h:column>
            </rich:autocomplete>
      
            <h:outputText id="out2" value=" #{mybean.value}" />
      
      </h:form>
      

       

      The behaviour of the above code:

       

      • The value of the first text field (out1), which lies in the code after the rich:autocomplete does not update properly.

      The getter of mybean.value for the out1 is called before the autocomplete method, so it displays the old value. (not the desired behaviour)

       

      • The value of the second text field (out2), which lies in the code after the rich:autocomplete gets properly updated (when typing in the autocomplete field) .

      The getter of mybean.value is rightly called after the autocompleteMethod.

       

      Why the getter of the first text field is called before the autocomplete method?

       

      I use RichFaces 4.2.1.Final

        • 1. Re: autocomplete render other components
          Andreas Panagiotidis Novice

          I found a workaround to my problem. Thus, the outputText field "out1" gets properly updated with each ajax call of the autocomplete method.

           

          <h:form id="myform">
                  <a4j:jsFunction name="updateOutput" render="out1" />
              <h:outputText id="out1" value="#{mybean.value}" />

              <rich:autocomplete
                    mode="ajax"
                    value="#{bean.criteria}"
                    minChars="1"
                    autocompleteMethod="#{action.method}"
                    fetchValue="#{result.name}"
                    var="result"

                                oncomplete="updateOutput();"

                    render="myform:out2">

                    <h:column>
                        <h:outputText value="#{result.value}" />
                    </h:column>
               </rich:autocomplete>

               <h:outputText id="out2" value="#{mybean.value}" />

          </h:form>


          • 2. Re: after autocomplete - render other components
            Andreas Panagiotidis Novice

            My first workaround doesn't solve the problem 100%: when the is no character left in the input field, the rich:autocomplete doesn't send any ajax request.

            Even if you set the minChars to 0, the value taken by the element is 1. It is a design decision. Maybe the RichFaces guys want to evaluate it.

             

            I ended up with a little more complex workaround that works for all cases:

             

            <h:form id="myform">
            
                <h:outputText id="out1" value="#{mybean.value}" />
            
                <a4j:jsFunction name="updateOutputFunction" render="out1,out2"  action="#{mybean.updateValue()}">
            
                       <a4j:param name="bufferParam" assignTo="#{mybean.bufferParam}" />
            
                </a4j:jsFunction>
            
            
                <rich:autocomplete id="myAutocompleteBox"
                        mode="ajax"
                        value="#{bean.criteria}"
                        minChars="1"
                        autocompleteMethod="#{action.method}"
                        fetchValue="#{result.name}"
                        var="result"
                        onkeyup="updateOutputFunction(document.getElementById('myform:myAutocompleteBoxInput').value);"
                        >
            
                        <h:column>
                            <h:outputText value="#{result.value}" />
                         </h:column>
                  </rich:autocomplete>
            
                  <h:outputText id="out2" value=" #{mybean.value}" />
            
            </h:form>
            

             

            Mybean.java

            ...

             

              private String bufferParam;
            
              public String getBufferParam(){
                 return bufferParam;
              }
            
              public String setBufferParam(String bufferParam){
                 this.bufferParam = bufferParam;
              }
            
              public void updateValue(){
                  value = bufferParam;
               }