Не удается создать несколько подменю Dynami c, используя bootstrap 4 - PullRequest
0 голосов
/ 17 апреля 2020

У меня сейчас проблемы с созданием динамических подменю c с bootstrap. Используя простой запрос ajax, я хочу получить имя папки на моем сервере Django и затем отобразить выбранные элементы папки, создав несколько подменю. Я использую bootstrap 4, первый JS фрагмент работает как задумано, но я не могу заставить второй вести себя аналогичным образом и перебирать свой родительский объект.

HTML

<div class="dropdown show">
          <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Analyze
         </a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">

            <li class="dropdown-submenu">
              <a id='spec_library' class="dropdown-item dropdown-toggle" href="#">Library</a>
              <ul id='spec_lib' class="dropdown-menu">
                <!-- <li><a class="dropdown-item" href="#">History</a></li>
                <li><a class="dropdown-item" href="#">Geography</a></li>
                <li><a class="dropdown-item" href="#">Sociology</a></li> -->

              </ul>
            </li>

            <li><a class="dropdown-item" href="#">Upload</a></li>
          </ul>
        </div>

JS Первый фрагмент работает по назначению

$('#spec_library').on('click', function(e) {
        $.ajax({
        type: "GET",
        url: "spectro_lib",   /* Call python function in this script */
        /* Passing the text data */
        success: callback
    });

    function callback(response){
        console.log(response)
        instrument = response
        size = response.length;
        spec_lib = document.getElementById("spec_lib")
        console.log(spec_lib.childNodes.length)
        $("#spec_lib").empty();
        if (spec_lib.childNodes.length <= size){
            for (i = 0; i <= size - 1;i++){
                var spec_lib_x = "spec_lib_" + i
                var lib_submenu = document.createElement("li");
                lib_submenu.id= spec_lib_x
                lib_submenu.className="dropdown-item dropdown-submenu"
                document.getElementById("spec_lib").appendChild(lib_submenu)
                var lib_subitem = document.createElement("a");
                lib_subitem.id= "spec_lib_instrument"
                lib_subitem.className="dropdown-item dropdown-toggle"
                lib_subitem.href="#"
                lib_subitem.innerHTML = response[i]
                document.getElementById(spec_lib_x).appendChild(lib_subitem)
                var lib_subitem_ul = document.createElement("ul");
                lib_subitem_ul.id= response[i]
                lib_subitem_ul.className= "dropdown-menu"
                document.getElementById(spec_lib_x).appendChild(lib_subitem_ul)
            }
        }
    }
    e.stopPropagation();
});

Этот фрагмент должен создать второе подменю для выбранной папки, сейчас он просто пытается (безуспешно) создать дочерний объект с тем же именем своего родительского класса, что и у раскрывающегося элемента.

$('#spec_lib').on('click', function(e) {
    console.log("clicked " + e.target.innerText);
    console.log("clicked " + e.target.id);
    $.ajax({
        type: "GET",
        url: "spectro_lib_elem",   /* Call python function in this script */
        data: {'folder':e.target.innerText},/* Passing the text data */
        success: callback
    });

    function callback(response){
        var lib_submenu_li = document.createElement("li");
        lib_submenu_li.id="append_here"
        document.getElementById(e.target.innerText).appendChild(lib_submenu_li)
        var lib_submenu_a = document.createElement("a");
        lib_submenu_a.className = "dropdown-item"
        lib_submenu_a.innerHTML = e.target.innerText
        document.getElementById("append_here").appendChild(lib_submenu_a)
        console.log(response)
    }
    e.stopPropagation();

});

Это последнее событие щелчка не дает никаких ошибок и ничего не делает визуально. Я ценю обратную связь по способу установки мой код, так как в недавно начал javascript программирования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...