Проблема включения внешнего JQuery в шаблон Django
Приведенный ниже шаблон не имеет проблем, если я запускаю его внутри того же html-шаблона. Но если я помещу код JQuery во внешний файл country_dropdown.js внутри папки static и включу его так:
<script src="{% static 'js/countries.js' %}"></script>
тогда следующее:
url: "{% url 'get-province' %}",
не будет работать.
Похоже, что теги {% не распознаются внутри внешних js файлов, хотя должны. На самом деле запрашиваемое отображается так:
Request URL: http://127.0.0.1:8000/countries/%7B%25%20url%20'get-province'%20%25%7D
Очевидно, что %7B означает {, а %25 означает %. Поэтому теги шаблона не распознаются должным образом вне шаблона.
Но, поскольку я буду использовать одну и ту же функциональность и один и тот же выпадающий список в нескольких местах, было бы очень хорошей практикой поместить JQuery во внешний файл и включать его, когда он мне нужен, вместо того, чтобы дублировать его в каждом шаблоне, где он необходим.
Как я могу включить внешний JQuery без проблем? Я включил полный шаблон здесь.
{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% block content %}
<form class="" action="" method="post">
{% csrf_token %}
{% for error in errors %}
<div class="alert alert-danger mb-4" role="alert">
<b>{{ error }}</b>
</div>
{% endfor %}
current {{ lang }}
<div class ="row">
<div class="col-lg-6">
<div class="mb-4">
{{ form.country }}
</div>
</div>
</div>
<div class="row">
<br><br>
<div class="col-lg-6">
<div class="mb-4">
<div class="form-group">
<label>{% trans "Select a Province/State" %}</label>
<select id="id_province" class="form-control" name="state">
<option value="----">{% trans "Select Province/State" %}</option>
</select>
</div>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--<script src="{% static 'js/countries.js' %}"></script>-->
<script>
$("#id_country").change(function(){
var countryId = $(this).val();
/* if country changes reset city list */
//$("#id_city").html("");
$.ajax({
type: "POST",
url: "{% url 'get-province' %}",
data: {
'csrfmiddlewaretoken': '{{ csrf_token }}',
'country': countryId
},
success: function (data){
console.log(data.provinces);
data.provinces = data.provinces.sort(function(a, b){
if (a[1] < b[1]) return -1;
if (a[1] > b[1]) return 1;
return 0;
});
let html_data = '';
if (data.provinces.length !== 0) {
html_data = '<option value="-----">{% trans "Select State" %}</option>';
data.provinces.forEach(function(data){
html_data += `<option value="${data[0]}">${data[1]}</option>`
});
}else{
html_data = '<option value="-----">{% trans "No states available for this country" %}</option>';
}
$("#id_province").html(html_data);
}
});
});
</script>
{% endblock %}