我目前正在尝试连接 jQuery UI 对话框,以便我可以使用它在我的页面上创建新项目并修改页面上已有的项目。我在前者中做到了。然而,我目前正在为后一个问题而苦苦挣扎。我只是找不到一种好的方法来将要修改的项目传递到对话框。
这里有一些代码可以更好地说明这个问题。特别注意标有XXX的部分。 {{}} 部分源自 Django 模板语法:
$(".exercise").click(function() {
$.post("{{ request.path }}", {
action: "create_dialog",
exercise_name: $(this).text()
},
function(data) {
$("#modify_exercise").html(data.content);
},
"json"
);
$("#modify_exercise").dialog('open');
});
$("#modify_exercise").dialog({
autoOpen: false,
resizable: false,
modal: true,
buttons: {
'{% trans 'Modify' %}': function() {
var $inputs = $('#modify_exercise :input');
var post_values = {};
$inputs.each(function() {
post_values[this.name] = $(this).val();
});
post_values.action = 'validate_form';
//XXX: how to get the exercise name here?
post_values.exercise_name = 'foobar';
$.post('{{ request.path }}', post_values,
function(data) {
if( data.status == 'invalid' ) {
$('#modify_exercise').html(data.content);
}
else {
location.reload();
}
},
"json"
);
}
}
});
以下是一些标记,用于显示代码与结构的关系:
<div id="modify_exercise" class="dialog" title="{% trans 'Modify exercise' %}">
</div>
<ul>
{% for exercise in exercises %}
<li>
<a class="exercise" href="#" title="{{ exercise.description }}">
{{ exercise.name }}
</a>
</li>
{% endfor %}
</ul>
也许以下可能更适合您的口味:
Before $("#modify_exercise").dialog('open');
, add
$("#modify_exercise").data('exercise_name',$(this).text());
并在按钮回调中,替换post_values.exercise_name = 'foobar';
with
post_values.exercise_name = $(this).data('exercise_name');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)