Django обновляет содержимое HTML-элемента на той же странице на основе выбранного элемента

Название немного расплывчатое, так как я не смог придумать, как подытожить это.

У меня есть 3 модели django. Давайте назовем их корень, ветвь, лист, чтобы было проще. Корень может иметь несколько ветвей, а каждая ветвь может иметь несколько листьев.

В моем шаблоне я отображаю кнопки, которые заполняются из корневых объектов. Когда пользователь нажимает на одну из этих кнопок, я хотел бы обновить содержимое другого элемента на той же странице со всеми ветвями, которые являются дочерними объектами этого корня. Когда нажимается ветвь, я хотел бы обновить другой элемент со всеми листьями. Я предполагаю, что процесс будет одинаковым для двух обновлений.

Я довольно новичок в Django, но не в программировании, и я не могу найти хорошее объяснение того, как определить, какой 'root' был нажат и передать это обратно в django, чтобы заполнить элементы ветки.

Может ли кто-нибудь предложить некоторые рекомендации? Возможно, мне не нужен код, просто большее представление о том, что такое рабочий процесс. Например, использовать onclick для отправки имени нажатого элемента в функцию javascript, вызвать функцию python, которая получает все ветки, сделать некоторую магию.......

Спасибо Мик

Это больше относится к JS, чем к Django. Есть два варианта, насколько я знаю, для того типа динамического контента, который вы хотите:

  • Вы можете загрузить все "дерево" (все корни, ветви и листья) со стилем отображения none и затем изменить соответствующие стили на другие значения (block или inline) с помощью javascript при нажатии кнопки. Функция onClick будет выглядеть примерно так для ветви.
function displayBranch(branchId){
  for(let branch of document.getElementsByClass("branch-class"){
    branch.style.display = "none"
    if(branch.id == branchId) branch.style.display = "block"

  }
}
  • Или вы можете не загружать ничего, но добавить конечные точки в ваш Django API для отправки веток и листьев, а затем использовать вызовы AJAX для их получения при нажатии кнопки. Этот вариант требует больше кода, поэтому я не буду приводить код, но предполагаю, что вы знаете основы AJAX и как создать новые конечные точки в вашем приложении.
Вернуться на верх