IE Caching Issue During jsTree.Refresh()

911 views
Skip to first unread message

Jeff S

unread,
Apr 5, 2014, 2:47:08 PM4/5/14
to jst...@googlegroups.com

I have the following sequence of activity:

1. Populate 2 jsTrees via AJAX (no problem).

2. User drag-n-drops between the trees (no problem).

3. During the copy_node event I update server-side definition of both trees via my own AJAX call to show the moved node as being removed from one tree and placed into the other tree definition (no problem).

4. As the last task in the client-side copy_node event procedure, I refresh the relevant treeView, like this:
$('#inventoryTree').jstree(true).refresh();

During the .refresh() activity is where I observe the following:

In FireFox, the refresh automatically initiates a GET, at which point the server returns HTTP Status 200 OK and all the JSON data from the server - no problem

BUT in Internet Explorer 11 on Windows 7 (I have not tried this in other versions of IE), the GET is issued, but HTTP status 304 NOT Modified is the result; with no call ever going to the server - thus no data returned. The node that was dropped onto the tree then disappears (because apparently jsTree re-loaded the nodes from the previously cached JSON results from the server).

This behavior clearly is something to do with Internet Explorer caching because a work-around is to tell IE to never cache: Internet Options | General Tab | Browsing History section | Settings --> Then select the radio button to check for newer versions of stored pages: "Every time I visit the webpage". After selecting that option, IE actually issues the request to the server, which results in a 200 OK with new JSON data - just like FireFox, which is how it should be.

I'm wondering if there is something jsTree can do to force the call to the server during .refresh() to bypass any cache. Can you add some arbitrary querystring value? Or is there something I can do in my configuration of jsTree?

In case this is relevant, here is how I configure jsTree to load data:

var inventoryUrl = baseURL + 'GetTreeviewNodes?treeName=inventory&locationID=' + locationID;
...

'data': {
   url: inventoryUrl,
   async: true,
   'data': function (node) {
      return { 'id': node.id };
   }
}

I am using the version of jsTree posted to GitHub on 04/04/2014.

Thanks.

Jeff S

unread,
Apr 5, 2014, 3:39:37 PM4/5/14
to jst...@googlegroups.com
Quick update: Since my original post an hour ago, I modified my data.url to call a function rather than reference a variable. In the new function that returns the URL I append a random querystring value just to create a unique URL to get past the cache. But I still get the HTTP 304 not modified. Upon inspection of the GET requests, it appears jsTree is not calling my function during .refresh() because the random querystring value (and the entire GET URL) is identical in the GET for the initial population and then later during the .refresh().

At this point I'm out of ideas and would appreciate some help. Ultimately I must be able to refresh the treeview with whatever is the current definition on the server.

Thanks.

Ivan Bozhanov

unread,
Apr 6, 2014, 4:12:57 AM4/6/14
to jst...@googlegroups.com
jstree does not have such logic implemented, also - if you get a 304 that means a request was made, but the browser stopped it. Just add "cache" : false to your data config - it is a standard jQuery AJAX config, so you can use all standard properties - like "cache".

Best regards,
Ivan
Reply all
Reply to author
Forward
0 new messages