jQuery UI dialog - grab text from table DIV and show - only happens on first click

Question

I'm trying to get some text in a table cell into a jQuery UI dialog dynamically, firing from a link in the table (one for each row). It works for each link once, but thereafter it stops.

Here's my Javascript:

$(function() {
        $( ".abstractlink" ).click(function() {
            $( $(this).parent().find('.abstract') ).dialog({
            modal: true,
            autoOpen: true,
            height: "auto",
            width: "600",
            draggable: "true",
            title: "Project abstract",
            resizable: "false"
            });
        });
    });

The problem is (I think) that I'm re-initialising the dialog each time a link is clicked. Trouble is, I need to change the DIV which is to be displayed each time a link is clicked (hence finding the element with the class 'abstract' in the parent (TR) element.

Here's the relevant part of the table's code:

<tr>
    <td><a href="javascript:;" class="abstractlink">View</a><div class="abstract" id="project_abstract_3">Project 3 abstract. Lorem ipsum.</div></td>
</tr>

I have a strong feeling that this isn't a very elegant way of solving this problem, but as I'm still new to jQuery I am so I was glad I got this far.

Any suggestions much appreciated!

Answer 1

The Docs say:

A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close').

More info here.

Edit: Warning, untested code:

$(function() {
    $(".abstract").dialog({
        modal: true,
        autoOpen: false,
        height: "auto",
        width: "600",
        draggable: "true",
        title: "Project abstract",
        resizable: "false"
    });

    $('.abstractlink').click(function() {
        $(this).parent().find('.abstract').dialog('open');
    });

You're not creating one dialog box, you're creating a dialog box for every abstract div. Then, you're telling them to open when needed.