Loading ...
Sorry, an error occurred while loading the content.

TreeView Dyanmic Loading Scope

Expand Messages
  • johnkeyes
    Hi, I am having some diffculty using TreeView dynamic loading. I want to refer to some member fields of my widget but from within the load method I cannot
    Message 1 of 7 , May 31, 2006
    • 0 Attachment
      Hi,

      I am having some diffculty using TreeView dynamic loading.  I want to refer to some member fields of my widget but from within the load method I cannot find a way to do this.  For example, say I have a text field that I would like to be updated after a click on a node.  My object has a _text field defined so how would I refer to this from inside the onload method.  Here's some pseudo code which may make this problem easier to understand.

      JK.widget.MyWidget = function(name) {
          var userConfig = ...;
          ...
          JK.widget.MyWidget.superclass.constructor.call(this, name, userConfig);
      };

      JK.widget.DirectoryDialog.prototype = new YAHOO.widget.Dialog();
      JK.widget.DirectoryDialog.prototype.constructor = JK.widget.MyWidget;
      JK.widget.DirectoryDialog.superclass = YAHOO.widget.Dialog.prototype;

      JK.widget.MyWidget.prototype._text = null;
      JK.widget.MyWidget.prototype._tree = null;

      JK.widget.MyWidget.prototype.init = function(el, userConfig)  {
          ...
          this._text = document.createElement("input");
          ...
          this._tree = new YAHOO.widget.TreeView("myTree");
          this._tree.setDynamicLoad(this.loadDataForNode, 1);
          ...
      }

      JK.widget.MyWidget.prototype.loadDataForNode(node, onCompleteCallback) {
          // set the value of the textfield
          this._text.value = node.data.label;
      }

      The problem I have is this._text is undefined inside loadDataForNode (as this refers to the parent of node in this context AFAIK).  I could give _text an id and use document.getElementById to refer to it, but I don't see the point in doing this if I already have a reference.  What's the best way to get a handle on it?

      I see the Event.addListener method allows you to pass the a scope object which is then added to the argument list of the handler.  Should something similar be added to setDyanmicLoad?

      Thanks for any assistance,
      -John K
    • johnkeyes
      Hi again, Sorry I was trying to make the example smaller and easier to read so the lines below that read: JK.widget.DirectoryDialog.prototype = new
      Message 2 of 7 , May 31, 2006
      • 0 Attachment
        Hi again,

        Sorry I was trying to make the example smaller and easier to read so the lines below that read:

        JK.widget.DirectoryDialog .prototype = new YAHOO.widget.Dialog();
        JK.widget.DirectoryDialog .prototype.constructor = JK.widget.MyWidget;
        JK.widget.DirectoryDialog .superclass = YAHOO.widget.Dialog.prototype;

        should read:

        JK.widget.MyWidget.prototype = new YAHOO.widget.Dialog();
        JK.widget.MyWidget.prototype.constructor = JK.widget.MyWidget;
        JK.widget.MyWidget.superclass = YAHOO.widget.Dialog.prototype;

        This doesn't change the essence of the problem I am having.

        -John K

        --- In ydn-javascript@yahoogroups.com, "johnkeyes" <johnkeyes@...> wrote:
        >
        > Hi,
        >
        > I am having some diffculty using TreeView dynamic loading. I want to
        > refer to some member fields of my widget but from within the load method
        > I cannot find a way to do this. For example, say I have a text field
        > that I would like to be updated after a click on a node. My object has
        > a _text field defined so how would I refer to this from inside the
        > onload method. Here's some pseudo code which may make this problem
        > easier to understand.
        >
        > JK.widget.MyWidget = function(name) {
        > var userConfig = ...;
        > ...
        > JK.widget.MyWidget.superclass.constructor.call(this, name,
        > userConfig);
        > };
        >
        > JK.widget.DirectoryDialog.prototype = new YAHOO.widget.Dialog();
        > JK.widget.DirectoryDialog.prototype.constructor = JK.widget.MyWidget;
        > JK.widget.DirectoryDialog.superclass = YAHOO.widget.Dialog.prototype;
        >
        > JK.widget.MyWidget.prototype._text = null;
        > JK.widget.MyWidget.prototype._tree = null;
        >
        > JK.widget.MyWidget.prototype.init = function(el, userConfig) {
        > ...
        > this._text = document.createElement("input");
        > ...
        > this._tree = new YAHOO.widget.TreeView("myTree");
        > this._tree.setDynamicLoad(this.loadDataForNode, 1);
        > ...
        > }
        >
        > JK.widget.MyWidget.prototype.loadDataForNode(node, onCompleteCallback) {
        > // set the value of the textfield
        > this._text.value = node.data.label;
        > }
        >
        > The problem I have is this._text is undefined inside loadDataForNode (as
        > this refers to the parent of node in this context AFAIK). I could give
        > _text an id and use document.getElementById to refer to it, but I don't
        > see the point in doing this if I already have a reference. What's the
        > best way to get a handle on it?
        >
        > I see the Event.addListener method allows you to pass the a scope object
        > which is then added to the argument list of the handler. Should
        > something similar be added to setDyanmicLoad?
        >
        > Thanks for any assistance,
        > -John K
        >
      • Ajith Joseph
        Hi John, I feel that you should declare the _text as a global variable. I had a similar problem like this and it was solved with global declaration. Regards,
        Message 3 of 7 , May 31, 2006
        • 0 Attachment
          Hi John,

          I feel that you should declare the _text as a global variable. I had a similar problem like this and it was solved with global declaration.

          Regards,
          Ajith Joseph

          johnkeyes <johnkeyes@...> wrote:
          Hi,

          I am having some diffculty using TreeView dynamic loading.  I want to refer to some member fields of my widget but from within the load method I cannot find a way to do this.  For example, say I have a text field that I would like to be updated after a click on a node.  My object has a _text field defined so how would I refer to this from inside the onload method.  Here's some pseudo code which may make this problem easier to understand.

          JK.widget.MyWidget = function(name) {
              var userConfig = ...;
              ...
              JK.widget.MyWidget.superclass.constructor.call(this, name, userConfig);
          };

          JK.widget.DirectoryDialog.prototype = new YAHOO.widget.Dialog();
          JK.widget.DirectoryDialog.prototype.constructor = JK.widget.MyWidget;
          JK.widget.DirectoryDialog.superclass = YAHOO.widget.Dialog.prototype;

          JK.widget.MyWidget.prototype._text = null;
          JK.widget.MyWidget.prototype._tree = null;

          JK.widget.MyWidget.prototype.init = function(el, userConfig)  {
              ...
              this._text = document.createElement("input");
              ...
              this._tree = new YAHOO.widget.TreeView("myTree");
              this._tree.setDynamicLoad(this.loadDataForNode, 1);
              ...
          }

          JK.widget.MyWidget.prototype.loadDataForNode(node, onCompleteCallback) {
              // set the value of the textfield
              this._text.value = node.data.label;
          }

          The problem I have is this._text is undefined inside loadDataForNode (as this refers to the parent of node in this context AFAIK).  I could give _text an id and use document.getElementById to refer to it, but I don't see the point in doing this if I already have a reference.  What's the best way to get a handle on it?

          I see the Event.addListener method allows you to pass the a scope object which is then added to the argument list of the handler.  Should something similar be added to setDyanmicLoad?

          Thanks for any assistance,
          -John K


          Yahoo! India Answers: Share what you know. Learn something new Click here
          Send free SMS to your Friends on Mobile from your Yahoo! Messenger Download now

        • Nige White
          ... Yes, the loadDataForNode is being called in the scope of the tree. You need to bind it to your widget when you tell the tree what function to use to get
          Message 4 of 7 , May 31, 2006
          • 0 Attachment
            johnkeyes wrote:

            > Hi,
            >
            > I am having some diffculty using TreeView dynamic loading. I want to
            > refer to some member fields of my widget but from within the load
            > method I cannot find a way to do this. For example, say I have a text
            > field that I would like to be updated after a click on a node. My
            > object has a _text field defined so how would I refer to this from
            > inside the onload method. Here's some pseudo code which may make this
            > problem easier to understand.
            >
            > JK.widget.MyWidget = function(name) {
            > var userConfig = ...;
            > ...
            > JK.widget.MyWidget.superclass.constructor.call(this, name,
            > userConfig);
            > };
            >
            > JK.widget.DirectoryDialog.prototype = new YAHOO.widget.Dialog();
            > JK.widget.DirectoryDialog.prototype.constructor = JK.widget.MyWidget;
            > JK.widget.DirectoryDialog.superclass = YAHOO.widget.Dialog.prototype;
            >
            > JK.widget.MyWidget.prototype._text = null;
            > JK.widget.MyWidget.prototype._tree = null;
            >
            > JK.widget.MyWidget.prototype.init = function(el, userConfig) {
            > ...
            > this._text = document.createElement("input");
            > ...
            > this._tree = new YAHOO.widget.TreeView("myTree");
            > this._tree.setDynamicLoad(this.loadDataForNode, 1);
            > ...
            > }
            >
            > JK.widget.MyWidget.prototype.loadDataForNode(node,
            > onCompleteCallback) {
            > < font face="courier new"> // set the value of the textfield
            > this._text.value = node.data.label;
            > }
            >
            Yes, the loadDataForNode is being called in the scope of the tree.

            You need to bind it to your widget when you tell the tree what function
            to use to get dynamic data:

            var me = this;
            this._tree.setDynamicLoad(function()
            {
            JK.widget.MyWidget.prototype.loadDataForNode.apply(me, arguments);
            }, 1);

            _____________________________________________________________________
            This message has been checked for all known viruses. Virus scanning
            powered by Messagelabs http://www.messagelabs.com For more information
            e-mail : hostmaster@...
          • johnkeyes
            ... function ... Thanks Nigel, that works just fine. I now have access to the element using this._text but when I manipulate it s value the change is not
            Message 5 of 7 , May 31, 2006
            • 0 Attachment
              --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@...> wrote:
              > Yes, the loadDataForNode is being called in the scope of the tree.
              >
              > You need to bind it to your widget when you tell the tree what function
              > to use to get dynamic data:
              >
              > var me = this;
              > this._tree.setDynamicLoad(function()
              > {
              > JK.widget.MyWidget.prototype.loadDataForNode.apply(me, arguments);
              > }, 1);

              Thanks Nigel, that works just fine.

              I now have access to the element using 'this._text' but when I manipulate it's value the change is not mirrored in the text field.

              this._text.value = node.data.id;

              However, if I use:

              document.getElementById('_text').value = node.data.id;

              it works.  Does this mean YUI clones the elements I have created and these clones are rendered rather than the actual one's I created?  I am adding the elements to the dialog using the appendToBody() method from my widgets init().  For example:

              var actions = document.createElement('div');
              actions.className = "actions";
              this._fileText = document.createElement("input");
              // this is not reflected in UI
              this._fileText.value = "j's text field";
              actions.appendChild(this._fileText);
              this.appendToBody(actions);
              The Module.render() method and the Module.appendToBody() method both seem to deal directly with the DOM though, so I don't see where the disjoint is occuring.

              -John K

            • Nige White
              ... Step through it with Venkman. This advice could apply to 90% of the queries here. _____________________________________________________________________
              Message 6 of 7 , May 31, 2006
              • 0 Attachment
                johnkeyes wrote:

                > --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@...> wrote:
                > > Yes, the loadDataForNode is being called in the scope of the tree.
                > >
                > > You need to bind it to your widget when you tell the tree what function
                > > to use to get dynamic data:
                > >
                > > var me = this;
                > > this._tree.setDynamicLoad(function()
                > > {
                > > JK.widget.MyWidget.prototype.loadDataForNode.apply(me, arguments);
                > > }, 1);
                >
                > Thanks Nigel, that works just fine.
                >
                > I now have access to the element using 'this._text' but when I
                > manipulate it's value the change is not mirrored in the text field.
                >
                > this._text.value = node.data.id;
                >
                >
                > However, if I use:
                >
                > document.getElementById('_text').value = node.data.id;
                >
                >
                > it works. Does this mean YUI clones the elements I have created and
                > these clones are rendered rather than the actual one's I created? I
                > am adding the elements to the dialog using the appendToBody() method
                > from my widgets init(). For example:
                >
                > var actions = document.createElement('div');
                > actions.className = "actions";
                > this._fileText = document.createElement("input");
                > // this is not reflected in UI
                > this._fileText.value = "j's text field";
                > actions.appendChild(this._fileText);
                > this.appendToBody(actions);
                >
                > The Module.render() method and the Module.appendToBody() method both
                > seem to deal directly with the DOM though, so I don't see where the
                > disjoint is occuring.

                Step through it with Venkman.

                This advice could apply to 90% of the queries here.

                _____________________________________________________________________
                This message has been checked for all known viruses. Virus scanning
                powered by Messagelabs http://www.messagelabs.com For more information
                e-mail : hostmaster@...
              • johnkeyes
                ... I have stepped through with Venkman but it hasn t shown me anything I didn t see from looking at the source code. I still don t see where/if element
                Message 7 of 7 , May 31, 2006
                • 0 Attachment
                  --- In ydn-javascript@yahoogroups.com, Nige White <nigelw@...> wrote:
                  > Step through it with Venkman.
                  >
                  > This advice could apply to 90% of the queries here.

                  I have stepped through with Venkman but it hasn't shown me anything I didn't see from looking at the source code.  I still don't see where/if element cloning or .innerHTML is being used for this case.  I'll keep looking ...

                  -John K
                Your message has been successfully submitted and would be delivered to recipients shortly.