ajax (2)


Spiegel Online Design-Relaunch

Woran merkt man das man älter wird?
Man fängt an sich für Politik, Nachrichten etc. zu interessieren.
Seit drei oder vier Jahren konsultiere ich regelmäßig Websites, die Nachrichten aus aller Welt und aus dem Rheinland veröffentlichen.
Das Nachrichtenportal Nummer eins für mich ist hier Spiegel Online.
Spiegel Online bietet sachliche Nachrichten, twittert, facebookt und hat einen eigenen Youtube Channel

Jetzt hat Spiegel das Design der Website geändert.
Für mich ist das neben dem Content natürlich auch als Web Developer interessant.
Das grobe Layout ist ziemlich gleich geblieben.
Trotzdem wirkt die Seite auf mich schlicht, übersichtlich, aber frischer als zuvor.
Jede Rubrik ist klar abgegrenzt vom restlichen Inhalt.

Schön sind auch die AJAX oder Web 2.0 Elemente, die man betrachten kann, wenn man sich für weitere Inhalte der einzelnen Rubriken interessiert.

Damit verteidigt Spiegel Online aus meiner Sicht die Anlaufstelle Nummer eins für Nachrichten im Netz. Zumindest für mich…




jQuery Tutorial – Teil 1 – Tabelle dynamisch erweitern

Ich bin vor kurzem auf folgendes Problem gestossen:
Es existiert eine ganz normale HTML-Tabelle mit Daten.
Dort soll nun per jQuery das Ergebnis aus einem HTML-Fragment sozusagen injiziert werden.

Wir haben also folgende Beispiel-Tabelle:

<table width="50%" class="jquery_table">
<tr class="expand_region">
<td class="plus_minus">+</td>
<td> 01</td>
        <td> 02</td>
        <td> 03</td>
        <td> 04</td>
        <td> 05</td>                                        
    </tr>
    <tr>
        <td> 10</td>
        <td> 11</td>
        <td> 12</td>
        <td> 13</td>
        <td> 14</td>
        <td> 15</td>                                        
    </tr>    
  </table>  

Um diese mit dem Ergebnis aus dem Fragment zu befüllen (und zwar zwischen den beiden bestehenden TRs) kommt folgender kurzer Code zum Einsatz.
Als erstes das jQuery-Framework einbinden:
[geshi lang=javascript][/geshi]
Hier ist der eigentliche Code:

$(document).ready(function() {
    $(".plus_minus").click(function() {
    if($(".plus_minus").text() == "+"){
        $(".plus_minus").text("-");
        $.get("append.html", "html", function(data){ 
        $(".expand_region").after(data);
        });    
    } else {
        $(".plus_minus").text("+");
        $(".dynamic").remove();
    }
    });
});

Was genau passiert hier?
Zunächst einmal wird gewartet, bis das komplette HTML-Document gerendert wurde.
Anschliessend wird dem Element mit der Klasse „plus_minus“ ein click-Ereignis hinzugefügt.
Wenn der Text dieses Elements „+“ lautet, dann wird der Text zunächst in ein „-“ umgewandelt.
Per GET-Methode wird das HTML aus der Datei „append.html“ geholt und die Callback-Methode mit den Daten aufgerufen.
Dem Element mit der Klasse „expand_region“ (hier die erste TR) wird mit der Methode after() der Inhalt von „append.html“ an die TR angehängt.

Ansonsten, wenn also die Daten bereits anhängen und aus dem „+“ ein „-“ wurde, dann wird das Element mit der Klasse „dynamic“ (hier: die TR, die in append.html steht) mit der Methode remove() entfernt.
Hinweis: Wenn man das mit mehreren Fragmenten implementiert, so würden mit diesem Code alle injizierten Elemente entfernt.

Wenn man also nur ein bestimmtes injiziertes Fragment entfernen möchte, so müsste man auf IDs setzen oder entsprechende Klassen definieren. Je nach Zweck und belieben.

Um noch ein besseres gefühl für das hier beschriebene zu geben, noch 2 Links:
Online Demo
Beispiel im ZIP-Archiv