У меня сейчас проблемы с созданием динамических подменю 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 программирования.