title: My Ajax call isn't working - Trying to populate jstree via ajax php & mysql JSON
body: <p>Javascript:</p>
  
  <pre><code>$('#jstree1').jstree({ 'core' : {
          // I usually configure the plugin that handles the data first
          // This example uses JSON as it is most common
          "json_data" : {
              // This tree is ajax enabled - as this is most common, and maybe a bit more complex
              // All the options are almost the same as jQuery's AJAX (read the docs)
              "ajax" : {
                  // the URL to fetch the data
                  "type" : "POST",
                  "url" : "./ajax/get_page_data.php",
                  "dataType": "JSON",
                  "contentType": "application/json;",
                  "data":
                  "d_id="+&lt;?=$DOC['d_id']?&gt;,
                  "success" : function (data) {
                      // 'data' is a JSON object which we can access directly.
                      // Evaluate the data.success member and do something appropriate...
                      alert(data);
                      if (data.success == true){
                          $('#section1').html(data);
                      } else {
                          $('#section2').html(data);
                      }
                  },
                  "error": function (error) {
                        alert('error; ' + eval(error));
                  }               
              }
          }
  } });
  </code></pre>
  
  <p>And below is my output from get_page_data.php it's not quite working:</p>
  
  <pre><code>[{"id":"ajson12","parent":"#","text":"Welcome"},{"id":"ajson13","parent":"#","text":"Getting to Us"},{"id":"ajson14","parent":"13","text":"About Us"},{"id":"ajson15","parent":"13","text":"Visit Us"},{"id":"ajson16","parent":"13","text":"Bus Routes"},{"id":"ajson17","parent":"#","text":"Choices"},{"id":"ajson18","parent":"#","text":"Guidance"},{"id":"ajson19","parent":"#","text":"Facilities"}]
  </code></pre>
  
  <p>When testing some JSON data manually the below will work:</p>
  
  <pre><code>$('#jstree1').jstree({ 'core' : {
      'data' : [{"id":"ajson12","parent":"#","text":"Welcome"},{"id":"ajson13","parent":"#","text":"Getting to Us"},{"id":"ajson14","parent":"13","text":"About Us"},{"id":"ajson15","parent":"13","text":"Visit Us"},{"id":"ajson16","parent":"13","text":"Bus Routes"},{"id":"ajson17","parent":"#","text":"Choices"},{"id":"ajson18","parent":"#","text":"Guidance"},{"id":"ajson19","parent":"#","text":"Facilities"}]
  } });
  </code></pre>
  
  <p>I have looked all over the net and cannot find a perfect example of populating a jsTree via ajax using PHP array / mysql fed and outputted as Json.</p>