Programmatically trigger events on jQuery UI dialog

Question

I have a jQuery dialog, and I use the open callback to load some data into via AJAX.

For example:

$('#dialog').dialog({
    modal: true,
    autoOpen: false,
    open: function(){
        $('.content', this).load('/path/to/file', function(){
            // even more code
        });
        // more code
    }
});

While the dialog is already open, I want to re-load the data via AJAX. I figured that I could just trigger the open function I bound above. I read in the docs that you can bind to that open event using $(".selector").bind("dialogopen", function(event, ui){}), so I figured I could trigger the event that way too.

I tried $('#dialog').trigger('dialogopen'), but nothing happened. How can I trigger the open event of a jQuery dialog?

Currently, I figured out that I could use $('#dialog').dialog('option', 'open')(), but that's ugly, there's gotta be a better way!

Selvakumar Arumugam · Accepted Answer · 2012-10-25 18:49:56Z

3

You can rewrite what you have as like $('#dialog').dialog('option')['open']() (ugly again)

Which can be beautified as,

var $dOpt = $('#dialog').dialog('option');

and then

$dOpt.open();

DEMO: http://jsfiddle.net/bj4hK/2/

I think you are looking for $('#dialog').dialog('open') http://jsfiddle.net/bj4hK/

Other dirty trick is to close and reopen. $('#dialog').dialog('close').dialog('open') <- However this would mess up if you have some code onclose

edited Oct 25, 2012 at 18:49

answered Oct 25, 2012 at 18:01

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

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

3 Comments

gen_Eric Over a year ago

That doesn't seem to work if the dialog is already open. That's what I want. jsfiddle.net/NTICompass/bj4hK/1

gen_Eric Over a year ago

Hmm, I didn't realize $('#dialog').dialog('option') returned an object.

jherax Over a year ago

Uglyfied but prevents an error when dialog not exists: ($("#dialog").dialog('option')['close'] || function(){})();

gen_Eric · Accepted Answer · 2012-10-25 18:06:39Z

1

why dont you just extract the function in the open event and reuse it wherever you want to?

$('#dialog').dialog({
    modal: true,
    autoOpen: false,
    open: function(){
        loadfunction()
    }
});

function loadfunction(){
  $('.content').load('/path/to/file', function(){
            // even more code
        });
        // more code
}

so you can use the loadfunction everywhere you want to.

edited Oct 25, 2012 at 18:06

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

answered Oct 25, 2012 at 18:01

nWorx

2,1551 gold badge17 silver badges37 bronze badges

2 Comments

gen_Eric Over a year ago

That's a good idea. Definitely cleaner than $('#dialog').dialog('option', 'open')().

Selvakumar Arumugam Over a year ago

mm nice one.. I would simply do open: loadfunction incase if you don't have any extra code inside dialog-open

Barmar · Accepted Answer · 2012-10-25 18:02:42Z

0

In jQuery UI, methods are invoked by calling the widget name and supplying the method name as the argument. So you can do:

$('#dialog').dialog("open");

answered Oct 25, 2012 at 18:02

Barmar

789k57 gold badges554 silver badges669 bronze badges

4 Comments

gen_Eric Over a year ago

That doesn't seem to work if the dialog is already open. That's what I want. jsfiddle.net/NTICompass/bj4hK/1

Barmar Over a year ago

If the dialog is already open, you would have done this at the time it was opened. If you want to take some action regardless of whether the dialog is already open, write a function that performs this action and calls .dialog("open").

gen_Eric Over a year ago

What I want to do is with the dialog open, trigger the open function, so that it reloads the AJAX data.

Barmar Over a year ago

Best is probably the method in nWorx's answer.

Collectives™ on Stack Overflow

Programmatically trigger events on jQuery UI dialog

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related