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?

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