My favorites | Sign in
Project Home Downloads
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 206: lazy loading's problem
1 person starred this issue and may be notified of changes. Back to list
Status:  Duplicate
Merged:  issue 208
Owner:  ----
Closed:  Aug 2011


 
Reported by spd.so...@gmail.com, Jun 8, 2011
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>
Jun 8, 2011
Project Member #1 moo...@wwwendt.de
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?
Status: Waiting
Jun 9, 2011
#2 spd.so...@gmail.com
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?

Jun 9, 2011
#4 spd.so...@gmail.com
Here is my problem in attachment file.
May u help me?
Test DynaTree.zip
213 KB   Download
Jul 5, 2011
Project Member #5 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Accepted
Labels: Milestone-Release1.2
Jul 5, 2011
Project Member #6 moo...@wwwendt.de
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...
Status: Waiting
Jul 6, 2011
#7 spd.so...@gmail.com
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.
Aug 15, 2011
Project Member #8 moo...@wwwendt.de
(No comment was entered for this change.)
Status: Duplicate
Mergedinto: 208

Powered by Google Project Hosting