I'm currently trying to connect the jQuery UI dialog so that I can use it to create new elements on my page and to modify existing ones on the page. I succeeded in the first. However, I am currently struggling with the latter issue. I just can't find a good way to pass the item to change in the dialog box.
Here is some code to better illustrate the problem. Pay attention, especially to the part marked XXX. The elements {{}} are derived from the syntax of the Django template:
$(".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';
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 is 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>
source
share