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

Dynamic Load Treeview Issues

Expand Messages
  • bkersans
    I m new to the yui library. I am trying to create a dynamic tree view that makes async requests whenever a child node is expanded to populate the sub nodes of
    Message 1 of 3 , Jun 14, 2007
    • 0 Attachment
      I'm new to the yui library.
      I am trying to create a dynamic tree view that makes async requests
      whenever a child node is expanded to populate the sub nodes of that
      child.

      The goal is to not load more data than necessary in the case that the
      user is simply interacting with content and not the tree.

      Here's my code:

      --------------------------------------------------------

      var tree;

      var moid =
      document.getElementById("detailForm:tree:moid").getAttribute("value");

      var context =
      document.getElementById("detailForm:tree:context").getAttribute("value");

      var myobj = { label: context, id: moid};


      function treeInit() {

      //treeDiv refers to the id of the html component we want to draw the
      tree in

      tree = new YAHOO.widget.TreeView("detailForm:tree:treeDiv");
      var root = tree.getRoot();
      var baseNode = new YAHOO.widget.TextNode(myobj, root, false);

      if(context == "Application"){

      myobj = {label: "Server", id: "Server"};
      var serverNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

      serverNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "Volumes", id: "ServerVolume"};

      var volumesNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

      volumesNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "ASGs", id: "ASG"};

      var ASGsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

      ASGsNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "Storage", id: "StorageArray"};

      var storageNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

      storageNode.setDynamicLoad(loadDataForNode);

      } else if(context == "Server") {

      myobj = {label: "Applications", id: "Application"};

      var applicationsNode = new YAHOO.widget.TextNode(myobj, baseNode,
      false);

      applicationsNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "Volumes", id: "ServerVolume"};

      var volumesNode = new YAHOO.widget.TextNode(myobj, baseNode,
      false);

      volumesNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "Storage", id: "StorageArray"};

      var storageNode = new YAHOO.widget.TextNode(myobj, baseNode,
      false);

      storageNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "Server LUNs", id: "ServerLUN"};

      var serverLUNsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

      serverLUNsNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "FC Ports", id: "ServerFCPort"};

      var FCPortsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

      FCPortsNode.setDynamicLoad(loadDataForNode);



      } else if(context == "StorageArray") {



      myobj = {label: "ASGs", id: "ASG"};

      var ASGsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

      ASGsNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "Storage Array LUNs", id: "StorageArrayLUN"};

      var storageArrayLUNsNode = new YAHOO.widget.TextNode(myobj,
      baseNode, false);

      storageArrayLUNsNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "Disks", id: "StorageArrayDisk"};

      var disksNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

      disksNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "Disk Groups", id: "StorageArrayDiskGroup"};

      var diskGroupsNode = new YAHOO.widget.TextNode(myobj, baseNode,
      false);

      diskGroupsNode.setDynamicLoad(loadDataForNode);

      myobj = {label: "FC Ports", id: "StorageArrayFCPort"};

      var FCPortsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

      FCPortsNode.setDynamicLoad(loadDataForNode);



      }



      tree.draw();

      }

      function loadDataForNode(node, onCompleteCallback) {



      var nodeType = node.data.id;

      var queryString = "/bp/servlet/contextTreeXMLFeeder?" + "moid=" +
      moid + "&context=" + context + "&nodeType

      =" + nodeType;

      var callback = {

      success: function (o) {

      alert("Inside success function!");

      alert("Server Response: " + o.responseXML.text);

      var DOM = o.responseXML;

      var displayNames = DOM.getElementsByTagName("displayname");

      var moids = DOM.getElementsByTagName("moid");



      alert(nodeType + "s = " + displayNames.text);

      alert("Number of Children = " + displayNames.length);

      for(var i = 0; i < displayNames.length; i++) {

      alert("Inside for loop!");

      alert("Display name " + i + ": " + displayNames[i].text);

      alert("Id " + i + ": " + moids[i].text);

      myobj = { label: displayNames[i].text, id:
      moids[i].text };

      var newNode = new YAHOO.widget.TextNode(myobj, node, false);

      alert("Node should be created here");

      }

      tree.refresh();

      },

      failure: function (o) {

      alert("The request failed");

      },

      timeout: 10000,

      };

      YAHOO.util.Connect.asyncRequest('Get', queryString, callback, null);

      onCompleteCallback();

      }

      YAHOO.util.Event.addListener(window, "load", treeInit);

      -----------------------------------

      The alerts inside my callback success function all execute properly,
      so I know that my xml parsing is correct. I also know the response
      from my server is correct.

      The problem is that the tree never draws the nodes.

      Can anyone offer some input here?

      I think it may have something to do with the callback objects scope,
      but am not sure.

      Thanks,
      Brent
    • Eric Miraglia
      bkersans, It s hard to debug code like this out of context where XMLHttpRequest is involved because so much relies on getting things right on the server. What
      Message 2 of 3 , Jun 18, 2007
      • 0 Attachment
        bkersans,

        It's hard to debug code like this out of context where XMLHttpRequest is involved because so much relies on getting things right on the server.

        What I can offer, though, is a complete and functional pattern example for using XHR/Connection Manager with TreeView:

        http://yuiblog.com/sandbox/yui/v222/examples/treeview/dynamic.html

        View the source of this example; the JavaScript is heavily commented.

        This example will be part of the distribution for YUI as of our next release.

        Regards,
        Eric

        ______________________________________________
        Eric Miraglia
        Yahoo! User Interface Library



        On Jun 14, 2007, at 7:45 AM, bkersans wrote:

        I'm new to the yui library.
        I am trying to create a dynamic tree view that makes async requests
        whenever a child node is expanded to populate the sub nodes of that
        child.

        The goal is to not load more data than necessary in the case that the
        user is simply interacting with content and not the tree.

        Here's my code:

        --------------------------------------------------------

        var tree;

        var moid =
        document.getElementById("detailForm:tree:moid").getAttribute("value");

        var context =
        document.getElementById("detailForm:tree:context").getAttribute("value");

        var myobj = { label: context, id: moid};

        function treeInit() {

        //treeDiv refers to the id of the html component we want to draw the
        tree in

        tree = new YAHOO.widget.TreeView("detailForm:tree:treeDiv");
        var root = tree.getRoot();
        var baseNode = new YAHOO.widget.TextNode(myobj, root, false);

        if(context == "Application"){

        myobj = {label: "Server", id: "Server"};
        var serverNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

        serverNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "Volumes", id: "ServerVolume"};

        var volumesNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

        volumesNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "ASGs", id: "ASG"};

        var ASGsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

        ASGsNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "Storage", id: "StorageArray"};

        var storageNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

        storageNode.setDynamicLoad(loadDataForNode);

        } else if(context == "Server") {

        myobj = {label: "Applications", id: "Application"};

        var applicationsNode = new YAHOO.widget.TextNode(myobj, baseNode,
        false);

        applicationsNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "Volumes", id: "ServerVolume"};

        var volumesNode = new YAHOO.widget.TextNode(myobj, baseNode,
        false);

        volumesNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "Storage", id: "StorageArray"};

        var storageNode = new YAHOO.widget.TextNode(myobj, baseNode,
        false);

        storageNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "Server LUNs", id: "ServerLUN"};

        var serverLUNsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

        serverLUNsNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "FC Ports", id: "ServerFCPort"};

        var FCPortsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

        FCPortsNode.setDynamicLoad(loadDataForNode);



        } else if(context == "StorageArray") {



        myobj = {label: "ASGs", id: "ASG"};

        var ASGsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

        ASGsNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "Storage Array LUNs", id: "StorageArrayLUN"};

        var storageArrayLUNsNode = new YAHOO.widget.TextNode(myobj,
        baseNode, false);

        storageArrayLUNsNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "Disks", id: "StorageArrayDisk"};

        var disksNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

        disksNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "Disk Groups", id: "StorageArrayDiskGroup"};

        var diskGroupsNode = new YAHOO.widget.TextNode(myobj, baseNode,
        false);

        diskGroupsNode.setDynamicLoad(loadDataForNode);

        myobj = {label: "FC Ports", id: "StorageArrayFCPort"};

        var FCPortsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);

        FCPortsNode.setDynamicLoad(loadDataForNode);



        }



        tree.draw();

        }

        function loadDataForNode(node, onCompleteCallback) {



        var nodeType = node.data.id;

        var queryString = "/bp/servlet/contextTreeXMLFeeder?" + "moid=" +
        moid + "&context=" + context + "&nodeType

        =" + nodeType;

        var callback = {

        success: function (o) {

        alert("Inside success function!");

        alert("Server Response: " + o.responseXML.text);

        var DOM = o.responseXML;

        var displayNames = DOM.getElementsByTagName("displayname");

        var moids = DOM.getElementsByTagName("moid");



        alert(nodeType + "s = " + displayNames.text);

        alert("Number of Children = " + displayNames.length);

        for(var i = 0; i < displayNames.length; i++) {

        alert("Inside for loop!");

        alert("Display name " + i + ": " + displayNames[i].text);

        alert("Id " + i + ": " + moids[i].text);

        myobj = { label: displayNames[i].text, id:
        moids[i].text };

        var newNode = new YAHOO.widget.TextNode(myobj, node, false);

        alert("Node should be created here");

        }

        tree.refresh();

        },

        failure: function (o) {

        alert("The request failed");

        },

        timeout: 10000,

        };

        YAHOO.util.Connect.asyncRequest('Get', queryString, callback, null);

        onCompleteCallback();

        }

        YAHOO.util.Event.addListener(window, "load", treeInit);

        -----------------------------------

        The alerts inside my callback success function all execute properly,
        so I know that my xml parsing is correct. I also know the response
        from my server is correct.

        The problem is that the tree never draws the nodes.

        Can anyone offer some input here?

        I think it may have something to do with the callback objects scope,
        but am not sure.

        Thanks,
        Brent


      • slcwk
        Eric I have the same problem. Tried your link provided below, looks like expanding never returns, dynamic loading does not work. -Wayne
        Message 3 of 3 , Jul 1, 2007
        • 0 Attachment
          Eric
          I have the same problem. Tried your link provided below, looks like
          expanding never returns, dynamic loading does not work.
          -Wayne
          --- In ydn-javascript@yahoogroups.com, Eric Miraglia <miraglia@...> wrote:
          >
          > bkersans,
          >
          > It's hard to debug code like this out of context where XMLHttpRequest
          > is involved because so much relies on getting things right on the
          > server.
          >
          > What I can offer, though, is a complete and functional pattern
          > example for using XHR/Connection Manager with TreeView:
          >
          > http://yuiblog.com/sandbox/yui/v222/examples/treeview/dynamic.html
          >
          > View the source of this example; the JavaScript is heavily commented.
          >
          > This example will be part of the distribution for YUI as of our next
          > release.
          >
          > Regards,
          > Eric
          >
          > ______________________________________________
          > Eric Miraglia
          > Yahoo! User Interface Library
          >
          >
          >
          > On Jun 14, 2007, at 7:45 AM, bkersans wrote:
          >
          > > I'm new to the yui library.
          > > I am trying to create a dynamic tree view that makes async requests
          > > whenever a child node is expanded to populate the sub nodes of that
          > > child.
          > >
          > > The goal is to not load more data than necessary in the case that the
          > > user is simply interacting with content and not the tree.
          > >
          > > Here's my code:
          > >
          > > --------------------------------------------------------
          > >
          > > var tree;
          > >
          > > var moid =
          > > document.getElementById("detailForm:tree:moid").getAttribute("value");
          > >
          > > var context =
          > > document.getElementById("detailForm:tree:context").getAttribute
          > > ("value");
          > >
          > > var myobj = { label: context, id: moid};
          > >
          > > function treeInit() {
          > >
          > > //treeDiv refers to the id of the html component we want to draw the
          > > tree in
          > >
          > > tree = new YAHOO.widget.TreeView("detailForm:tree:treeDiv");
          > > var root = tree.getRoot();
          > > var baseNode = new YAHOO.widget.TextNode(myobj, root, false);
          > >
          > > if(context == "Application"){
          > >
          > > myobj = {label: "Server", id: "Server"};
          > > var serverNode = new YAHOO.widget.TextNode(myobj, baseNode, false);
          > >
          > > serverNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "Volumes", id: "ServerVolume"};
          > >
          > > var volumesNode = new YAHOO.widget.TextNode(myobj, baseNode, false);
          > >
          > > volumesNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "ASGs", id: "ASG"};
          > >
          > > var ASGsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);
          > >
          > > ASGsNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "Storage", id: "StorageArray"};
          > >
          > > var storageNode = new YAHOO.widget.TextNode(myobj, baseNode, false);
          > >
          > > storageNode.setDynamicLoad(loadDataForNode);
          > >
          > > } else if(context == "Server") {
          > >
          > > myobj = {label: "Applications", id: "Application"};
          > >
          > > var applicationsNode = new YAHOO.widget.TextNode(myobj, baseNode,
          > > false);
          > >
          > > applicationsNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "Volumes", id: "ServerVolume"};
          > >
          > > var volumesNode = new YAHOO.widget.TextNode(myobj, baseNode,
          > > false);
          > >
          > > volumesNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "Storage", id: "StorageArray"};
          > >
          > > var storageNode = new YAHOO.widget.TextNode(myobj, baseNode,
          > > false);
          > >
          > > storageNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "Server LUNs", id: "ServerLUN"};
          > >
          > > var serverLUNsNode = new YAHOO.widget.TextNode(myobj, baseNode,
          > > false);
          > >
          > > serverLUNsNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "FC Ports", id: "ServerFCPort"};
          > >
          > > var FCPortsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);
          > >
          > > FCPortsNode.setDynamicLoad(loadDataForNode);
          > >
          > >
          > >
          > > } else if(context == "StorageArray") {
          > >
          > >
          > >
          > > myobj = {label: "ASGs", id: "ASG"};
          > >
          > > var ASGsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);
          > >
          > > ASGsNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "Storage Array LUNs", id: "StorageArrayLUN"};
          > >
          > > var storageArrayLUNsNode = new YAHOO.widget.TextNode(myobj,
          > > baseNode, false);
          > >
          > > storageArrayLUNsNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "Disks", id: "StorageArrayDisk"};
          > >
          > > var disksNode = new YAHOO.widget.TextNode(myobj, baseNode, false);
          > >
          > > disksNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "Disk Groups", id: "StorageArrayDiskGroup"};
          > >
          > > var diskGroupsNode = new YAHOO.widget.TextNode(myobj, baseNode,
          > > false);
          > >
          > > diskGroupsNode.setDynamicLoad(loadDataForNode);
          > >
          > > myobj = {label: "FC Ports", id: "StorageArrayFCPort"};
          > >
          > > var FCPortsNode = new YAHOO.widget.TextNode(myobj, baseNode, false);
          > >
          > > FCPortsNode.setDynamicLoad(loadDataForNode);
          > >
          > >
          > >
          > > }
          > >
          > >
          > >
          > > tree.draw();
          > >
          > > }
          > >
          > > function loadDataForNode(node, onCompleteCallback) {
          > >
          > >
          > >
          > > var nodeType = node.data.id;
          > >
          > > var queryString = "/bp/servlet/contextTreeXMLFeeder?" + "moid=" +
          > > moid + "&context=" + context + "&nodeType
          > >
          > > =" + nodeType;
          > >
          > > var callback = {
          > >
          > > success: function (o) {
          > >
          > > alert("Inside success function!");
          > >
          > > alert("Server Response: " + o.responseXML.text);
          > >
          > > var DOM = o.responseXML;
          > >
          > > var displayNames = DOM.getElementsByTagName("displayname");
          > >
          > > var moids = DOM.getElementsByTagName("moid");
          > >
          > >
          > >
          > > alert(nodeType + "s = " + displayNames.text);
          > >
          > > alert("Number of Children = " + displayNames.length);
          > >
          > > for(var i = 0; i < displayNames.length; i++) {
          > >
          > > alert("Inside for loop!");
          > >
          > > alert("Display name " + i + ": " + displayNames[i].text);
          > >
          > > alert("Id " + i + ": " + moids[i].text);
          > >
          > > myobj = { label: displayNames[i].text, id:
          > > moids[i].text };
          > >
          > > var newNode = new YAHOO.widget.TextNode(myobj, node, false);
          > >
          > > alert("Node should be created here");
          > >
          > > }
          > >
          > > tree.refresh();
          > >
          > > },
          > >
          > > failure: function (o) {
          > >
          > > alert("The request failed");
          > >
          > > },
          > >
          > > timeout: 10000,
          > >
          > > };
          > >
          > > YAHOO.util.Connect.asyncRequest('Get', queryString, callback, null);
          > >
          > > onCompleteCallback();
          > >
          > > }
          > >
          > > YAHOO.util.Event.addListener(window, "load", treeInit);
          > >
          > > -----------------------------------
          > >
          > > The alerts inside my callback success function all execute properly,
          > > so I know that my xml parsing is correct. I also know the response
          > > from my server is correct.
          > >
          > > The problem is that the tree never draws the nodes.
          > >
          > > Can anyone offer some input here?
          > >
          > > I think it may have something to do with the callback objects scope,
          > > but am not sure.
          > >
          > > Thanks,
          > > Brent
          > >
          > >
          > >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.