jQuery – Thickbox : Dialog Öffnen aus einem Dialog per HTTP POST

jQuery Thickbox unterstütz primär das Dialoghandling per HTTP GET. Dies ist auch verständlich, da die API ja aus der Slideshow Ecke kommt, bei der in der Regel neue Bilder per a href angefordert werden und in einer Dialogbox angezeigt werden.

Will man die API allerdings in einer Web Applikation zum Einsatz von web2.0 Dialogboxen (Layern) verwenden, kommt es des Öfteren vor, dass man Daten aus der Dialogbox posten möchte und anschließend eine andere Dialogbox anzeigen möchte.

Szenario:

Login Box à Link (a href) Passwort vergessen à Passwort vergessen Box à Email Adresse abfragen und and Server posten à Email mit neu generiertem Passwort verschickien à Login Box anzeigen.

Anbei der Code der auf dem Submit Button liegen muss.

$(document).ready(function() {
    $("#btn_send").click(function() {
    $.ajax({
          type: "POST",
          url: $('#rememberPasswordForm').attr('action') 

                 + "?width=400",
          dataType: "html",
          data: $('#rememberPasswordForm').serialize(),
          success: function(data){

            //set content to diabox and reinitalize thickbox
            $("#TB_ajaxContent").html(data);
            tb_position();
            $("#TB_load").remove();
            tb_init("#TB_ajaxContent a.thickbox");
            $("#TB_window").css({display:"block"});
          }
     });
  });
  $(".btn_close").click(tb_remove);
});

 

Der interessante Teil ist hier die Callback Funktion (success: function(data)…). In ihr ist der Thickbox Code zum Darstellen der zurückgelieferten Seite untergebracht. Hier wird neben der Darstellung noch die Initialisierung übernommen, damit in der "neuen" Dialogbox auch die Thickbox Funktionen zur Verfügung stehen.