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

Dynamic Tree

Expand Messages
  • info2hussain
    Hi All, I want to create a dynamic tree with XHR data. I followed the YUI s example about that but I see nothing in the browser. I don t even get any error
    Message 1 of 6 , Jul 31, 2008
    View Source
    • 0 Attachment
      Hi All,

      I want to create a dynamic tree with XHR data. I followed the YUI's example about that but I see nothing in the browser. I don't even get any error message. My codes are:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <title>Untitled Document</title>
              <!-- css -->
              <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/treeview/assets/skins/sam/treeview.css">
             
              <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo/yahoo-min.js"></script>
              <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script>
              <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
              <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/json/json-min.js"></script>
              <script src = "http://yui.yahooapis.com/2.5.2/build/treeview/treeview-min.js" ></script>
              <script type="text/javascript">
                 
                  function buildTree(){
                     
                      //create a new tree:
                      tree = new YAHOO.widget.TreeView("tree");
                     
                      //turn dynamic loading on for entire tree:
                      tree.setDynamicLoad(loadNodeData, currentIconMode);
                     
                      //get root node for tree:
                      var root = tree.getRoot();
                     
                      //add child nodes for tree;
                      var aStates = ["Process", "Activity", "Process Instance", "Activity Instance"];
                      for (var i = 0, j = aStates.length; i < j; i++) {
                          var tempNode = new YAHOO.widget.TextNode(aStates[i], root, false);
                      }
                     
                     
                      tree.draw();
                     
                  }   
                      function loadNodeData(node, fnLoadComplete){
                     
                     
                          var callbacks = {
                              // Successful XHR response handler
                              success: function(o){
                                  var messages = [];
                                 
                                  // Use the JSON Utility to parse the data returned from the server
                                  try {
                                      messages = YAHOO.lang.JSON.parse(o.responseText);
                                  }
                                  catch (x) {
                                      alert("JSON Parse failed!");
                                      return;
                                  }
                                 
                                  var len = messages.length;
                                  for (var i = 0; i < len; ++i) {
                                 
                                      var m = messages[i];
                                      var tempNode = new YAHOO.widget.TextNode(m.result[0].value, node, false);
                                     
                                  }
                                  o.argument.fnLoadComplete();
                              },
                             
                              // Failed XHR response handler
                              failure: function(o) {
                             
                                  document.writeln("XHR Transaction failed!");
                              },
                         
                             
                              argument: {
                                  "node": node,
                                  "fnLoadComplete": fnLoadComplete
                              },
                         
                         
                              timeout: 7000
                             
                             
                          };
                         
                         
                          url = "/api-rest/query?f=json&o=execution-history&q=" + escape("(setofall ?x (instance-of ?x #_COBRA:ActivityInstance))");
                         
                          // Make the call to the server for JSON data
                          YAHOO.util.Connect.asyncRequest('GET', url, callbacks);
                         
                      }
                 
              </script>
          </head>
          <body class="yui-skin-sam" onload="buildTree()">
              <div id="tree"></div>
             
          </body>
      </html>


      I marked something red in my code as I think many of you might think there is something wrong with that specific part. But, I can assure you that this red marked part is completely ok and I tested it. When I tried the XHR part of my code separately, it worked fine and I can access the data and show them in the browser properly but problem comes when I try to use the same code in with the treeview thing.


      Any one has any idea or any suggestion?

      Thanks,
      H
    Your message has been successfully submitted and would be delivered to recipients shortly.