Trying to reload/refresh dynatree with new data

Question

I've seen this question already, and I've tried the solution given (use tree.reload()), but it's not working for me. I have a tree that's initialized on doc ready using initAjax(), and I'm trying to reload the tree, using different values, on the change of a select input. Basically this:

$(document).ready(function(){
    // global variables
    var myVal = 'initial value';

    // initialize tree
    $('#tree').dynatree({
        persist: false,
        initAjax: {
            url: 'getMyStuff.cfc',
            data: { myParam: myVal }
        },
        ... more params
    )};

    // select change handler
    $('#mySelect).change(function(){
        var tree = $('#tree').dynatree('getTree');
        myVal = $(this).find('option:selected').val();
        tree.reload();           
    )};
)};

The problem is that the tree keeps getting reloaded with the same parameters... I can see in the network tab of the Console that the parameter that gets sent is the same every time, even though I've verified that I'm targeting the correct element and am getting the correct value on change.

I've tried changing the scope of variables, I've tried placing the dynatree options in a separate variable, I've tried calling

$('#tree').children().remove();
$('#tree').dynatree(treeoptions);

inside the change() function, I've tried calling tree.initialize() (yes, I know it's a constructor), I've tried tree.redraw(), I've tried setting the initAjax option separately before calling reload(), and I'm stuck.

Any ideas?

At this point, I've decided the only thing to do is to put the tree initialization into a function, and when changing the select option, blow away the tree (including its parent div) and rebuild it. I'll be surprised if it's really true that there's no other way to rebuild the tree with new data, which runs counter to my experiences with other widgets.

Answer 1

This question is a duplicate of this: how to reload/refresh/reinit DynaTree?

My solution does not require detours like empty() and destroy() etc. Think about this: When the Dynatree is created you specify a dictionary of settings it must use. However as this is a configuration dictionary it will not be reevaluated even though some parameters are variables and change due to clicks etc. So to solve this and avoid expensive operations like deleting the DOM and recreating it we do it the way I think the Dynatree developers has this intended (but not so clearly documented in the AJAX/JSON example):

  //The HTML:
      <input name="filter" id="checkbox" type="checkbox" value="X">Checkme<br>
      <label id="mylabel"></label>

  $("#checkbox").click(function() {
    $("#mylabel").text($(this).is(":checked"))
    $("#tree").dynatree("option", "initAjax", {
             url: "myurl/myphp.php",
             data: {
                myparameter: $("#checkbox").is(":checked").toString()
             }
     });

    $("#tree").dynatree("getTree").reload();
  });

This example sets the configuration on the #tree every time the button is clicked, then reloads the tree.