web-dev-qa-db-fra.com

Peupler un Jstree avec des données JSON obtenues dans AJAX

J'essaie de peupler un Jstree avec des données JSON que j'obtiens à partir d'un service (qui s'appelle à l'aide d'Ajax). Cependant, je reçois une "ni des données ni des paramètres de données Ajax fournis" dans le fichier jquery.jstree.js. Pour cette raison, le Jstree affiche simplement un gif de chargement.

code AJAX (édité pour essayer de régler JSON vers un test de variable local, puis testez le 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;
}

code Jstree

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

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

Après un certain débogage, j'ai constaté que Jsondata est indéfini lorsqu'il est passé à la méthode CreateJstrees. Est-ce que je récupère ces données correctement dans le code Ajax? Merci d'avance

javascriptjqueryjsonweb-servicesjstree
12
Hunter Hodnett

Je n'ai pas testé votre approche avant, où vous fournissez le paramètre Data directement au plug-in JSON_DATA, je ne pourrai donc pas fournir une réponse à ce scénario.

Cependant, puisque vous utilisez un AJAX Appelez pour obtenir les données, vous ne pouvez pas fournir au AJAX appel à jstree et laissez-le gérer l'appel sur son propre? Voici comment j'ai configuré le AJAX appel dans mon code:

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

jsondata est indéfini car GetJsondata () ne renvoie pas de valeur. Vous ne pouvez pas compter sur la valeur de retour de votre gestionnaire de succès $ .AJAX Sauf si vous attribuez une variable locale à getjsondata () qui est renvoyée après que l'appel $ .AJAX se termine. Mais vous voulez quelque chose comme ça, ce qui bénéficie également d'être asynchrones:

<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>
6
Adam