Ejecutar una función después de cargar el cuadro de diálogo jQuery

Question

Esto puede ser una pregunta simple, pero no puedo hacer que funcione. Estoy usando un cuadro de diálogo jQuery para mostrar un formulario cargado desde otra página en mi sitio web. El usuario hace clic en un enlace, que activa el diálogo. Lo que intento hacer es ejecutar una función después de cargar el HTML en el diálogo. Aquí está mi código para cargar el cuadro de diálogo:

$(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"); 
    }); 
}); 

Tengo un myFunction() la función que yo quiero llamar cuando el HTML se carga en el diálogo. Después de mirar alrededor para un poco, he intentado especificar la función en .load, así:

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

También he intentado usar el evento abierto, así:

open: myFunction(), 

¿qué estoy haciendo mal ?

Answer 1

Solución # 1:

.load(this.href, myFunction); 

Solución # 2:

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

Solución # 3 (preffered):

open: myFunction, 

Solución # 4:

open: function(){ 
    myFunction(); 
} 

---

¿Por qué?

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

---

Su código debería parecerse:

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

Answer 2

Ninguna de las soluciones que funcionó para mí. Supongo que es porque no se llama a la devolución de llamada open cuando se completa el diálogo abierto. Tuve que usar un setTimeout para hacerlo funcionar.

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

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

Obviamente, depende de lo que hay dentro myFunction.

Answer 3

para jQuery UI - v1.11.4, "completo" en el siguiente fragmento de código ya no funciona:

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

La solución que se está trabajando para jQuery UI - v1.11.4. :.

How to attach callback to jquery effect on dialog show?

Como sugiere losnir, utilice $ (this) .parent() promesa() hecho:.

$("#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"); 
    }); 
} 
}); 

Espero que esto ayude.

Answer 4

Tuve un problema donde cargué una página externa y también quería ejecutar una función en la página cargada. Aparentemente usando open: no funcionó en el método de diálogo.

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' 
}); 

El my_function_name tiene que ser sin el paréntesis y sólo el nombre de la función en sí para hacer que funcione. No estoy seguro de cómo funciona esto exactamente, pero si lo resuelves, házmelo saber en los comentarios.

Answer 5

También puede usar foco evento que se disparará después de abrir el cuadro de diálogo y cuando se enfoca.

Click here for documentation