Django / python, дублируются запросы на сервер
я неопытный кодер и впервые пишу большой сайт на django, возникла проблема, я динамически загружаю контент в различные блоки/секции (одна страница, контент меняется), и при любом действии дублируется запрос, нажал на кнопку которая выводит в консоль 1 сообщение выводится 2, нажал на кнопку загрузки файла открывается еще одно окно сразу же после первого. Немного не ясно почему так, как я заметил если на странице ничего динамически в секции/блоки не загружать запросы не дублируются.
Как выглядит нажатие на кнопку home в терминале
[27/Apr/2024 04:02:39] "GET /home/ HTTP/1.1" 200 7581
[27/Apr/2024 04:02:39] "GET /home/ HTTP/1.1" 200 7581
Как это выглядит из консоли браузера
button-next clicked navbar-releases.js:145
button-next clicked VM12641 navbar-releases.js:145
Из интернетов выяснил, что это, как я понял, анонимные функции и их обработчики так работают, подскажите как починить.
Layout.html файл, в который подгружаю все.
<!-- main section -->
<section id="main-section">
<!-- leftside menu section -->
{% block menu-section %}
{% include 'home/menu.html' %}
{% endblock %}
<!-- rightside homepage section -->
{% block content-section %}
{% endblock %}
</section>
Menu html меню из боковой панели
<div id="lnk-home"><img id="icon-nav" src="{% static 'home/img/icoHome.svg' %}"></img>Home</div>
<div id="lnk-releases"><img id="icon-nav" src="{% static 'home/img/icoMusic.svg' %}"></img>Releases</div>
<div id="lnk-statistics"><img id="icon-nav" src="{% static 'home/img/icoStats.svg' %}"></img>Statistics</div>
<div id="lnk-wallet"><img id="icon-nav" src="{% static 'home/img/icoMoney.svg' %}"></img>Wallet</div>
<div id="lnk-support"><img id="icon-nav" src="{% static 'home/img/icoHelp.svg' %}"></img>Support</div>
<div id="lnk-settings"><img id="icon-nav" src="{% static 'home/img/icoSettings.svg' %}"></img>Settings</div>
<div id="lnk-logout"><img id="icon-nav" src="{% static 'home/img/icoLogout.svg' %}"></img>Logout</div>
menu js который отвечает за обработчики на кнопках меню
document.addEventListener('DOMContentLoaded', function () {
// Получаем все кнопки меню по их id
var lnkHome = document.getElementById('lnk-home');
var lnkReleases = document.getElementById('lnk-releases');
var lnkStatistics = document.getElementById('lnk-statistics');
var lnkWallet = document.getElementById('lnk-wallet');
var lnkSupport = document.getElementById('lnk-support');
var lnkSettings = document.getElementById('lnk-settings');
var lnkLogout = document.getElementById('lnk-logout');
// Добавляем обработчики события клика для каждой кнопки
lnkHome.addEventListener('click', function () {
loadContent('home');
});
lnkReleases.addEventListener('click', function () {
loadContent('releases');
});
lnkStatistics.addEventListener('click', function () {
loadContent('statistics');
});
lnkWallet.addEventListener('click', function () {
loadContent('wallet');
});
lnkSupport.addEventListener('click', function () {
loadContent('support');
});
lnkSettings.addEventListener('click', function () {
loadContent('settings');
});
lnkLogout.addEventListener('click', function () {
loadContent('logout');
});
// Функция для загрузки контента
function loadContent(sectionId) {
// Загружаем только содержимое раздела с использованием AJAX
$('#content-section').load('/' + sectionId + ' #content-section');
}
});
UPD. Не знаю что думать, может быть накосячил с ссылками из ulrs.py, по несколько раз может вызываются
urls.py (главное приложение)
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('main.urls')),
path('home/', include('home.urls'), name='home'),
path('releases/', releases, name='releases'),
path('new-release/', newRelease, name='new-release'),
path('all-releases/', allReleases, name='all-releases'),
path('moderation-releases/', moderationReleases, name='moderation-releases'),
path('drafts-releases/', draftsReleases, name='drafts-releases'),
path('on-delete-releases/', onDeleteReleases, name='on-delete-releases'),]
urls.py (приложение, где использую динамическую подгрузку)
urlpatterns = [
path('', views.home),]
Если кто с такой проблемой столкнётся: проблема в include была, а конкретно, использовал include для помещения меню на layout.html, что приводило к двойным срабатываниям событий обработчиков (файл 2 раза был включен на страницу вместе с обработчиками), вместо динамической загрузки меню решил вставить его на страницу без динамической загрузки.
Файл layout.html, вместо {% include 'home/menu.html' %}
<!-- leftside menu section -->
{% block menu-section %}
{% include 'home/menu.html' %}
{% endblock %}
<!-- rightside homepage section -->
{% block content-section %}
{% endblock %}
Вставил без динамической подгрузки:
<body>
<!-- main section -->
<section id="main-section">
<!-- leftside menu section -->
<section id="menu-section">
<img id="logo-img"src="{% static 'home/img/logoText.svg' %}" alt="Image"></img>
<img id="small-logo-img"src="{% static 'home/img/logoSmall.svg' %}" alt="Image"></img>
<div id="lnk-home"><img id="icon-nav" src="{% static 'home/img/icoHome.svg' %}"></img>Home</div>
<div id="lnk-releases"><img id="icon-nav" src="{% static 'home/img/icoMusic.svg' %}"></img>Releases</div>
<div id="lnk-statistics"><img id="icon-nav" src="{% static 'home/img/icoStats.svg' %}"></img>Statistics</div>
<div id="lnk-wallet"><img id="icon-nav" src="{% static 'home/img/icoMoney.svg' %}"></img>Wallet</div>
<div id="lnk-support"><img id="icon-nav" src="{% static 'home/img/icoHelp.svg' %}"></img>Support</div>
<div id="lnk-settings"><img id="icon-nav" src="{% static 'home/img/icoSettings.svg' %}"></img>Settings</div>
<div id="lnk-logout"><img id="icon-nav" src="{% static 'home/img/icoLogout.svg' %}"></img>Logout</div>
</section>
<!-- rightside homepage section -->
{% block content-section %}
{% endblock %}
</section>
<script src="{% static 'home/js/navbar-releases.js' %}"></script>
<script src="{% static 'home/js/menu-buttons.js' %}"></script>