I am currently trying to hook up jQuery UI
dialog so that I may use it to create new items to my page and to modify ones existing already on the page. I managed in the former. I'm currently struggling in the latter problem, however. I just cannot find a nice way to pass the item to modify to the
dialog.
Here's some code to illustrate the issue better. Note especially the part marked with XXX. The {{}} parts are derived from Django template syntax:
$(".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"
);
}
}
});
Here's some markup to show how the code relates to the structure:
<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>
