CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-dialog
HTX9
HTX9

Reputation: 1717

Run a function after loading jQuery dialog

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?

Upvotes: 15

Views: 51514

Answers (5)

prince jose
prince jose

Reputation: 303

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

Click here for documentation

Upvotes: 0

Patoshi パトシ
Patoshi パトシ

Reputation: 23555

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.

Upvotes: 0

Yang Kin
Yang Kin

Reputation: 96

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.

Upvotes: 3

Bruno Calza
Bruno Calza

Reputation: 2780

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.

Upvotes: 4

Peter
Peter

Reputation: 16943

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

Upvotes: 36

Related Questions