How to pass a parameter to jQuery UI dialog event handler?

Question

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>

azatoth · Accepted Answer · 2010-05-28 23:23:47Z

5

Perhaps following might suit your taste better:

Before $("#modify_exercise").dialog('open');, add

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

and in the button callback, replace post_values.exercise_name = 'foobar'; with

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

answered May 28, 2010 at 23:23

azatoth

2,37915 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zaqwsx · Accepted Answer · 2011-06-14 08:16:16Z

3

if you're working with eventhandlers you might want to use the event object instead of some global var ;)

event.target is what you're looking for.

e.g.

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

answered Jun 14, 2011 at 8:16

Zaqwsx

7,8132 gold badges18 silver badges10 bronze badges

1 Comment

Ryley Over a year ago

Ah, that does seem better than mine assuming it fits with how he needs to use it, upvotes for you.

Ryley · Accepted Answer · 2010-05-28 16:41:21Z

1

I can't think of how there is a connection between the clicked event and the dialog, so maybe the answer is just to use a global variable to store the name after each click event, and then use that in your dialog?

I've demonstrated this idea here: http://jsfiddle.net/NJa4U/

See how currentItem is used in that code.

answered May 28, 2010 at 16:41

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

1 Comment

Juho Vepsäläinen Over a year ago

Global variable will do for now. Thanks. It would be nicer if a dialog had access to its "parent" element (the one that invoked it), though.

Collectives™ on Stack Overflow

How to pass a parameter to jQuery UI dialog event handler?

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related