MVC jsTree 3 on partial view ajax Refresh makes tree plain UL LI items

Question

I am trying to reload the jsTree using ajax load method calling the Action-controller method to load partial view. Initially on page-load the jstree renders fine but after ajax call to update makes it plain ul li items.

I am using HTML data source (UL LI items).

Index.cshtml:

@model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>
@{
    ViewBag.Title = "About Page";
}

<link href="~/Content/jsTree/docs.css" rel="stylesheet" />
<link href="~/Content/jsTree/themes/default/style.css" rel="stylesheet" />


<div class="row">
    <div class="col-md-8">

        <button id="refreshTree" class="btn btn-sm">Reload</button><br /><br />

        <div id="dv-tree-wrapper">
            @{ Html.RenderPartial("_TreePartial", Model); }
        </div>
    </div>
    <div class="col-md-4" id="dv-node-details">
        @{ Html.RenderPartial("_NodeDetailPartial", model: TempData["FirstNode"]); }
    </div>
</div>


@section Scripts
{
    <script src="~/Scripts/jsTree3/jstree.js"></script>
    <script type="text/javascript">
        $(function () {
            LoadTargetTree();

            /***********  refresh tree  *********** */
            $('#refreshTree').on('click', function (event) {
                //$('#dv-tree-wrapper').load('@Url.Action("RefreshTree", "Home")');
                $('#divtree').jstree('destroy').empty();
                $('#dv-tree-wrapper').load('@Url.Action("RefreshTree", "Home")');
                LoadTargetTree();
                $('#divtree').jstree('refresh');
            });
        });

        function LoadTargetTree() {
            $('#divtree')
                .jstree({
                    core: { check_callback: true }
                });
        }

    </script>
}

_TreePartial.cshtml:

@model List<TreeViewJSDemo.Models.ModelViews.EmployeeNoRootModel>

<div id="divtree">
    @foreach (var item in Model)
    {
        <ul id="tree-@item.Id">
            <li id="node-@item.Id">
                <a href="#">@item.Name</a>
                @Html.Partial("_ChildrensPartialNoRoot", item.EmployeeList)
            </li>
        </ul>
    }
</div>

Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Mar 10 '18 at 19:07
Not sure what you are trying to say. I thought you wanted me to update if we need urgent help. Do I need to delete my post? — Victor, Mar 10 '18 at 20:38
_"I thought you wanted me to update if we need urgent help"_ - no, my two comments clearly stated much the same thing, which is that urgent/deadline pleas are discouraged here. _"Do I need to delete my post?"_ no. — halfer, Mar 10 '18 at 20:47
ajax is async. You executing the `LoadTargetTree()` function before the partial has been returned in your `load()` function. You need to call `LoadTargetTree()` in the success callback of the `.load()` function — , Mar 11 '18 at 00:21
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — , Mar 12 '18 at 21:51

score 0 · Accepted Answer · answered Mar 12 '18 at 17:51

0

As per Stephen feedback, changed code to call the LoadTargetTree() in the success callback to resolve this issue.

Code Changed:
 $('#dv-tree-wrapper').load('@Url.Action("RefreshTree", "Home")', function () { LoadTargetTree();});

answered Mar 12 '18 at 17:51

Victor

21
1
5

MVC jsTree 3 on partial view ajax Refresh makes tree plain UL LI items

1 Answers1