Run a function after loading jQuery dialog

Question

This may be a simple question, but I can't quite get it to work. I'm using a jQuery dialog to display a form loaded from another page on my website. The user clicks on a link, which fires up the dialog. What I'm trying to do is to run a function after loading the HTML into the dialog. Here is my code to load the dialog:

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("#dialogBox").dialog({
            title: $(this).attr("data-dialog-title"),
            close: function() { $(this).remove() },
            modal: true
        })
        .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

I have a function myFunction() that I want to call when the HTML is loaded into the dialog. After looking around for quite a bit, I tried specifying the function in .load, like this:

.load(this.href, myFunction());

I also tried using the open event, like this:

open: myFunction(),

What am I doing wrong?

open: myFunction, should work (no parens, or it'll just be called immediately, not when the dialog opens.) If it doesn't are there any errors in the console? — , Sep 09 '12 at 07:31

Peter · Accepted Answer · 2012-09-09T07:51:42.347

36

Solution #1:

.load(this.href, myFunction);

Solution #2:

.load(this.href, function(){
  myFunction();
});

Solution #3 (preffered):

open: myFunction,

Solution #4:

open: function(){
  myFunction();
}

Why is that?

var foo = myFunction(); // `foo` becomes your function return value
var bar  = myFunction; // `bar` becomes your function
bar();

Your code should looks like:

$("#dialogBox").load('http://example.com').dialog({
  title: $(this).attr("data-dialog-title"),
  close: function() { $(this).remove() },
  modal: true,
  open : myFunction // this should work...
})

edited Sep 09 '12 at 07:51

answered Sep 09 '12 at 07:33

Peter

16,453
8
51
77

I've tried all four solutions and still can't get it to work. There are no errors in the console either... The function I want to call is in a different .js file, but both are referenced on the page. I wasn't aware of the difference between using myFunction() and myFunction. Thanks for the clarification on that! – HTX9 Sep 09 '12 at 07:46
2

Solution #3 didn't work for me.. not sure why, maybe jquery version? Solution #4 worked for me, using the construct: function() { myFunction();} ..Thanks! – Gene Bo Aug 15 '14 at 19:24

score 4 · Answer 2 · answered Nov 10 '14 at 13:55

4

None of the solutions worked for me. I guess it's because the open callback isn't called when dialog is completed open. I had to use a setTimeout to make it work.

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

setTimeout(function(){
    // myFunction();
},100);

It obviously depends on what's inside myFunction.

answered Nov 10 '14 at 13:55

Bruno Calza

2,732
2
23
25

I had to use this time out as well. I'm adding a zoomIn() image capability after the dialog is opened. – Robert Dec 14 '15 at 21:13

score 3 · Answer 3 · edited May 23 '17 at 11:54

For jQuery UI - v1.11.4, "complete" in the code snippet below no longer works:

show: {
    effect: 'clip',
    complete: function() {
        console.log('done');
    }
},

The solution that is working for jQuery UI - v1.11.4. :

How to attach callback to jquery effect on dialog show?

As suggested by losnir, use $(this).parent().promise().done:

$("#dialog").dialog({
show: {
    effect: "drop",
    direction: "up",
    duration: 1000
},
hide: {
    effect: "drop",
    direction: "down",
    duration: 1000
},
open: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Opened");
    });
},
close: function () {
    $(this).parent().promise().done(function () {
        console.log("[#Dialog] Closed");
    });
}
});

Hope this helps.

score 0 · Answer 4 · answered Mar 30 '16 at 03:36

I had an issue where I loaded a external page and I also wanted to run a function on the loaded page. Apparently using open: didn't work in the dialog method.

jQuery("#pop-sav").load('/external/page', my_function_name );

jQuery("#pop-sav").dialog({
      resizable: false,
      width:'90%',
      autoReposition: true,
      center: true,
      position: 'top',
      dialogClass: 'pop-dialog pop-sort'
});

The my_function_name has to be without the parenthesis and just the name of the function itself to make it work. I'm not sure exactly how this works, but if you do figure it out let me know in the comments.

score 0 · Answer 5 · answered May 12 '17 at 03:23

0

You can also use focus event which will trigger after the dialog box open and when it get focus.

Click here for documentation

answered May 12 '17 at 03:23

prince jose

193
1
7

Run a function after loading jQuery dialog

5 Answers5