{%url%}和jquery
“我的视图”将提供一个build_id字典,还有另一个视图负责生成给定build_id的详细信息。即,第二个视图build_details包含一个参数build_id 因为字典中至少有一个ID,所以我将生成一个表{%url%}和jquery,jquery,django,django-templates,Jquery,Django,Django Templates,“我的视图”将提供一个build_id字典,还有另一个视图负责生成给定build_id的详细信息。即,第二个视图build_details包含一个参数build_id 因为字典中至少有一个ID,所以我将生成一个表 <table> <tr> <td> Number </td> <td> Actions </td> </tr> {% for index, value in build_history.items %}
<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>
问题是:
渲染时捕获到NoReverseMatch:反转“build_details”
找不到参数“,”和关键字参数“{}”
我相信这意味着构建id没有正确呈现。。。因为我们不是在JS端浏览器端动态构建build_id
我能做什么?我知道我可以使用硬代码和concaented build_id-这将起作用。但是我可以利用模板标签吗?我怎样才能做到这一点
谢谢
最终工作代码
假设我有一个包含字典长度的变量,当我们有同名的mutliple时,服务器将其视为一个实体。因此,我们可以使用名称命名一个类,并为每一行指定一个唯一的数字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>
JavaScript与django模板100%不兼容。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的数据函数将数据绑定到元素:
### 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>
我一直在考虑这个问题——保留一个JS数组。从视图来看,JSON是更好的选择吗?谢谢。AJAX可以工作,但我认为这不是合适的地方。存储数据的方法有很多种——我刚刚更新了一个将build_id映射到其URL的示例。另一个想法是使用jquery数据绑定,我将在稍后发布。谢谢。但是重定向提供了这个url。事实上,$this.date'href'给出了未定义的。这是什么意思?应该是select.data'href'-我知道你不仅仅使用了$action\u menu.change。无论如何,你可以随时使用地图!我将粘贴一个完整的工作示例,只是复制并粘贴它,看看它是否工作。马上更新。。
### 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>