Question

I’m using a jQuery sortable list in which you can drop (clone) items from a draggable list. I want the user to be able to change some text on a dropped element. So I display the value and I hold a copy in a hidden input field.

On click of any of the elements, a jquery dialog opens and the text is set in a text input in the dialog. On close, the new value is set back again on the element text and the hidden input.

How can the dialog know which element requested the text change?

Right now I’m using a global var to hold that information. But I think it’s ugly. There must be some way to give the sender to the dialog.open?

// Global for holding the dialog sender
var dialogSender = null;

// Edit element
$('.element').live('click', function() {
    dialogSender = $(this);
    // prev() is the hidden input
    $('#dialog-form input[name=content]').val($(this).prev().val());
    $('#dialog-form').dialog('open');
});

// Dialog for editing elements
$('#dialog-form').dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        'Ok': function() {
            val = $('#dialog-form input[name=content]').val();
            // Set the text back to the element and the hidden input
            dialogSender.text(val).prev().val(val);
            $(this).dialog('close');
        },
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

Answer 1

You can use data() to associate the button that was clicked with your dialog widget, then read back that information in your Ok button handler:

$(".element").live("click", function() {
    var $this = $(this);
    // prev() is the hidden input
    $("#dialog-form input[name=content]").val($this.prev().val());
    $("#dialog-form").data("dialogSender", $this).dialog('open');
});

---

'Ok': function() {
    var $this = $(this),
        val = $("#dialog-form input[name=content]").val();
    // Set the text back to the element and the hidden input.
    $this.data("dialogSender").text(val).prev().val(val);
    $this.dialog("close");
},