{% extends "base" %}

{% block title %}Load nodes on demand from the server in javascript tree{% endblock %}
{% block h1 %}Example 5 - Load nodes on demand from the server{% endblock %}

{% block previous_url %}save_state.html{% endblock %}
{% block previous_title %}Example 4{% endblock %}

{% block next_url %}autoescape.html{% endblock %}"
{% block next_title %}Example 6{% endblock %}

{% block contents %}
    <div id="tree1" data-url="/nodes/"></div>

    <p>
        In this example, the data is loaded on demand from the server.
        <br>
        To use load on demand, you must do the following:
    </p>

    <ul>
        <li>
            You must specify a <strong>data url</strong>. In this example this is done using the <strong>data-url</strong> 
            html data attribute.
        </li>
        <li>
            Folders that must be loaded on demand must have the <strong>load_on_demand</strong> property. You can specify this in the data.
        </li>
        <li>
            In this example, the url <strong>/nodes/</strong> returns the first level of data (Saurischia and Ornithischians).
        </li>
        <li>
            The url for the load on demand data is <strong>&lt;data-url&gt;?node=&lt;node-id&gt;</strong>. So, for node 23  this would be
            <strong>/nodes/?node=23</strong>.
        </li>
    </ul>

    <h3>first level of data</h3>
<pre><code class="language-javascript">[
    {
        "label": "Saurischia",
        "id": 1,
        "load_on_demand": true
    },
    {
        "label": "Ornithischians",
        "id": 23,
        "load_on_demand": true
    }
]
</code></pre>

    <h3>html</h3>

<pre><code class="language-markup">&lt;div id="tree1" data-url="/nodes/"&gt;&lt;/div&gt;</code></pre>

    <h3>javascript</h3>

<pre><code class="language-javascript">$('#tree1').tree({
    dragAndDrop: true
});
</code></pre>
{% endblock %}

{% block script %}
    <script>
        $.mockjax({
            url: '*',
            responseTime: 1000,
            response: function(options) {
                if (options.data && options.data.node) {
                    this.responseText = ExampleData.getChildrenOfNode(options.data.node);
                }
                else {
                    this.responseText = ExampleData.getFirstLevelData();
                }
            }
        });

        $(function() {
            var $tree = $('#tree1');

            $tree.tree({
                dragAndDrop: true
            });
        });
    </script>
{% endblock %}
