web-dev-qa-db-ja.com

JSTreeにAJAX

サービス（ajaxを使用して呼び出される）から取得しているJSONデータをJSTreeに入力しようとしています。ただし、jquery.jstree.jsファイルで「データもajax設定も提供されないエラー」が発生します。このため、JSTreeはロードgifを表示するだけです。

AJAXコード（jsonをローカル変数テストに設定してからテストを返すように編集されています）

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コード

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

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

デバッグの結果、jsonDataがcreateJSTreesメソッドに渡されたときに未定義であることがわかりました。 Ajaxコードでそのデータを正しく取得していますか？前もって感謝します

javascriptjqueryjsonweb-servicesjstree
12
Hunter Hodnett

Json_dataプラグインに直接dataパラメーターを指定するアプローチは以前にテストしていません。そのため、このシナリオに対する回答を提供することはできません。

ただし、AJAX呼び出しを使用してデータを取得しているため、AJAX呼び出しでJSTreeを呼び出し、その呼び出しを処理させることはできません。所有していますか？AJAX呼び出しをコードで構成する方法は次のとおりです。

        (...)
        '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

getJSONData（）は値を返さないため、jsonDataは未定義です。 $ .ajax呼び出しの完了後に返されるgetJSONData（）にローカル変数を割り当てない限り、$。ajax成功ハンドラーからの戻り値に依存することはできません。しかし、次のようなものが必要です。これには、非同期であるという利点もあります。

<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