Javascrip. Autocompete with YAHOO library.

[paolatco]

Hello, i'm posting the english version for this post (https://forums.alfresco.com/es/viewtopic.php?f=11&t=3993)

Hello. I'm extending Alfresco Share… I already have a custom page for my Share, and it's based on data-list, create form and another that i found on internet. Their javascript code have references to Yahoo YUI library. I am trying to add autocomplete functionality but it's not working, can someone help me a little bit?. Thank you very much.
I send my javascript code that i have.

    /*
    *** Areas Tematicas
    *
    *
    *
    *
    */


    (function()
    {
       /**
        * YUI Library aliases
        */
       var Dom = YAHOO.util.Dom,
          Event = YAHOO.util.Event;

       /**
        * Alfresco Slingshot aliases
        */
       var $html = Alfresco.util.encodeHTML;

       /**
        * Alfresco.AreasTematicas constructor.
        * @return {Alfresco.AreasTematicas} the new component instance
        * @constructor
        */
       
       Alfresco.component.AreasTematicas = function (htmlId)
       {
       
          this.name = "Alfresco.component.AreasTematicas";
          this.id = htmlId;
         
          /* Register this component */
          Alfresco.util.ComponentManager.register(this);
         
          /* Load YUI Components */
          //Alfresco.util.YUILoaderHelper.require(["calendar", "button"], this.onComponentsLoaded, this);
         
         Alfresco.component.AreasTematicas.superclass.constructor.call(this, "Alfresco.component.AreasTematicas", htmlId);

         //Evento encontrar areas tematicas
          YAHOO.Bubbling.on("areasTematicas", this.jsAreasTematicas, this);
       
          return this;
       };   

     

       YAHOO.extend(Alfresco.component.AreasTematicas, Alfresco.component.Base,
       {
          /**
          * Object container for initialization options
          *
          * @property options
          * @type object
          */
          options:
          {
              /**
               * Current siteId.
               *
               * @property siteId
               * @type string
               */
              siteId: ""
          },
       
          onReady: function AutoReadme_onReady()
          {
             this.jsAreasTematicas
              // No action required here.
          },

        
        
        
          jsAreasTematicas: AreasTematicas_jsAreasTematicas function() {

             YAHOO.example.Data = {
                arrayStates: [
                "Alabama",
                "Alaska",
                "Arizona",
                "Arkansas"
                ]
             };

             this.oDS = new YAHOO.util.LocalDataSource
             (YAHOO.example.Data.arrayStates);
             this.oDS.responseSchema = {fields : ["state"]};

             this.oAC = new YAHOO.widget.AutoComplete(this.id + "myInput", this.id + "myContainer",    this.oDS);
             //this.oAC.prehighlightClassName = "yui-ac-prehighlight";
             this.oAC.useShadow = true;

             return {
                oDS: this.oDS,
                oAC: this.oAC
             };
          }

       
       });

       
    })();


         


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[erikwinlof]

Hi,

In your onReady() method you are only "referencing" the jsAreasTematicas method, you are NOT "executing" it.
Try: this.jsAreasTematicas(); instead (in other words add the parenthesis).

Also, by changing…
Alfresco.component.AreasTematicas.superclass.constructor.call(this, "Alfresco.component.AreasTematicas", htmlId);
…to…
Alfresco.component.AreasTematicas.superclass.constructor.call(this, "Alfresco.component.AreasTematicas", htmlId, ["autocomplete"]);
…you can get rid of all the code lines above that line in the constructor.
(Note that I have changed ["calendar", "button"] to only ["autocomplete"] since that is the YUI module you have to be loaded before using the yui auto complete widget).

If you're not using FireBug (For Firefox) or Inspector (for Safari) to debug your javascript I would strongly suggest that.

Good luck!

Cheers,

:: Erik

[pablog_]

Hi, I'm having an issue. I had extended JS Share through YAHOO.extension. When I open a popup edit metadata form from document library list, the metod onReady is fired, but, when I open edit metadata form through document detail page, method onReady never is fired:

<blockcode>
Alfresco.ChangeExpedienteMetadata = function(htmlId)
   {
      Alfresco.util.ComponentManager.register(this);
      Alfresco.ChangeExpedienteMetadata.superclass.constructor.call(this, "Alfresco.ChangeExpedienteMetadata", htmlId, [ "button", "container" ]);
      return this;
   };

   /**
    * Augment prototype with main class implementation, ensuring overwrite is
    * enabled
    */
   YAHOO.extend(Alfresco.ChangeExpedienteMetadata, Alfresco.component.Base,
         {
               /**
                * The node.
                */
            currentNodeRef : "",

            /**
             * Form submitted.
             */
            formSubmitted : false,

            /**
             * The ascpects to add to node.
             */
            aspectsToAdd : [],

            /**
             * The aspects to remove from  node.
             */
            aspectsToRemove : [],

            /**
             * The page action.
             */
            currentPage : "",

            /**
             * The user groups to assign.
             */
            groupsToAssign : [],

            /**
             * The rrhh user groups to assign.
             */
            rrhhGroupsToAssign : [],

            /**
              * Components load.
              */
            onComponentsLoaded : function ChangeExpedienteMetadata_onComponentsLoaded()
            {
               if(Dom.get(this.id + "-form-cancel-button"))
               {
                  if(Dom.get(this.id + "_prop_EULENEV_EXP_NOMBRE"))
                  {
                     YAHOO.util.Event.onContentReady(this.id, this.onReady, this, true);
                  }
               }
               else
               {
                  var scope = this;
                  setTimeout(function() {
                     scope.onComponentsLoaded();
                  }, 10);
               }
            },

            /**
             * Fired by YUI when parent element is available for scripting.
             * Component initialisation, including instantiation of YUI widgets and
             * event listener binding.
             *
             * @method onReady
             */
            onReady : function  ChangeExpedienteMetadata_onReady()
            {
               console.log("hell" + this.id);

               if(Dom.get(this.id + "-form-cancel-button"))
               {
                  // add listeners
                  YAHOO.util.Event.addListener(this.id + "_prop_EULENEV_EXP_ESTADO", "change", this.onEstadoChange, this);
                  YAHOO.util.Event.addListener(this.id + "_prop_enLitigio-entry", "click", this.onLitigioChange, this);
                  YAHOO.util.Event.addListener(this.id + "-form-submit-button", "click", this.onSubmitAction, this);

                  if(this.currentPage == "edit-metadata")
                  {
                     YAHOO.util.Event.addListener(window, "beforeunload", this.onBeforeUnloadAction, this);
                  }
                  else
                  {
                     this._waitUntilFormUnload();
                  }

                  // show / hide mandatory dates
                  this._checkMandatoryDates();

                  // enable/disable "EN LITIGIO" aspect fields
                  if(Dom.get(this.id + "_prop_enLitigio-entry") && Dom.get(this.id + "_prop_EULENEV_LITIGIO_FECHA_INI"))
                  {
                     Dom.get(this.id + "_prop_enLitigio-entry").checked = (Dom.get(this.id + "_prop_EULENEV_LITIGIO_FECHA_INI").value != "");
                     Dom.get(this.id + "_prop_enLitigio").value = Dom.get(this.id + "_prop_enLitigio-entry").checked;
                  }
                  this._enableDisableEnLitigioFields();
               }
               else
               {
                  var scope = this;
                  setTimeout(function() {
                     scope.onReady();
                  }, 10);
               }
            },
………..
</blockcode>

Regards!