2014-02-26 1 views
1

jstree를 사용하여 트리 탐색을 만들고 있습니다.jstree 3.0.0이 json 데이터를로드하는 데 걸렸습니다.

HTML로 정의되거나 jstree.core.data에 할당 된 정적 데이터를 사용하는 경우 작동하지만 jstree.core.data.url으로 지정하면 작동하지 않습니다. 영원히 로딩하는 것을 보여줍니다.

정적 json 파일 또는 ajax url을 소스로 지정해도 상관 없습니다.

<html> 
<head> 
<link rel="stylesheet" href="jquery.treeview.css" /> 
<link rel="stylesheet" href="style.min.css" /> 
</head> 
<body> 
<div id="stuck"></div> 
<br/> 
<div id="stuck2"></div> 
<br/> 
<div id="works"></div> 
<script type="text/javascript" src="jquery-1.11.0.min.js"></script> 
<script type="text/javascript" src="jstree.min.js"></script> 

<script type="text/javascript"> 
$('#stuck').jstree({ 
    "core" : { 
    'data': { 
     'url' : 'catalog.json' 
     } 
    }, 
}); 
$('#stuck2').jstree({ 
'core' : { 
    'data' : { 
    'url' : function (node) { 
     return node.id === '#' ? 
     'ajax_roots.json' : 
     'ajax_children.json'; 
    }, 
    'data' : function (node) { 
     return { 'id' : node.id }; 
    } 
    } 
} 
}); 
$('#works').jstree({ 'core' : { 
    'data' : [ 
     { "id" : "ajson1", "parent" : "#", "text" : "Simple root node" }, 
     { "id" : "ajson2", "parent" : "#", "text" : "Root node 2" }, 
     { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1" }, 
     { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2" }, 
    ] 
} }); 
</script> 
</body> 
</html> 

나는이 :

  • jsonlint와 JSON을 테스트.
  • 은 1.9.0 시도 php 및/또는 nginx
  • 여러 브라우저
  • application/json 또는 text/json 모두의 경우를
  • 변경된 응답 헤더를 작동 및 작동하지 않습니다에 대한 같은 JSON을 사용합니다. 및 1.11.0 버전의 jQuery가 있습니다.
  • SO와 비슷한 질문을했지만 그보다 오래된 jstree에 관한 내용입니다.
  • jstree에서 docs/index.html을 실행 해 보았습니다. 같은 문제.

어떻게 디버깅 할 수 있습니까? 콘솔에 오류나 경고가 표시되지 않습니다.

+1

귀하의 URL은 스크립트에서 제공되는 호스트를 가리켜 야합니다. 이것은 보안 요구 사항입니다. http://en.wikipedia.org/wiki/Same-origin_policy를 참조하십시오. 교차 도메인을 검색하십시오. 예외가 있지만 특별한 서버 헤더가 필요합니다. – mvw

+0

브라우저의 자바 스크립트 콘솔의 네트워크 탭을 사용하여 네트워크 상호 작용을 확인하십시오. JavaScript 디버거를 사용하는 방법을 배우는 것은 이러한 문제를 추적하는 데 도움이됩니다. – mvw

+0

@liepumartins, 몇 시간 전이 문제가 있었지만 클라이언트에 정확한 JSON 콘텐츠 유형 BACK을 다시 전달하면 해결되었습니다. Content-Type : application/json; charset = utf-8 – zaitsman

답변

0

나는 많은 오류를 만든 것 같다 :

  1. 은 분명히 내가 JSON 파일을 모두 확인하지 않았고, 일부는 따옴표없이 또는 대신에 이중의 작은 따옴표로 키 이름을 가지고 있었다.

  2. 세 번째 예와 같이 인라인 JSON 데이터를 인라인 할 때. 따옴표 안에 키 이름 없이도 작동하므로 잘못된 JSON은 인라인으로 작동하지만 XHR을 통해 가져 오는 것은 불가능합니다. 혼란스러워.

  3. mvw에서 언급 한 보안 조치 때문에 docs/index.html의 예제가 작동하지 않았습니다. 오류 메시지는 다음과 같습니다

    No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.