How to combine jQuery UI dialog title change and open in one function call

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>

Dunhamzzz · Accepted Answer · 2012-05-22 13:39:02Z

2

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.

answered May 22, 2012 at 13:39

Dunhamzzz

14.8k4 gold badges54 silver badges74 bronze badges

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

Comments

Frédéric Hamidi · Accepted Answer · 2012-05-22 13:44:31Z

2

This is the standard way to call widget methods. All the methods exposed by a given widget (dialog in your case) are bridged into $.fn under the widget's name so they can be applied to jQuery objects.

However, if you want to avoid repeated calls to dialog(), you can get a reference to the widget instance and call its methods directly:

my_dlg.data("dialog").option("title", $(this).text()).open();

answered May 22, 2012 at 13:44

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

2 Comments

T.P. Over a year ago

I tried something similar to this to no avail. Will have to revisit this when I get to the shop. Are there any distinct advantages to this construct as opposed to the double method call?

Frédéric Hamidi Over a year ago

@jtp, it might be a little faster because the widget instance is only fetched once and the method bridge is avoided, but that probably won't be noticeable.

Collectives™ on Stack Overflow

How to combine jQuery UI dialog title change and open in one function call

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related