Führen Sie eine Funktion nach dem Laden von jQuery Dialogfeld

Question

Dies kann eine einfache Frage sein, aber ich kann es nicht ganz zum Laufen bringen. Ich verwende ein jQuery-Dialogfeld, um ein Formular anzuzeigen, das von einer anderen Seite meiner Website geladen wurde. Der Benutzer klickt auf einen Link, der den Dialog startet. Ich versuche eine Funktion auszuführen, nachdem ich den HTML-Code in den Dialog geladen habe. Hier ist mein Code, um den Dialog zu laden:

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

Ich habe eine Funktion myFunction(), die ich anrufen soll, wenn der HTML-Code in den Dialog geladen wird. Nach etwas für ziemlich viel, habe ich versucht, die Funktion in .load Angabe wie folgt aus:

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

Ich habe auch versucht die offene Veranstaltung verwendet wird, wie folgt aus:

open: myFunction(), 

Was mache ich falsch ?

Answer 1

Lösung # 1:

.load(this.href, myFunction); 

Lösung # 2:

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

Lösung # 3 (Bevorzugtes):

open: myFunction, 

Lösung # 4:

open: function(){ 
    myFunction(); 
} 

---

Warum ist das so?

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

---

Der Code sollte wie folgt aussieht:

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

Keine der Lösungen für mich gearbeitet. Ich denke, es ist, weil der Rückruf open nicht aufgerufen wird, wenn der Dialog abgeschlossen ist. Ich musste eine setTimeout verwenden, damit es funktioniert.

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

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

Es hängt natürlich davon ab, was drin ist myFunction.

Answer 3

Für jQuery UI - v1.11.4, "vollständig" im Snippet-Code unten funktioniert nicht mehr:

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

Die Lösung, die für jQuery UI arbeitet - v1.11.4. :.

How to attach callback to jquery effect on dialog show?

wie $ von losnir, vorgeschlagen (this) .parent() verwenden, Versprechen() durchgeführt.

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

Hoffnung, das hilft.

Answer 4

Ich hatte ein Problem, wo ich eine externe Seite geladen habe und ich wollte auch eine Funktion auf der geladenen Seite ausführen. Anscheinend mit open: funktionierte nicht in der Dialogmethode.

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

Die my_function_name hat, ohne die Klammer zu sein und nur der Name der Funktion selbst es funktioniert. Ich bin mir nicht sicher, wie das genau funktioniert, aber wenn Sie es herausfinden, lassen Sie es mich in den Kommentaren wissen.

Answer 5

Sie können auch Fokus Ereignis verwenden, das nach dem Öffnen des Dialogfelds ausgelöst wird und wenn es den Fokus erhält.

Click here for documentation