Question

sample.html Code

<ul id="browser" class="filetree">
   <li><span class="folder">Folder 1</span>
        <ul>
            <li><span class="file">Item 1.1</span></li>
        </ul>
   </li>
</ul>

Main Page Code

<div id="LtrLeftContent">
   <script type="text/javascript">
       $('#LtrLeftContent').load('sample.html');
   </script>                    
</div>

Page Loaded successfully. But unable to populate Jquery Treeview using bellow code within Main Page

Process 1:

$("div#LtrLeftContent").contents().find("ul#browser").treeview();

Process 2:

$("div#LtrLeftContent").ready(function () {
    $("ul#browser.filetree").treeview();
}); 

Process 3:

$(document).ready(function () {
    $("ul#browser").treeview();
});

Process 4:

$("#LtrLeftContent").html().find("#browser").treeview();

But if I put bellow code into “sample.html“. the code populate the Treeview successfully

$(document).ready(function () {
    $("#browser").treeview();
});

How to set treeview into Main Page in order to populate JQuery treeview ?

Note: I don’t want put Javascript into “Sample.html“.

Answer 1

You’ll need to wait with populating the treeview for sample.html to load (see docs for load):

$('#LtrLeftContent').load('sample.html', function(response, status, xhr) {
    $("#browser").treeview();
});