在 AJAX 调用上重新加载数据时丢失格式

Question

I am having an issue when I reload the jstree with data from my AJAX call. So on load it works fine, but adding data, and getting a response back the tree loses its structure

Initial html is an empty div, data is updated on button click using ajax

<div id="pnlTree">                  

  <div id="jstree" style="text-align: left">

  </div>
</div>

success: function (data) 
        {
            if( data )
            {
                    var output = '<ul class="appointmentlist">';
                    $.each(data, function(key, val){

                        output += "<li id='"+data[key].data1+"' name='dtpurchase'"+counter+"' value='" + data[key].data2 + "'>" +dtdata + "</li>";
                        //output += '<a id="dtappointment" name="dtpurchase" value="' + data[key].data3 + '"'+ '>'+data[key].purchase_date + '</a>';
                         //output += '</li>';
                         counter++;

                    });
                    output += '</ul>';
                $('#jstree').html(output);
            }

        },

I have tried refreshing, reloading but nothing seems to fix the issue.

Answer 1

Soooo what you need to do is to refresh() the tree after you updated the data. Now this works only if you append the date to the element with $("#jstree").jstree(true).settings.core.data = output . If you use $('#jstree').html(output) then it doesn't work

Run the snippets to see it in action:

Working:

 $('#jstree').jstree() function update() { var output = `<ul><li>New Item</li></ul>` $("#jstree").jstree(true).settings.core.data = output $('#jstree').jstree(true).refresh(); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <div id="jstree"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <button onclick="update()">Update data</button>

Okay, so this second one is working with AJAX. It doesn't work in the Stack Overflow sandbox, but it does work on a normal HTML page (see screenshots). It's the exact same concept, you just need to apply it in the right order:

 $('#jstree').jstree() function update() { $.ajax({ url: "https://swapi.dev/api/people/1", success: function(data){ var output = `<ul> <li>${data.name}</li> <li>${data.eye_color}</li> <li>${data.height}</li> </ul>` $("#jstree").jstree(true).settings.core.data = output $('#jstree').jstree(true).refresh(); } }); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <div id="jstree"> <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> </div> <button onclick="update()">Update data</button>