IE7 和 IE8 上的 JSTree JSON_DATA

Question

Having some problems getting JSTree to work with IE7 and 8. It works great on IE9, FF4 and Chrome.

It is loading data via the JSON_DATA plugin backed by an ASP.NET MVC3 controller action.

The problem is that the data is not getting loaded into the tree on IE7-8. I can verify the action is getting requested and no error is being thrown or at least caught in the error function.

    $("#changeGroupTree")
    .bind("select_node.jstree", function(event, data) {
        // `data.rslt.obj` is the jquery extended node that was clicked
        var id = data.rslt.obj.attr("id");
        $("input[name='changeGroup_GroupId']").val(id)
            .siblings("span")
            .addClass("field-validation-valid")
            .removeClass("field-validation-error");

        $.ajax({
            type: "GET",
            url: "/api/group/gettree",
            data: { groupId: id },
            dataType: "JSON",
            success: function(data, status, jqXHR) {
                $("#changeGroup_SelectedGroup").html(data[0]);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                var data = $.parseJSON(jqXHR.responseText);
                $().toastmessage("showErrorToast", data.ErrorMessage);
            }
        }); // end ajax
    }) // end bind
    .bind("loaded.jstree", function(event, data) {

    })
    .jstree({
        core: {
            animation: 200
        },
        plugins: ["themes", "json_data", "ui"],
        themes: {
            theme: "default",
            dots: "true",
            icons: "true"
        },
        ui: {
            select_limit: 1
        },
        json_data: {
            ajax: {
                url: "/api/group/getgroups",
                data: function(node) {
                    return { customerId: CUSTOMER_ID, parentId: (node.attr) ? node.attr("id") : "00000000-0000-0000-0000-000000000000" };
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert("JSTree Error when getting Group data");
                }
            }
        }
    });  // end jstree

Here is the json that is returned from the server

[{"attr":{"id":"d9cc2cb9-fbc4-4726-a9b1-9eee00f1e2b8"},"data":"MTM","state":"closed","icon":"Group"}]

Am I missing something to get the data bound in the older IEs?

Thanks,

Answer 1

Turns out I had a self closing span tag in the html aka

<span class="field-validation-valid" />

Make this in to a well formed tag aka

And everything works perfectly.

Sigh, a whole day fighting this