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>