Fancytree Select

[boxel0]

I have built fancyTree into my node.js app, which is a document management system

Currently my server side code builds a JSON file, from SQL data and fancyTree is displaying it correctly,

But I now want to be able to select a file in fancyTree and have it display extra data from the same JSON file in a basic HTML form,

But I dont believe the select function is working correctly, can anyone help?

`// Function to process the SQL result and format the data for FancyTree
// Function to process the SQL result and format the data for FancyTree
function processSQLResult(records) {
const formattedData = [];

records.forEach((record, index) => {
    const areaName = record.Area_Name;
    const categoryName = record.Category_Name;
    const statusCode = record.Status_Code;
    const fileName = record.File_Name;

    let area = formattedData.find((node) => node.title === areaName);
    if (!area) {
        area = {
            title: areaName,
            children: [],
            folder: true,
            extraClasses: "fancytree-folder",
            expanded: true,
        };
        formattedData.push(area);
    }

    let category = area.children.find((node) => node.title === categoryName);
    if (!category) {
        category = {
            title: categoryName,
            children: [],
            folder: true,
            extraClasses: "fancytree-folder",
            expanded: true,
        };
        area.children.push(category);
    }

    let status = category.children.find((node) => node.title === statusCode);
    if (!status) {
        status = {
            title: statusCode,
            children: [],
            folder: true,
            extraClasses: "fancytree-folder",
        };
        category.children.push(status);
    }

    const file = {
        title: fileName,
        data: record, // Add the record data to the node
        key: "file_" + index, // Assign a unique key to the file node
    };
    status.children.push(file);

    console.log("Unique key for file", fileName, "is", file.key);
});

return formattedData;

}

$(document).ready(function () {
// Initialize the FancyTree with the Filter extension
var tree = $("#tree").fancytree({
activeVisible: true,
aria: true,
autoActivate: true,
autoCollapse: false,
autoScroll: false,
clickFolderMode: 2,
checkbox: false,
checkboxAutoHide: undefined,
debugLevel: 4,
disabled: false,
focusOnSelect: false,
escapeTitles: false,
generateIds: false,
idPrefix: "ft_",
icon: true,
keyboard: true,
keyPathSeparator: "/",
minExpandLevel: 4,
quicksearch: true,
rtl: false,
selectMode: 1,
tabindex: "0",
titlesTabbable: false,
tooltip: false,
imagePath: "src/skin-win8/",
extensions: ["childcounter", "filter"],
childcounter: {
deep: true,
hideZeros: true,
hideExpanded: true,
},
filter: {
mode: "dimm",
autoApply: true,
counter: true,
hideExpandedCounter: true,
},
select: function (event, data) {
var node = data.node;
var nodeData = node.data || {};

        if (node.isFolder()) {
            console.log("Folder");
            // If a folder node is selected, clear the form fields
            clearFormFields();
        } else {
            console.log("File");
            // Fetch the file data from the server
            $.ajax({
                url: "http://localhost:4000//your-server-endpoint", // Replace with your server endpoint
                method: "GET",
                data: { fileId: node.key },
                success: function (response) {
                    console.log("AJAX request successful");
                    console.log("Response data:", response);
                    populateForm(response);
                },
                error: function (xhr, status, error) {
                    console.error("Failed to fetch file data:", error);
                },
            });
        }
    },
    // ... other options and event handlers ...
});

// Function to clear the form fields
function clearFormFields() {
    $("#Area").val("");
    $("#Category").val("");
    $("#Drawing_Number").val("");
    $("#Drawing_Sheet").val("");
    $("#Drawing_Rev").val("");
    $("#DrawingDate").val("");
    $("#DrawingDesc").val("");
    $("#Status").val("");
}

function populateForm(data) {
    console.log("Populating form with data:", data);

    $("#Area").val(data.Area_Name || "");
    $("#Category").val(data.Category_Name || "");
    $("#Drawing_Number").val(data.Drawing_Number || "");
    $("#Drawing_Sheet").val(data.Drawing_Sheet || "");
    $("#Drawing_Rev").val(data.Revision_Number || "");
    $("#DrawingDate").val(data.Revision_Date || "");
    $("#DrawingDesc").val(data.Revision_Description || "");
    $("#Status").val(data.Status_Code || "");

    console.log("Form fields populated:", {
        Area: $("#Area").val(),
        Category: $("#Category").val(),
        Drawing_Number: $("#Drawing_Number").val(),
        Drawing_Sheet: $("#Drawing_Sheet").val(),
        Drawing_Rev: $("#Drawing_Rev").val(),
        DrawingDate: $("#DrawingDate").val(),
        DrawingDesc: $("#DrawingDesc").val(),
        Status: $("#Status").val(),
    });
}




// ... other code ...

// Fetch data from the server
$.ajax({
    url: "/your-server-endpoint", // Replace with your server endpoint
    method: "GET",
    dataType: "json",
    success: function (data) {
        console.log("AJAX request successful");
        console.log("Response data:", data);
        var treeData = processSQLResult(data);
        // Update the FancyTree source after fetching the data
        console.log("Tree data:", treeData);
        tree.fancytree("option", "source", treeData);
    },
    error: function (xhr, status, error) {
        console.error("Failed to fetch data from the server:", error);
    },
});

});
`