jQuery JsTree and JSON error handling

Question

I am using MVC to pass JSON data to JsTree and show a hierarchical view of information. Everything is working just fine, however, there are times when the user does not have access the the data or for some reason the MVC action throws an exception:

In these cases, the action passes a JSON error message and sets the HttpStatusCode to NotAccepted or InternalServerError.

However the jsTree's sinner keeps spinning and I don't seem to find a way to make it stop and show the error message.

Has anyone solved this issue before? How can one does error handling when using JsTree's JSON data plugin?

UPDATE:

I figured out how to capture the error:

 $("#jstree1").jstree({
       "json_data": {
           "ajax": {
               "url": serviceUrl,
               "data": function (n) {
                       return { pid: n.attr ? n.attr("id") : "" };
               },
               "error": function (x, s, r) { var err = $.parseJSON(x.responseText); if (err!="") { alert(err); } }
           }
    }

It seems that JsTree does get the MVC http statusCode and the error, now I need to figure out how to tell the JsTree to stop waiting and remove the spinner image!

I am also looking for a good way of showing the error in JsTree, or should I manage the error message outside of it?

Further discovery, it is possible to capture the error. – sam360 Dec 01 '11 at 15:16 — sam360, Dec 01 '11 at 15:16
I'm in need of an answer to this :) – Tom Beech Jan 21 '13 at 11:38 — Tom Beech, Jan 21 '13 at 11:38

Tom Beech · Answer 1 · 2013-01-23T09:25:42.803

I've solved this problem.

Just a note- the code example above for handling ajax call errors is incorrect, please see a complete example below:

        $('#YourTree').jstree({
        "json_data": {
            "ajax": {
                "url": "/Controller/Action",
                "data": function () {
                    return { Parameter1: "Value1", Parameter2: "Value2" }
                },
                "type": "POST",
                "dataType": "json",
                "error": function (jqXHR, textStatus, errorThrown) { $('#YourTree').html("<h3>There was an error while loading data for this tree</h3><p>" + jqXHR.responseText + "</p>"); }
            }
        }
    });

And in the actual action, you need to set the http response status code to 1 and write the error. e.g.

Response.StatusCode = 1
Response.Write("Error you want to go into jqXHR.responseText here");

Enjoy :)

I found that overwriting the content for the entire tree prevents the tree from working in future refreshes. Instead, I tweak the content within the tree to display the error message and remove the loading text, which jstree correctly replaces in subsequent refreshes: `$('#YourTree .jstree-loading').removeClass('jstree-loading').find('.jstree-anchor').html('Error: ' + jqXHR.responseText);` — Gabby Paolucci, Jan 24 '17 at 18:16

score 0 · Answer 2 · answered Dec 15 '11 at 15:25

Maybe you should look into handling this error a layer above the .jstree. Maybe by handling the window.onerror event you can achieve this. In here you could call a function that will rebuild the tree or something? Be sure to include this script as the first one in your page.

<script type="text/javascript">
window.onerror = function(x, s, r){
  alert('An error has occurred!')
 }
</script>

jQuery JsTree and JSON error handling

2 Answers2