Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>How about this?</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script language="javascript" type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt; &lt;script language="javascript" type="text/javascript" src="jquery.jstree.js"&gt;&lt;/script&gt; &lt;script&gt; var treeConfig = { "json_data" : { "data" : [{ "data" : "Root", "state" : "closed", "children" : "" }], "ajax" : { "url" : "http://localhost/tree.json", "data" : function (node) { return { query : "Value" }; } } }, "plugins" : [ "themes", "json_data", "ui" ], }; $(document).ready(function(){ $("#treeContainer").jstree(treeConfig); $('#treeContainer a').live('click',function(){ var tree = jQuery.jstree._reference("#treeContainer"); var currentNode = tree._get_node(null, false); tree.refresh(currentNode); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="treeContainer"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Here's what I'm doing:</p> <ul> <li>using the JSON data plugin (but the concept is similar for HTML and XML plugins)</li> <li>loading the initial tree node ("Root") from the data config object</li> <li>setting the AJAX config object so all other nodes request their child data via ajax, when initially opened (applies to any node where 'state' is 'closed' and 'children' is 'empty')</li> <li>using the AJAX data function to pass the correct query string to get relevant data for the node being opened. My example always fetches <a href="http://localhost/tree.json?query=Value" rel="nofollow">http://localhost/tree.json?query=Value</a> but you probably want to do something like set Value to the node id so the server sends back relevant data.</li> </ul> <p>So far this makes an ajax request for the node data only the first time the node is opened. The final step is:</p> <ul> <li>create a click function which causes a single node to refresh its data every time it is clicked</li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload