クリックしたノードごとメニューを反映させる

質問内容・実現したいこと

各ノードをクリック→メニュー作成画面に遷移→メニュー作成後クリックしたノードにメニューが反映されている上記のような機能を実装したいです。メニュー画面に遷移するところまでは上手く動いてますが、メニューを作成してもクリックしたノードにメニューが反映されません。

現状発生している問題・エラーメッセージ

エラーメッセージは特にありません。

views/mypage/tree/index.html.erb
<!DOCTYPE html>
<html>

<head>
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/jsmind@0.8.1/style/jsmind.css" />
    <script type="text/javascript" src="https://unpkg.com/jsmind@0.8.1/es6/jsmind.js"></script>
    <script type="text/javascript" src="https://unpkg.com/jsmind@0.8.1/es6/jsmind.draggable-node.js"></script>
    <!-- 追加: jQueryを読み込む -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        #jsmind_container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 600px;
            width: 1000px;
            background-color: red;
        }

        a {
            text-decoration: none;
        }

        footer {
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="jsmind_container"></div>

    <script type="text/javascript">
        function onNodeClick(node) {
            // クリックされたノードの情報をサーバーに送信
            var nodeId = node.id;
            // ここでAjaxなどを使用してサーバーに情報を送信する
            $.ajax({
                url: '/menus/get_menu_details',
                method: 'POST',
                data: { node_id: nodeId },
                success: function(response) {
                    // サーバーからのレスポンスを処理
                }
            });
        }

        var mind = {
            "meta": {
                "name": "demo",
                "author": '',
            },
            "format": "node_array",
            "data": [
                { "id": "root", "isroot": true, "topic": "<a href='http://localhost:3000/menus/new'><%= j(render 'menu_details', menu: @menu) %></a>", 'background-color': '#fff' },

                { "id": "easy", "parentid": "root", "topic": "<a href='http://localhost:3000/menus/new'><%= j(render 'menu_details', menu: @menu) %></a>", "direction": "left", 'background-color': '#fff' },
                { "id": "easy2", "parentid": "easy", "topic": "<a href='http://localhost:3000/menus/new'><%= j(render 'menu_details', menu: @menu) %></a>", 'background-color': '#fff' },
                { "id": "easy3", "parentid": "easy", "topic": "<a href='http://localhost:3000/menus/new'><%= j(render 'menu_details', menu: @menu) %></a>", 'background-color': '#fff' },
                { "id": "easy4", "parentid": "easy", "topic": "<a href='http://localhost:3000/menus/new'><%= j(render 'menu_details', menu: @menu) %></a>", 'background-color': '#fff' },

            ]
        };
        var options = {
            container: 'jsmind_container',
            editable: true,
            theme: 'orange',
            // 追加: ノードがクリックされた時に呼び出されるコールバック
            onclick: onNodeClick
        };
        var jm = new jsMind(options);
        jm.show(mind);
    </script>
</body>

</html>

{ "id": "easy", "parentid": "root", "topic": "<a href='http://localhost:3000/menus/new'><%= j(render 'menu_details', menu: @menu) %></a>", "direction": "left", 'background-color': '#fff' },

このノードの部分で@menuではなくメニューのidを指定するとメニューが追加されることは確認してます。  

どの処理までうまく動いているのか jsmindを用いてツリー部分はブラウザに表示できています。

該当のソースコード

※背景はわかりやすいように一旦赤色にしてあります。また、ノードをクリック→メニュー画面に移動まではクリアしてます。メニューが追加されている場合にクリックするとそのメニューの詳細画面に遷移することも実装できてます。

エラーから考えられる原因エラーは特にありませんが、

試したことメニューIDを指定してブラウザに反映されるのかを確認しました。 →正しく表示がされています。

使用環境バージョン情報 Rails 5.2.8.1 ruby 2.6.5 jsmind

参考記事公式ドキュメント https://github.com/hizzgdev/jsmind/blob/master/README.md

Oba-eng / curry_web

クリックしたノードごとメニューを反映させる #21