Как включить и выполнить JavaScript в шаблонах Django?

Я прочитал много других вопросов и ответов, и, конечно, документацию. Однако я все еще не могу заставить мой JS-код работать внутри моих шаблонов.

base.html

{% load static %}
{% load i18n %}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %}{% translate "DaniMundo" %}{% endblock title %}</title>
<link href="{% static 'css/default.css' %}" rel="stylesheet" type="text/css" media="all" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<aside>
{% include "navigation.html" %}
</aside>
<main>
{% block content %}{% endblock content %}
</main>

<script src="{% static 'js/clipboard.js' %}"></script>
<script src="{% static 'js/custom.js' %}"></script>
</body>
</html>

blog/article_details.html

{% extends "base.html" %}
{% load i18n %}
{% load custom_filters %}

{% block title %}{{ article.title }} | {{ block.super }}{% endblock title %}

{% block content %}
<article>
<header>
<h1 class="title">{{ article.title }}</h1>
<p>{% translate "Date of publication:" %} {{ article.date_created }}</p>
<p>{% include "blog/article_authors.html" %}</p>
</header>
<p class="summary">{{ article.summary }}</p>
{{ article.body|markdown|safe }}
{% if article.date_updated != article.date_created %}<p>{% translate "Last update:" %} {{ article.date_updated }}</p>{% endif %}<hr />
<div class="comments">
{% include "blog/comments.html" with article_path=article.get_absolute_url article_slug=article|full_slug %}
</div>
</article>
{% endblock content %}

custom.js

function checkAnswer(origin) {
var question_name = $(origin).attr("data-question");
var correct_answer_element = $(origin).attr("data-correct");
var correct_answer_id = $("#"+correct_answer_element).val();
var correct_answer_label = $("label[for="+correct_answer_id+"]").text();
var chosen_answer_id = $("input[name="+question_name+"]:checked").attr("id");
var chosen_answer_label = $("label[for="+chosen_answer_id+"]").text();
if(correct_answer_id == chosen_answer_id) {
alert("Bravo!");
}
else {
alert("Hmmm... no. \n" + correct_answer_label);
}
$("input[name="+question_name+"]").attr("disabled", true);
}

Как вы, вероятно, ожидаете, comments.html содержит скрипт disqus. Он также не работает. Я попытался скопировать содержимое custom.js непосредственно в конец как base.html, так и article_details.html, ничего не изменилось.

Для полноты картины отмечу, что origin в custom.js относится к кнопке, которая выглядит следующим образом:

<button data-question="question1" data-correct="question1_correct" onclick="checkAnswer(this)">Answer</button>

Итак, как мне заставить JS-код работать в шаблонах Django?

Как всегда в таких ситуациях, когда что-то, что должно работать, просто не работает, это была простая ошибка. Значение for (и любое другое значение атрибута, кстати) должно быть заключено в кавычки в селекторах jQuery в custom.js.

function checkAnswer(origin, correct_answer_message="Great!", wrong_answer_message="Hmmm... no.") {
    var question_name = $(origin).attr("data-question");
    var correct_answer_element = $(origin).attr("data-correct");
    var correct_answer_id = $("#"+correct_answer_element).val();
    var correct_answer_label = $("label[for='"+correct_answer_id+"']").text();
    var chosen_answer_id = $("input[name='"+question_name+"']:checked").attr("id");
    var chosen_answer_label = $("label[for='"+chosen_answer_id+"']").text();
    if(correct_answer_id == chosen_answer_id) {
        alert(correct_answer_message);
    }
    else {
        alert(wrong_answer_message + " \n" + correct_answer_label);
    }
    $("input[name="+question_name+"]").attr("disabled", true);
}

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

Конечно, скрипт disqus теперь тоже работает :)

Вернуться на верх