Javascript код не работает с использованием шаблона наследования в Django шаблоне - PullRequest
Новая
       26

Javascript код не работает с использованием шаблона наследования в Django шаблоне

0 голосов
/ 03 мая 2020

У меня проблемы с выполнением кода Javascript в проекте Django.

Следующее работает нормально - т.е. без использования наследования шаблонов

html: 

    <!DOCTYPE html>

    <html>

    <head>
    {% load static %}
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

    <script src="{% static 'ads/test.js' %}" type="text/javascript"></script>

    <title> Test </title>

    </head>

    <body>

      <form action="{% url 'test' %}" method="post" id="my_form">
        {% csrf_token %}
        <button type="submit" class="btn btn-success">Submit</button>
      </form>

    </body>
   </html>

test. js

$(document).ready(function() {
$("#my_form").submit(function(){

alert('submitted');

});
});

Так как описанный выше внешний тест Javascript file. js успешно выполнен, я предполагаю настройки stati c url, stati c dirs и др. c. верны. Кроме того, поскольку jquery сработало, я предполагаю, что сначала порядок jquery, затем код js также правильный.

Проблема возникает, когда я использую шаблонное наследование.

base html: 

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

{% block scripts %}
{% endblock %}

<title> {% block title %}{% endblock %} </title>

</head>

<body>

{% block body %}
{% endblock %}

</body>
</html>

унаследованный шаблон: 


{% extends "base.html" %}

{% block scripts %}
{% load static %}
<script src="{% static 'ads/test2.js' %}" type="text/javascript"></script>
{% endblock %}

{% block title %}
 Test
{% endblock %} 

{% block body %}
<form action="{% url 'test' %}" method="post" id="my_form">
    {% csrf_token %}
    <button type="submit" class="btn btn-success">Submit</button>
</form>
{% endblock %}

Однако вышеприведенное не работает, т.е. при отправке кнопки ничего не происходит. Единственное изменение - это наследование шаблона - без него код js работает, но при его включении что-то идет не так.

В Chrome - Проверка - Сеть, тестовый файл. js не загружается - но файлы bootstrap, popper, jquery js считаются загруженными. Chrome консоль не показывает ошибок

Что-то не так в том, как я расширяю базовый шаблон или наследую его?

1 Ответ

0 голосов
/ 03 мая 2020

Я думаю, вы должны загрузить stati c вверху после расширения, но не внутри блока. Итак, попробуйте что-то вроде этого: 

{% extends "base.html" %}
// My change
{% load static %}

{% block scripts %}
// Changed from
<script src="{% static 'ads/test2.js' %}" type="text/javascript"></script>
{% endblock %}

{% block title %}Test{% endblock %} 

{% block body %}
<form action="{% url 'test' %}" method="post" id="my_form">
    {% csrf_token %}
    <button type="submit" class="btn btn-success">Submit</button>
</form>
{% endblock %}
...