Uploaded image for project: 'RichFaces'
  1. RichFaces
  2. RF-13306

Autocomplete: initialize value from DOM (was: ignored API call .setValue(''))

    Details

    • Type: Feature Request
    • Status: Closed (View Workflow)
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: 4.3.4
    • Fix Version/s: 4.3.5
    • Component/s: None
    • Labels:
      None

      Description

      All described here https://community.jboss.org/thread/233973
      I have this autocomplete component:

      <table>   
         <tr>   
            <td>   
               <rich:autocomplete mode="ajax" autocompleteMethod="#{autocomplete.autocompleteProviders}"   
                                  minChars="0" var="s" fetchValue="#{s.realName}" id="provider-suggestion"   
                                  autofill="false"   
                                  onselectitem="autocompleteChangeProvider(event.target)" style="display: inline;"   
                                  layout="table" value="#{autocomplete.providerName}" >   
                  <a4j:queue requestDelay="500" ignoreDupResponses="true" />   
                  <h:column>   
                     <h:outputText style="display:none;" value="#{s.id}"/>   
                     <h:outputText style="display:none;" value="#{s.realName}"/>   
                  </h:column>   
                  <h:column>   
                     <h:outputText value="#{s.name}" escape="false"/>   
                  </h:column>   
               </rich:autocomplete>   
            </td>   
            <td>   
               <h:graphicImage value="/img/arrow.png" onclick="#{rich:component('provider-suggestion')}.setValue('');#{rich:component('provider-suggestion')}.showPopup();stopEvent(event);"   
                               alt=""/>   
               <h:graphicImage value="/img/cancel.png"   
                               onclick="#{rich:component('provider-suggestion')}.hidePopup();#{rich:component('provider-suggestion')}.setValue('');autocompleteChangeProvider(null);"   
                               alt="#{messages['pages.clear']}" title="#{messages['pages.clear']}"/>   
               <h:inputHidden id="filter-provider-id" value="#{autocomplete.providerId}"/>   
            </td>   
         </tr>   
      </table>
      

      as you can see, i don't use showButton="true", because i need another functionality, i need erase input text before show popup window.
      I use JavaScript function "autocompleteChangeProvider" for extract selected id.
      I use separate button(/img/cancel.png) for erase input text, as you can see this function just use Richfaces API.

      And a problem:
      if autocomplete.providerName not null and not empty(in rich:autocomplete) and user clicks on show button(/img/arrow.png) than input text not erasing, but i called #

      {rich:component('provider-suggestion')}

      .setValue('') !!!

      I think i found a solution
      AutocompleteBase.js has this code:

      rf.ui.AutocompleteBase = function(componentId, selectId, fieldId, options) {  
              // call constructor of parent class  
              $super.constructor.call(this, componentId);  
              this.selectId = selectId;  
              this.fieldId = fieldId;  
              this.options = $.extend({}, defaultOptions, options);  
              this.namespace = this.namespace || "." + rf.Event.createNamespace(this.name, this.selectId);  
              this.currentValue = "";  
              this.tempValue = this.getValue();  
              this.isChanged = this.tempValue.length != 0;  
              bindEventHandlers.call(this);  
          };
      

      as you can see this.currentValue = "" so JS thinks that this.currentValue="" so currentValue equal new value("" - empty string), so nothing happens.
      i replace this code by this:

      rf.ui.AutocompleteBase = function(componentId, selectId, fieldId, options) {  
              // call constructor of parent class  
              $super.constructor.call(this, componentId);  
              this.selectId = selectId;  
              this.fieldId = fieldId;  
              this.options = $.extend({}, defaultOptions, options);  
              this.namespace = this.namespace || "." + rf.Event.createNamespace(this.name, this.selectId);  
              this.currentValue = $(rf.getDomElement(fieldId)).val();  
              this.tempValue = this.getValue();  
              this.isChanged = this.tempValue.length != 0;  
              bindEventHandlers.call(this);  
          };
      

      and it works!

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  alixey alexey plotnikov
                  Reporter:
                  alixey alexey plotnikov
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:

                    Time Tracking

                    Estimated:
                    Original Estimate - 30 minutes
                    30m
                    Remaining:
                    Remaining Estimate - 30 minutes
                    30m
                    Logged:
                    Time Spent - Not Specified
                    Not Specified