Блог

Приведенный ниже шаблон не вызывает проблем, если я запускаю его в том же html-шаблоне. Но если я помещу код jQuery в country_dropdown.js внешний файл внутри статической папки, и я включаю его вот так:

 <script  src="{% static 'js/countries.js' %}"></script>
 

затем следует следующее:

 url: "{% url 'get-province' %}",
 

не получится.

Похоже, что теги {% не распознаются внутри внешних файлов js, даже если они должны быть распознаны. На самом деле запрошенное отображается таким образом:

 Request URL:    http://127.0.0.1:8000/countries/{% url 'get-province' %}
 

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

Но, поскольку я буду использовать ту же функциональность и тот же раскрывающийся список в нескольких местах, было бы очень хорошей практикой поместить 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 %}