{％url％}和jquery [英] {% url %} and jquery

问题描述

我的视图将给出"build_id"的字典，还有另一个视图负责生成给定build_id的详细信息.也就是说，第二个视图"build_details"采用参数"build_id".

My views will give a dictionary of "build_id", and there is another view responbile generating the details of a given build_id. I.e., the second view "build_details" takes in a parameter "build_id".

因为我从字典中至少有一个ID，所以我将生成一个表.

Because I have at least one ids from the dictionary, I am going to generate a table.

<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 (构建详细信息)时，应将我重定向到其他页面.

Each row should have a select box. When I select Build Details I should be redirected to a different page.

我的Jquery尝试:

My Jquery attempt:

function onSelectChange(){
    var select = $("#action_menu option:selected");
    if(!(select.val() == ""))
        var build_id = select.val().replace('build_','');
        window.location.href="{% url build_details build_id %}";
}
</script>

问题错误是:

渲染时捕获到NoReverseMatch:反转为'build_details'找不到参数'(''，)'和关键字参数'{}'.

Caught NoReverseMatch while rendering: Reverse for 'build_details' with arguments '('',)' and keyword arguments '{}' not found.

我相信这意味着build_id不能正确呈现...因为我们没有在JS端(浏览器端..)动态构建build_id.

I believe this mean build_id was not rendered properly... because we are not dynamically building up the build_id on the JS side (browser side..).

我该怎么办?我知道我可以使用硬编码 http://mydomain 并使用合适的build_id-这将起作用.但是我可以利用模板标签吗?我该如何实现?

What can I do? I know I can use hardcode http://mydomain and concaented build_id - this will work. But can I take advantage of template tags? How can I achieve this?

谢谢.

最终工作代码

假设我有一个包含字典长度的变量，当我们有多个具有相同名称的< select> 时，服务器会将其视为一个实体.因此，我们可以为类命名，并为每个< select> (每一行都有一个)赋予唯一的数字ID.

Assuming I have a variable contains the length of the dictionary, when we have mutliple <select> with the same name, server treats it as if it was one entity. Therefore, we can use name a class, and give each <select> (each row has one) an unique numeric ID.

# 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>

推荐答案

JavaScript与django模板100％不兼容.django模板呈现HTML和Javascript，然后运行javascript-此时，模板标记甚至不存在.

JavaScript is 100% incompatible with the django template. The django template renders HTML and Javascript, then the javascript runs - at that point, template tags do not even exist.

您将必须在JavaScript数组中存储选项值->带有django的URL组合.

You'll have to store option value -> URL combinations with django in a javascript array.

### 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 函数将数据绑定到元素:

You could use jQuery's data function to bind data to an element too:

### 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');
}

---

请复制并粘贴.

---

Please copy and pasting this.

<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>

这篇关于{％url％}和jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！