Complete newb, Filebrowser Demo

[Chr1zK]

Sorry, this will probably be painful...
I have been tasked with understanding the creation of some in-house configuration files. These are made using makefile/make and m4 macros. The relationship between these files is quite complex, but could be visualised in tree form, ie the makefile would be the starting point, identifying the first m4 in a 'recipe', and progressing through the other related m4 files.
I appreciate that that is a little specialised, but I would like to list the first file as 'root', and the dependent files as nodes.
(the developer said that he can automate this, and produce JSON format for the structure)

Hopefully my objective is clear ...so, what I would like to do is navigate through the tree, but also display the content of the M4 file as I select it. jstree filebrowser demo indicates that it might be suitable. The Demo tab states "You can see the code of the following demos in the demo folder of the download", but if I view jstree basic demos, the page displays seven demos, none of which are titled filebrowser demo. Also, each demo is in a single frame, ie none have the 'preview' frame for the file content.

I am sorry to say, I am only just starting with HTML/JSON/JQUERY ...absolutely everything, and so I would appreciate any help that can be given. That said, I can generally read code, and I am adept at modifying examples. If I could isolate the filebrowser demo that is shown on https://www.jstree.com/demo/ , I hope I would be close to finding a solution.

[Chr1zK]

I have found that my assumption to use the only html (index.html) under demo/basic was incorrect. README.md directs me to github (https://github.com/vakata/jstree-php-demos), meaning the download has been updated, but the website is out of date.
I have downloaded the demos and extracted the ZIP ...errmmm, not quite what I was expecting, /jstree-php-demos-master/filebrowser/data/root/index.html loads a replica of the website, not just the html code for the demo/example.
If I select the Demo tab, I am presented with some HTML, but the preview frame does not show anything. I am at a loss where to find the code for the filebrowser :(

[Chr1zK]

I am now trying to use the downloaded demo/basic/index.html as a guide to 'transfer' the filebrowser demo into the download. I have copied over the assets directory into the downloaded directory structure, and have modified the html as below.
This results in similar experience to the git demo, as above. I just get 'Loading'... does the script know the location of the json files (as there is no path to assets)?

<title>jsTree filebrowser</title> <style> html { margin:0; padding:0; font-size:62.5%; } body { max-width:800px; min-width:300px; margin:0 auto; padding:20px 10px; font-size:14px; font-size:1.4em; } h1 { font-size:1.8em; } .demo { overflow:auto; border:1px solid silver; min-height:100px; } </style>

filebrowser demo

<!-- 4 include the jQuery library -->
<script src="dist/libs/jquery.js"></script>
<!-- 5 include the minified jstree source -->
<script src="dist/jstree.min.js"></script>

<script>
	// filebrowser demo
  $('#filebrowser').jstree({
  "core" : {
	"animation" : 0,
	"check_callback" : true,
	"themes" : { "stripes" : true },
	'data' : {
	  'url' : function (node) {
		return node.id === '#' ?
		  'ajax_demo_roots.json' : 'ajax_demo_children.json';
	  },
	  'data' : function (node) {
		return { 'id' : node.id };
	  }
	}
  },
  "types" : {
	"#" : {
	  "max_children" : 1,
	  "max_depth" : 4,
	  "valid_children" : ["root"]
	},
	"root" : {
	  "icon" : "./assets/images/tree_icon.png",
	  "valid_children" : ["default"]
	},
	"default" : {
	  "valid_children" : ["default","file"]
	},
	"file" : {
	  "icon" : "glyphicon glyphicon-file",
	  "valid_children" : []
	}
  },
  "plugins" : [
	"contextmenu", "dnd", "search",
	"state", "types", "wholerow"
  ]
});

</script>

[Chr1zK]

Ah, this facility translates the html ...hopefully the above illustrates what I have attempted.

[Chr1zK]

I am starting to think the root of my problems is the constant display of 'spinning' Loading ... when attempting to view locally downloaded AJAX examples. Although Download jsTree from jstree.com did not include the demo's as expected, it did include a 'basic' demo, as shown in my first screenshot. root.json exists in the same directory as index.html, and the html contains "url" : "./root.json",. This appears to be 'as simple as you can get', so why do I just get Loading... when I view it in a browser?

[vakata]

Most browsers do not allow AJAX from the local filesystem - you need to run a webserver. Firefox is an exception - last time I checked it did allow AJAX when using the file:// protocol.

[Chr1zK]

AHHHHH!!!! I have split out every example I could find in jsTree.com. I found all the in-line JSON works, and it is only AJAX that causes me the problem. Thank you. I will take this into account and see how I progress.

[Chr1zK]

OK, I have changed all the core.data to use in-line JSON. I don't think this gets me far, as Filebrowser appears to use a php file within an iframe. If I am correct, this leads me back to the same problem, as a web server is needed to facilitate the use of php. I appreciate I am a complete novice, but wouldn't anyone struggle to download the demos and get them to work (I believe they are written to use local files)? Could the demos be written to use in-line content, so that a webserver is not required?
I will mark @vakata as the Answer, in the hope that someone at jsTree can consider providing a 'working' demo of filebrowser (NB jstree.com/demo needs to be updated as it is incorrect to say "You can see the code of the following demos in the demo folder of the download". As discussed above, you have to retrieve the demos from GitHub.)