{% url%} и jquery

Question

Мои представления предоставят словарь "build_id", и есть другой ответ, генерирующий детали данного build_id. То есть второе представление "build_details" принимает параметр "build_id".

Поскольку у меня есть хотя бы один идентификатор из словаря, я собираюсь сгенерировать таблицу.

<table>
<tr>
<td> Number </td>
<td> Actions </td>
</tr>
{% for index, value in build_history.items %}
    <tr>
    <td> {{index}} </td>
    <td>
        <select id="action_menu">
        <option value=''>-----</option>
        <option value="build_{{value.build_id}}">Build Details</option>
        </select>
    </td>
</tr>

В каждой строке должно быть поле выбора. Когда я выбираю Build Details, я должен быть перенаправлен на другую страницу.

Моя попытка Jquery:

* * 1010

Ошибка:

Поймано NoReverseMatch при рендеринге: обратное для 'build_details' с аргументами '(' ',)' и ключевыми словами '{}' не найдено.

Я полагаю, что это среднее значение build_id не было правильно отображено ... потому что мы не создаем динамически build_id на стороне JS (на стороне браузера ..).

Что я могу сделать? Я знаю, что могу использовать hardcode http://mydomain и concaented build_id - это будет работать. Но могу ли я воспользоваться тегами шаблона? Как мне этого добиться?

Спасибо.

---

Окончательный рабочий код

Предполагая, что у меня есть переменная, содержащая длину словаря, когда у нас есть кратное число <select> с тем же именем, сервер обрабатывает его, как если бы это была одна сущность. Поэтому мы можем использовать имя класса и дать каждому <select> (в каждой строке есть один) уникальный числовой идентификатор.

# Javascript
<script type="text/javascript">
    urlMap = {
    {% for index, value in build_history.items %}
        '{{ value.build_id }}' : '{% url build_details value.build_id %}'{% if not forloop.last %},{% endif %}
    {% endfor %}
    };

    $(function() {
        var item_len = parseInt({{dict_len}});
        for (var i = 0; i < item_len; i++){
            $("#"+i.toString()+".action").change(function() {
                  if($(this).val() != '')
                     window.location.href = urlMap[$(this).val()];
            }
        )
    }});
</script>

# HTML (this is a table, each row has one select)

        <select class="action" id={{index}}>
        <option value=''>-----</option>
        <option value="{{ value.build_id }}">Build Details</option>
        </select>

Answer 1

JavaScript на 100% несовместим с шаблоном django. Шаблон django отображает HTML и Javascript, затем запускается javascript - в этот момент теги шаблона даже не существуют.

Вам нужно будет сохранить значение параметра -> комбинации URL с django в массиве javascript.

### Javascript map

urlMap = {
    {% for value in build_history.values %}
        {{ value.build_id }}: '{% url build_details value.build_id %}'
        {% if not forloop.last %},{% endfor %}
    {% endfor %}
};

function onSelectChange(){
    var select = $("#action_menu option:selected");
    if(!(select.val() == ""))
        var build_id = select.val().replace('build_','');
        window.location.href=urlMap[build_id];
}

Вы также можете использовать функцию jQuery data для привязки данных к элементу:

### Jquery data

{% for value in build_history.values %}
    $("#action_menu option[value=build_{{ value.build_id }}]")
             .data('href', '{% url build_details value.build_id %}');
{% endfor %}


function onSelectChange(){
    var select = $("#action_menu option:selected");
    if(!(select.val() == ""))
        window.location.href=select.data('href');
}

---

Пожалуйста, скопируйте и вставьте это.

<script type="text/javascript">
    urlMap = {
    {% for index, value in build_history.items %}
        '{{ value.build_id }}' : '{% url build_details value.build_id %}'{% if not forloop.last %},{% endif %}
    {% endfor %}
    };

    $(function() {
         $("#foo").change(function() {
            window.location.href = urlMap[$(this).val()];
        });
    })
</script>
<select id="foo">
    <option value="">---</option>
    {% for index, value in build_history.items %}
      <option value="{{ value.build_id }}">Build Details</option>
    {% endfor %}
</select>