JSTREE script execute asynchronously
<p>I Have implemented <a href="http://www.jstree.com/" rel="nofollow">JSTREE</a> on my project everything work fine but recently I faced the issue which even though I manage to fix the concept of it is still unclear to me .</p>

<p>Here What I meant ?</p>

<p>the JSTREE Code is Written in <strong><a href="http://jquery.com/" rel="nofollow">jquery</a></strong> document ready function Like this</p>

<pre><code>$(document).ready(function() { 
  $("#someid").jstree( { 

    "json_data" : {
      "data" : [{
        "attr" : { "id" : "root" },
        "data" : {
          "title" : "Root",
          "attr" : { "id" : "root","href" : "#" ,"class" : "jstree-clicked" }
        },
        "children" : [
              {
              "attr" : {"id" : "node-1"},
              "data" : {
                "title" : "Node-1",
                "attr" : {"id" : "node-1" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            },

              {
              "attr" : {"id" : "node-2"},
              "data" : {
                "title" : "Node-2",
                "attr" : {"id" : "node-2" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            },

              {
              "attr" : {"id" : "node-3"},
              "data" : {
                "title" : "Node-3",
                "attr" : {"id" : "node-3" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            },

              {
              "attr" : {"id" : "node-4"},
              "data" : {
                "title" : "Node-4",
                "attr" : {"id" : "node-4" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            },

              {
              "attr" : {"id" : "node-5"},
              "data" : {
                "title" : "Node-5",
                "attr" : {"id" : "node-5" ,"href": "#" }
              },
              "children": [

              ],
              "state" : "closed"
            }
     ],
     // the method where the ajax request will be sent to get thejson data to build the tree
    "ajax" : {
      "url" : "/my_url/tree",
      "data" : function (focus_element) {
        return { node : focus_element.attr ? focus_element.attr("id") : 0 };
      }
    }
  },

  "themes" : {
    "theme" : "classic",
    "dots" : true,
    "icons" : true
  },
  "plugins" : ["themes",  "json_data" ,"ui"]

})
</code></pre>

<p>There is a <strong>another jquery document ready function</strong> on the page <strong>which will click the anchor</strong> node created but the above jstree .</p>

<pre><code>$(document).ready(function() {
   $("a#node-1").click()     
})
</code></pre>

<p>Now The problem come when the page is load the tree is constructed all the tree is constructed but the <strong>node-1</strong> anchor link is not getting clicked .</p>

<p>Debugging it I found That the <strong>console.log always present me and empty array for a#node-1</strong> which is very weird.</p>

<p>I put <strong>alert box in second document.ready function</strong> to see whether the tree is constructed when I'm requesting for the node. like this</p>

<pre><code>$(document).ready(function() {
   alert("JSTREE SHOULD BE CREATED BY NOW");
   $("a#node-1").click()  
})
</code></pre>

<p>But to my astonishment the when the <strong>alert popped up JSTREE was still building the tree</strong> .</p>

<p>With some decent understanding of javascript I know that script tag on the page are <strong>synchronous in nature</strong> i.e <em>the second script on the page execute only when the first execute</em></p>

<p>This make me believe is <strong>JSTREE running <em>asynchronously</em></strong> .If yes Can please any one share some light on it .</p>

<p>By the Way I manage to achieve the same using <strong>jstree load handler</strong></p>

<pre><code> $("#someid").jstree("load.jstree",   
     function() {   
      $("a#node-1").click();   
 })
</code></pre>
