JSTree JSON_DATA on IE7 and IE8

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