URL тега шаблона Django не работает в JavaScript

Я хочу динамически добавить кнопку редактирования и удаления изображения в таблицу, но она выдает ошибку Страница не найдена по адресу Request URL: http://127.0.0.1:8000/%7B%25%20url%20'expense-edit'%20expense.id%20%25%7D

здесь находится js файл

const searchField = document.querySelector("#searchField");
const tableOutput = document.querySelector(".table-output");
const appTable = document.querySelector(".app-table");
const paginationContainer = document.querySelector(".pagination-container");
tableOutput.style.display = 'none';
const noResults = document.querySelector(".no-results");
const tbody = document.querySelector(".table-body");

searchField.addEventListener('keyup', (e) => {
    const searchValue = e.target.value;
    if (searchValue.trim().length > 0) {
        paginationContainer.style.display = "none";
        tbody.innerHTML = "";
        fetch("http://127.0.0.1:8000/search-expenses", {
            body: JSON.stringify({ searchText: searchValue }),
            method: "POST",
        })
            .then((res) => res.json())
            .then((data) => {
                console.log("data", data);
                appTable.style.display = "none";
                tableOutput.style.display = "block";
                console.log("data.length", data.length);
                if (data.length === 0) {
                    noResults.style.display = "block";
                    tableOutput.style.display = "none";

                }
                else {
                    noResults.style.display = "none";
                    data.forEach((item) => {
                        tbody.innerHTML += `
                            <tr>
                                <td>${item.amount}</td>
                                <td>${item.category}</td>
                                <td>${item.description}</td>
                                <td>${item.date}</td>
                                <td><a href="{% url 'expense-edit' expense.id %}" class="btn btn-secondary btn-sm">Edit</a><a href="{% url 'expense-delete' expense.id %}"><img src="{% static 'img/delete.png' %}" width="35" height="35"/></a></td>
                            </tr>`;
                    });
                }
            });
    }
    else {
        noResults.style.display = "none";
        tableOutput.style.display = "none";
        appTable.style.display = "block";
        paginationContainer.style.display = "block";
    }

});

urls.py


from django.urls import path
from . import views
from django.views.decorators.csrf import csrf_exempt

urlpatterns = [
    path('', views.home, name="home"),
    path('expenses', views.index, name='expenses'),
    path('add-expenses', views.add_expenses, name='add-expenses'),
    path('edit-expense/<int:id>', views.expense_edit, name='expense-edit'),
    path('expense-delete/<int:id>', views.delete_expense, name='expense-delete'),
    path('search-expenses', csrf_exempt(views.search_expenses), name='search_expenses'),
    path('expense_category_summary', views.expense_category_summary, name="expense_category_summary"),
    path('stats', views.stats_view, name="stats"),
    path('export_csv', views.export_csv, name="export-csv"),
    path('export_excel', views.export_excel, name="export-excel"),
    path('export_pdf', views.export_pdf, name="export-pdf"),    
]

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

Вместо этого: 

<a href="{% url 'expense-edit' expense.id %}" class="btn btn-secondary btn-sm">Edit</a><a href="{% url 'expense-delete' expense.id %}"><img src="{% static 'img/delete.png' %}" width="35" height="35"/></a></td>

Попробуйте этот способ: 

<a href="/edit-expense/{{ expense.id }}" class="btn btn-secondary btn-sm">Edit</a>

<a href="/expense-delete/{{ expense.id }}"><img src="{% static 'img/delete.png' %}" width="35" height="35"/></a></td>

Когда вы пишете {% url 'expense-edit' expense.id %}, вы используете специфический для Django "язык", называемый Django template language, что означает, что упомянутый синтаксис может быть "понят" только шаблонами Django.

Вы загружаете отдельный файл JavaScript, в котором синтаксис шаблона Django просто не будет работать, потому что когда браузер дойдет до момента оценки этого файла, {% url 'expense-edit' expense.id %} будет выглядеть просто еще одним строковым литералом, а не тем, что вы ожидаете.

Это должно работать, если вы вставите ваш пример JavaScript непосредственно в шаблон Django.

Итак, есть два возможных хака, чтобы сделать это:

Один - поместить написанный скрипт в ваш файл tenplate как:

<script type="text/javascript">
    const searchField = document.querySelector("#searchField");
    const tableOutput = document.querySelector(".table-output");
    
    ...

</script>

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

Другое решение - изменить имя файла с script.js на script.js.html и включить в нужный шаблон как :

...
{% include "my_app/script.js.html" %}
Вернуться на верх