JSTREE fails on second load

Question

Im building a MVC 5 web application, where I have an instance of a JSTREE on a view. The Tree is loading fine but when i have altered som data in the database, and whant to reload the tree I get errors:

Uncaught TypeError: $(...).jstree is not a function

This error seems to come with whatever I do with the tree, reload, refresh etc.

An example of what is failing:

 $("#tree") .jstree({ "core": { "data": [{ text : "node", "children" : ["1","2"] }] } }); $('#rfr') .on("click", function (e, data) { $("#tree").jstree(true).deselect_all(); $("#tree").jstree(true).refresh(); $("#tree").jstree("refresh"); }); 

 @{ ViewBag.Title = "OrgAdmin"; } <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jstree.js")" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="@Url.Content("~/Scripts/themes/default/style.min.css")"> <div id="tree"></div> <button id="rfr">refresh</button> 

I have taken the code from a working fiddle: http://jsfiddle.net/DGAF4/30/ here the refresh works, but when copied to my mvc app, it fails

I hope you can help me, to get this tree to refresh on my mvc app.

kindly Kåre

Answer 1

I had a similar problem in adding two buttons for 'Close All' and 'Expand All' and managed to solve by commenting out the jquery bundling line in _Layout.cshtml file:

@Scripts.Render("~/bundles/jquery")

Apparently, it seems like the source code included jquery reference twice, one in _Layout.cshtml file and one in my view file. Once I removed the jquery bundle, it worked fine. I guess I have to add jquery references explicitly in other views. Hope that helps.

Here's the view code:

@using OrgChart.Models;
@using OrgChart.Controllers;
@model IEnumerable<TreeNode>
@{  ViewBag.Title = "Home Page";}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.1/jstree.min.js"></script>

<script type="text/javascript">
    jQuery(function ($) {
        var $treeview = $("#treeview");
        $treeview.jstree({
            "core": { // core options go here
                "multiple": false, // no multiselection
                "themes": {
                    "dots": false // no connecting dots between dots
                }
            },
            "state": { "key": "state_demo" },
            "plugins": ["themes", "html_data"]
        })
        //.on('ready.jstree', function () {
        //    $treeview.jstree('open_all');
        //});
    });
</script>

<br/>
<input id="btnCloseAll" type="button" value="Collapse All" onclick="$('#treeview').jstree('close_all');"> &nbsp;
<input id="btnExpandAll" type="button" value="Expand All" onclick="$('#treeview').jstree('open_all');">
<br /><br />
<div class="row">
    <div id="treeview" class="treeview">
        @MvcHtmlString.Create(Html.RenderTree(ViewData.Model, node => node.Name))
    </div>
</div>