search

pcirella / dynatree

Automatically exported from code.google.com/p/dynatree
0 stars 0 forks source link

lazy loading's problem #206

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?
1. I can not use lazy loading
2. Lazy loading is not working

Browser that I use is Chrome.
Product that I am using is jquery.dynatree.js 1.1.1

Here is my coding:

<!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>Dynatree - Example</title>

  <script src="../jquery/jquery.js" type="text/javascript"></script>
  <script src="../jquery/jquery-ui.custom.js" type="text/javascript"></script>
  <script src="../jquery/jquery.cookie.js" type="text/javascript"></script>

  <link href="../src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
  <script src="../src/jquery.dynatree.js" type="text/javascript"></script>

<script type="text/javascript">
  var treeData = [
    {title: "item1 with key and tooltip", tooltip: "Look, a tool tip!" },
    {title: "item2: selected on init", select: true },
    {title: "Folder", isFolder: true, key: "id3", isLazy: true,
      children: [
        {title: "Sub-item 3.1",
          children: [
            {title: "Sub-item 3.1.1", key: "id3.1.1" },
            {title: "Sub-item 3.1.2", key: "id3.1.2" }
          ]
        },
        {title: "Sub-item 3.2",
          children: [
            {title: "Sub-item 3.2.1", key: "id3.2.1" },
            {title: "Sub-item 3.2.2", key: "id3.2.2" }
          ]
        }
      ]
    },
    {title: "Document with some children (expanded on init)", key: "id4", expand: true,
      children: [
        {title: "Sub-item 4.1 (active on init)", activate: true,
          children: [
            {title: "Sub-item 4.1.1", key: "id4.1.1" },
            {title: "Sub-item 4.1.2", key: "id4.1.2" }
          ]
        },
        {title: "Sub-item 4.2 (selected on init)", select: true,
          children: [
            {title: "Sub-item 4.2.1", key: "id4.2.1" },
            {title: "Sub-item 4.2.2", key: "id4.2.2" }
          ]
        },
        {title: "Sub-item 4.3 (hideCheckbox)", hideCheckbox: true },
        {title: "Sub-item 4.4 (unselectable)", unselectable: true }
      ]
    }
  ];
  $(function(){

    $("#tree3").dynatree({
      checkbox: true,
      selectMode: 3,
      children: treeData,
      onSelect: function(select, node) {
        // Get a list of all selected nodes, and convert to a key array:
        var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
          return node.data.key;
        });
        $("#echoSelection3").text(selKeys.join(", "));

        // Get a list of all selected TOP nodes
        var selRootNodes = node.tree.getSelectedNodes(true);
        // ... and convert to a key array:
        var selRootKeys = $.map(selRootNodes, function(node){
          return node.data.key;
        });
        $("#echoSelectionRootKeys3").text(selRootKeys.join(", "));
        $("#echoSelectionRoots3").text(selRootNodes.join(", "));
      },
      onDblClick: function(node, event) {
        node.toggleSelect();
      },
      onKeydown: function(node, event) {
        if( event.which == 32 ) {
          node.toggleSelect();
          return false;
        }
      },

      cookieId: "dynatree-Cb3",
      idPrefix: "dynatree-Cb3-"
    });
  });
</script>
</head>

<body class="example">
  <h1>Example: Selection and checkbox</h1>
  <!-- Tree #3 -->

  <p class="description">
    This tree has <b>checkoxes and selectMode 3 (hierarchical multi-selection)</b> enabled.<br>
    A double-click handler selects the node.<br>
    A keydown handler selects on [space].
  </p>
  <div id="tree3"></div>
  <div>Selected keys: <span id="echoSelection3">-</span></div>
  <div>Selected root keys: <span id="echoSelectionRootKeys3">-</span></div>
  <div>Selected root nodes: <span id="echoSelectionRoots3">-</span></div>

</body>
</html>

Original issue reported on code.google.com by spd.so...@gmail.com on 9 Jun 2011 at 4:59

GoogleCodeExporter commented 9 years ago 
I tried this with Chrome 11 and it worked.
Btw. your sample does not configure lazy loading (i.e. uses the  initAjax 
option).
So what exactly is your problem?

Original comment by moo...@wwwendt.de on 9 Jun 2011 at 6:57

GoogleCodeExporter commented 9 years ago 
I have look in your example(Lazy loading) for my code.
All I need is,
When I have many data to load, It look like stuck but it works slow because of 
many data. So I want to see loading style when it works with many data.
Can you help me?

Original comment by spd.so...@gmail.com on 9 Jun 2011 at 7:32

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Here is my problem in attachment file.
May u help me?

Original comment by spd.so...@gmail.com on 9 Jun 2011 at 8:48

Attachments:

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 5 Jul 2011 at 7:44

GoogleCodeExporter commented 9 years ago 
You can do this:

    onQueryExpand:function(flag, node){
        if(flag){
            node.setLazyNodeStatus(DTNodeStatus_Loading);
        }
    },
    onExpand:function(flag, node){
        node.setLazyNodeStatus(DTNodeStatus_Ok);
    },

but this might not really help, since thr browser might not care to display the 
new style while it is busy creating new DOM elements...

Original comment by moo...@wwwendt.de on 5 Jul 2011 at 5:04

GoogleCodeExporter commented 9 years ago 
Thank for your solution but it still doesn't work :( . 
I don't know to do it right now because if I use alert, it works correctly. 
Btw, it doesn't work correctly if I try to use another function. For example, 
when node is loading children, I want to see loading style. And after node 
loading completed, I want to disable loading style.

Original comment by spd.so...@gmail.com on 7 Jul 2011 at 2:52

GoogleCodeExporter commented 9 years ago

Original comment by moo...@wwwendt.de on 16 Aug 2011 at 6:05