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

15088Re: Dynamic Load Treeview Issues

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