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

14478Dynamic Load Treeview Issues

Expand Messages
  • bkersans
    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
    • Show all 3 messages in this topic