Losing formatting on reload of data on AJAX call

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>