Question

I have a case where I need to update the title of a jQuery UI
dialog with a Part number whenever a table cell is double clicked.
The title would be obtained from the table cell’s value itself.

This snippet (below) from the actual code works, but it just doesn’t
seem correct to me since I have to call the dialog function twice: (1)
to change the title, and (2) open the dialog.

Is there a better way to combine both operations with a single call to
.dialog()?

JS Snippet

// Dialog declaration
var my_dlg = $('<div id="my-dlg">')
  .html(
    '<span class="part">FOO BAR</span>'
  )
  .dialog({
    autoOpen: false,
    title: 'Default Title',
    modal: true
  });

// Event handler
$('td.part').live('dblclick', function(){
  $(my_dlg)
    .dialog('option','title', $(this).text())
    .dialog('open');
});

HTML Snippet

<table>
<tr><td class="part">AB123456</td></tr>
<tr><td class="part">GX443459</td></tr>
<tr><td class="part">SK555455</td></tr>
</table>

Answer 1

This is the correct/only way of doing it as you have 2 events, the dialog opening itself, and the clicking of the table cell. That is also the correct way to alter any option in the jQuery UI dialog after you have instantiated it.

The only unnecessary thing you have done is stuck my_dlg in $() the second time you use it, which it doesn’t need to be as it’s already a jQuery object.