Question

i have a partial which contains a jsTree (jsTree.com). which i’ve setup to async loading of json data.
my controller returns json data in a format accepted by jsTree.

this all works perfectly, i can collapse node’s and the subnodes are loaded asynchronally like it should.

but when i make a change to my database (simple change of a name) i want to refresh the contents of the jsTree, therefore i call the $.tree_reference(‘mytree’).refresh() function provided by jsTree which does execute but does reflect made data changes

i dove into the code of jsTree and found the folowing peace of code which should asynchronally call the server/my controller:

  $.ajax({
                            type: this.settings.data.method,
                            url: this.settings.data.url,
                            data: this.settings.data.async_data(false, this),
                            dataType: "json",
                            success: function(data) {
                                alert("succes");//added for debugging
                                data = _this.settings.callback.onJSONdata.call(null, data, _this);

                                var str = "";
                                if (data.length) {
                                    for (var i = 0; i < data.length; i++) {
                                        str += _this.parseJSON(data[i]);
                                    }
                                } else str = _this.parseJSON(data);
                                _this.container.html("<ul>" + str + "</ul>");
                                _this.container.find("li:last-child").addClass("last").end().find("li:has(ul)").not(".open").addClass("closed");
                                _this.container.find("li").not(".open").not(".closed").addClass("leaf");
                                _this.context_menu.apply(_this);
                                _this.reselect.apply(_this);
                            },
                            error: function(xhttp, textStatus, errorThrown) { alert("error"); _this.error(errorThrown + " " + textStatus); } //alert added for debugging
                        });

as stated this works perfectly with normal traversing thrue the tree.
this method also gets called when i hit the refresh ( see the alerts ive added, i’v got the succes allert) and it returns data which gets correctly parsed by the rest of the jsTree code.

BUT. the data it returns basicly is data which it returned earlyer (when traversing thrue the tree) therefore not changing the tree.

Furthermore i’v set up a breakpoint in my controller, which breaks when traversing thrue the tree (thus when jquery asynchronally gets some json data). but it does NOT break when i hit the refresh method.

i’m asuming somehow the json data gets cached (when i open up a new instance of IE and browse to the tree, the tree DOES reflect the changed data, the first instance wont however (not with the refresh method, nor with the actual refresh button on IE itself))

not sure where the problem lie’s here, but sofar im pretty much convinced it should be in the caching of the $.ajax call.

any thought on where to continue debugging?

Answer 1

lol.. figures

i’ve found the solution minutes after posting the question..

Funny how typing out a question makes u rethink the problem (when i started typing out i didnt think of the cahcing yet)

the solution here is adding

$.ajaxSetup({ cache: false });

before the ajax call or putting the cache: false inside the options of the $.ajax call itself
ill be dropping a note to the creator of jsTree