{% extends "base" %}

{% block title %}Load json data from the server in javascript tree{% endblock %}
{% block h1 %}Example 2 - load json data from the server{% endblock %}

{% block previous_url %}load_json_data.html{% endblock %}
{% block previous_title %}Example 1{% endblock %}

{% block next_url %}drag_and_drop.html{% endblock %}"
{% block next_title %}Example 3{% endblock %}

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

    <p>
        In this example we load the data from the server using the <strong>data-url</strong> property on the dom element.
    </p>

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

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

{% block script %}
    <script>
        $.mockjax({
            url: '*',
            response: function(options) {
                this.responseText = ExampleData.example_data;
            },
            responseTime: 0
        });

        $(function() {
            $('#tree1').tree();
        });
    </script>
{% endblock %}
