Tutorial - JQuery, AJAX-Formular in einer Thickbox

Ziel ist das eintragen in die Liste dieser Demo etwas aufzupeppen. Ich werde im folgendem beschreiben wie ich vorgegangen bin mit wenigen Eingriffen in den HTML-Code ein PopUp mit dem Formular zu erstellen in welchem die Übermittlung per AJAX geschieht.

Als erstes wird JQuery eingebunden, dies ist nur in der Datei news.php notwendig, da wir die Folgedateien sozusagen in news.php includen werden.

<script type="text/javascript" src="jquery.js"></script>

Weiterhin brauchen wir noch das Form Plugin und für ein wenig Animation das animateClass Plugin.

<script type="text/javascript" src="form.js"></script>
<script type="text/javascript" src="animateClass.js"></script>

Dann hab ich eine vereinfachte Version des Thickbox-Scripts von dieser Demo erstellt, rein damit:

<script type="text/javascript" src="jquery.power.js"></script>

Nun muss noch der Link zum Formular mit einer Klasse versehen werden. Sonst wird es ja nicht im PopUp geöffnet, der Titel wird auch noch weiter verwendet:

<a class="thickbox" title="Bitte fertige hier deinen Eintrag an"
href="dazu.php">Eintragen</a>

Der entscheidende Abschnitt in der jquery.power.js ist der:

$("a.thickbox").click(function(){
var url = this.href;

<schnipp> viel mehr </schnipp>

$.ajax({
   type: "GET",
   url: url,
   dataType: "html",
   success: function(html){
       $("#TBajaxContent").html(html);
       $("#TBload,legend").remove();
       $("#TBajaxContent").append("\n<div id='TBerr'></div>");

       $('#power').ajaxForm({
           target: '#TBerr',
           success: function(data) {
               $("#TBerr .feedback a#back").remove();
               $("#TBerr .feedback").addClass("jsison");
               $("#TBerr .jsison").animateClass('feed', 700);
           }
       });
   }
}); 

Frei übersetzt heißt das ungefähr. Bei Klick auf A mit der Klasse thickbox nehme die URL aus dem HREF übergebe diese per GET, erwarte die zurückgegebenen Daten und verwende sie als HTML. Ist dies abgeschlossen dann schreibe sie in den Container mit der ID TBajaxContent. Zeig das PopUp an, lösche die Animation und das überflüssige LEGEND. Lege einen leeren DIV an.

Sollte das FORM mit der ID power abgeschickt werden dann verwende für die Antwort den DIV TBerr. Ist dies erledigt entferne den Link mit der ID back, füge zum Element der Klasse feedback die Klasse jsison dazu. Am Ende animiere das Element mit der Klasse jsison zu dem Style der Klasse feed, nehm dir 0,7 sec Zeit.

Damit haben wir somit alle Funktionen eingebunden. Es fehlt noch die CSS-Angaben anzupassen die wir für das PopUp benötigen:

#TBajaxContent{
clear:both;
overflow:auto;
padding:12px 15px 15px 15px;
text-align:left;
}
#TBajaxWindowTitle{
padding:7px 50px 5px 10px;
}
#TBcloseAjaxWindow{
float:right;
margin-bottom:1px;
padding:5px 10px 7px 0;
text-align:right;
}
#TBcloseAjaxWindow a{
background:#ff8c00;
color :#6A6A6A;
font:bold 11px Arial,Helvetica,sans-serif;
}
#TBhideSelect{
background:#FFFFFF;
border:none;
color:#000000;
filter:alpha(opacity=0);
height:100%;
left:0;
-moz-opacity:0;
opacity:0;
position:absolute;
top:0;
width:100%;
z-index:99;
}
#TBload{
background:url(loadingAnimation.gif);
display:none;
height:100px;
position:absolute;
width:100px;
z-index:101;
}
#TBoverlay{
background: #CCCCCC;
color:#000000;
left:0px;
-moz-opacity:0.8;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
top:0px;
min-height:100.1%;
width:100%;
z-index:100;
}
* html #TBoverlay{
height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight + 'px');
}
#TBtitle{
_height:27px;
background:#Ff8c00;
color:#000000;
font:bold 12px Arial,Helvetica,sans-serif;
min-height:27px;
}
#TBwindow{
background:#6a6a6a;
border: 2px solid #F5F5F5;
color:#000000;
display:none;
position:absolute;
text-align:left;
z-index:102;
}

Da alle Seiten auch den Kopfbereich, Footer und die Navigation enthalten verstecken wir diese nun auch noch per CSS und überschreiben die Angaben für den Contentbereich:

#TBajaxContent #links, #TBajaxContent #kopf, #TBajaxContent #foot{
position :absolute;
left :-2000em;
top :-2000em;
width :1px;
height :1px;
}
#TBajaxContent #rechts{
min-height :0;
border-left:0px solid #FF8C00;
height:auto;
margin:0 10px 0 0;
padding-bottom:15px;
padding-left:15px;
}

Nun bleibt nur noch die generierten Inhalte etwas anzupassen und die 2 Klassen für die Animation:

#TBerr{
margin-top :15px;
}
.jsison{
background:#6A6A6A;
color :#6A6A6A;
width :0;
height :0;
border : 2px solid #FF8C00;
}
.feed{
color :#FFFFFF;
background:#6A6A6A;
width :80%;
height :auto;
}

Ich hoffe es ist so einigermaßen verständlich. Wir haben nun mit wenigen Eingriffen aus dieser Demo ein feines AJAX-Script gebastelt. Alles läuft ohne JS genau so wie vorher. Aber mit aktiviertem JavaScript ist das Verhalten ein Anderes, ebend "unobtrusive Javascript", barrierefrei accessible.
Ausprobieren? dann los, hier klicken, oben auf eintragen.

Mit ein wenig Geschick sollte sich nach diesem Verfahren jedes Formular in beliebige Seiten einfügen lassen. Anwendungsfälle wären Gästebücher, Kontaktformulare und ähnliches. Viel Spass beim nachbauen.