Einen JSTree mit JSON-Daten füllen, die in AJAX

Question

erhalten wurden

Ich versuche, einen JSTree mit JSON-Daten zu füllen, die ich von einem Dienst erhalte (der mit Ajax aufgerufen wird). In der Datei jquery.jstree.js erhalte ich jedoch den Fehler "Keine Daten oder Ajax-Einstellungen geliefert". Aus diesem Grund zeigt JSTree nur ein Lade-GIF an.

AJAX Code (editierte Einstellung json zu lokalen Variablen Test, um zu versuchen, dann wieder Test)

function getJSONData() { 
    var test; 
    $ 
      .ajax({ 
       async : true, 
       type : "GET", 
       url : "/JavaTestService/rs/TestService/MyFirstTestService?languageCode=en_US&version=2", 
       dataType : "json", 

       success : function(json) { 
        test = json; 
       }, 

       error : function(xhr, ajaxOptions, thrownError) { 
        alert(xhr.status); 
        alert(thrownError); 
        test = "error"; 
       } 
      }); 
    return test; 
} 

JSTree Code

var jsonData = getJSONData(); 
createJSTrees(jsonData); 

function createJSTrees(jsonData) { 
     $("#supplierResults").jstree({ 
      "json_data" : { 
       "data" : jsonData 
      }, 
      "plugins" : [ "themes", "json_data", "ui" ] 
     }); 

Nach einiger Fehlersuche habe ich festgestellt, dass jsonData ist nicht definiert, wenn es an die createJSTrees-Methode übergeben wird. Erhalte ich diese Daten korrekt im Ajax-Code? Vielen Dank im Voraus

Answer 1

Ich habe Ihren Ansatz noch nicht getestet, wo Sie den Datenparameter direkt an das json_data-Plugin liefern, so dass ich keine Antwort auf dieses Szenario liefern kann.

Da Sie jedoch einen AJAX-Aufruf verwenden, um die Daten zu erhalten, können Sie den AJAX-Aufruf nicht an JSTree übergeben und ihn alleine verarbeiten lassen? Hier ist, wie ich den AJAX-Aufruf in meinem Code konfiguriert haben:

 (...) 
     'json_data': { 
      'ajax': { 
       'url': myURL, 
       'type': 'GET', 
       'data': function(node) { 
        return { 
         'nodeId': node.attr ? node.attr("id") : '' 
        }; 
       } 
      }, 
      'progressive_render': true, 
      'progressive_unload': false 
     }, 
     (...) 

Answer 2

jsonData nicht definiert ist, weil getJSONData() gibt keinen Wert zurück. Sie können sich nicht auf den Rückgabewert Ihres $ .ajax-Success-Handlers verlassen, es sei denn, Sie vergeben eine Variable local zu getJSONData(), die zurückgegeben wird, nachdem der Aufruf von $ .ajax abgeschlossen wurde. Aber Sie wollen etwas wie dieses, das auch den Vorteil hat, asynchron zu sein:

<script type="text/javascript">  

$(function() { 
    $.ajax({ 
     async : true, 
     type : "GET", 
     url : "/JavaTestService/rs/TestService/MyFirstTestService?languageCode=en_US&version=2", 
     dataType : "json",  

     success : function(json) { 
      createJSTrees(json); 
     },  

     error : function(xhr, ajaxOptions, thrownError) { 
      alert(xhr.status); 
      alert(thrownError); 
     } 
    }); 
});  

function createJSTrees(jsonData) { 
    $("#supplierResults").jstree({ 
     "json_data" : { 
      "data" : jsonData 
     }, 
     "plugins" : [ "themes", "json_data", "ui" ] 
    }); 
}  

</script>