Arsing data object

I don't know how many times I've had to re-research this so this is the last time as I'm going to document it!

I really like jQuery UI modal dialogs but I always have trouble getting them to do the proper thing when they've closed! Poor Alex is forever reminding me after I've spent 20 fruitless minutes looking so I'll save his sanity by noting that you can pass data to some (maybe all) UI elements.

The use case was simply that some cells within a table had to be populated with user content, it needn't be saved to the server or anything, just needed to be displayed.

It's basically done like this:

$('.editableContent').on("click", function(event) {
    $("#dialog-form").find("textarea").val($(this).text());
    $("#dialog-form").data('bob', $(this)).dialog("open");
});

Here we're adding the existing content to the textarea in the first line of the function and then adding the calling object to the data of the dialog and calling it bob (hey, it's short enough ehh?)

Then, in the dialog code:

$("#dialog-form").dialog({
    autoOpen: false,
    height: 300,
    width: 350,
    modal: true,
    buttons: {
        "Add Content": function() {
            $(this).data('bob').text($(this).find("textarea").val());
            $(this).dialog("close");
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
    }
});

The important bit here is the line:

$(this).data('bob').text($(this).find("textarea").val());

Which calls the bob bit of the data object (giving us a reference to the original td) and populating it with the content of the text area. Bloody brilliant, now I shouldn't forget it!