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?

Piscatorial

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? – Banlieue

Answer 1

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...
})

Disproportionate

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! – Piscatorial

Solution #3 didn't work for me.. not sure why, maybe jquery version? Solution #4 worked for me, using the construct: function() { myFunction();} ..Thanks! – Moonshiner

Answer 2

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.

Evvy

I had to use this time out as well. I'm adding a zoomIn() image capability after the dialog is opened. – Erk

Answer 3

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.

Katydid

Answer 4

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.

Dicast

Answer 5

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

Click here for documentation

Haroun