How to pass parameter to jQuery dialog event handler?

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';

            //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 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>
+3
source share
3 answers

, var;)

event.target - , .

.

$('.sel').bind('dialogcreate', function(event, ui) {
event.target.innerHTML = 'new content';
});
+3

, :

$("#modify_exercise").dialog('open');

$("#modify_exercise").data('exercise_name',$(this).text());

post_values.exercise_name = 'foobar';

 post_values.exercise_name = $(this).data('exercise_name');
+5

, , , , , , ?

: http://jsfiddle.net/NJa4U/

, currentItem .

+1

Source: https://habr.com/ru/post/1747569/


All Articles