Twitter bietet für eigene Webseiten mit @Anywhere die Möglichkeit einige Informationen und Funktionen Twitters auf der eigenen Homepage anzubieten – so auch schicke Hovercards, die bei erwähnten Twitterkonten aufgehen und zusätzliche Infos und Funktionen zu einem Konto anbieten. Try it: @freakcommander

Neben der fehlenden Unterstützung fürs offizielle Twitter Widget, bietet @Anywhere ebenfalls keine Hovercards für gesetzte Links auf Twitter-Profile. Beim folgenden HTML-Code wird kein Hovercard angezeigt:

<a href="http://twitter.com/freakcommander">freakcommander</a>
<!--Mit Shebang und @-Zeichen -->
<a href="http://twitter.com/#!/freakcommander">@freakcommander</a>

Um dennoch Hovercards anzuzeigen, kann man folgenden JQuery-Code, der auf diesen RegExp Selektor angewiesen ist, nutzen:

<script type="text/javascript">
$(document).ready(function() {
$('a:regex(href,^http[s]*:\/\/[www.]*twitter.com\/[#!%12\/]*[a-z0-9_]+[\/]*$)').
each(function (index,element){
	if ($(element).text().search(/^[@%40]*[a-z0-_]+$/) != -1)
		$(element).addClass("twitter-link");
});
twttr.anywhere(function (T) {
	T("a.twitter-link").hovercards({
		username : function(node) {
			return node.innerHTML;
		}
	});
});
});
</script>

Die Links müssen als Linktext ausschließlich Benutzername enthalten, da Twitter – aus welchen Gründen auch immer – den Linktext (und nicht den Link auf das Profil) benutzt, um die Hovercard für einen Benutzer zu laden.

Damit funktionieren auch die Profil-Links im Blackbird Pie:

Auch interessant:

1. @Anywhere Hovercards im offiziellen Twitter Widget

Das verwunderliche ist, dass die Twitter-eigenen Widgets trotz Einbindung der @Anywhere-Unterstützung keine Hovercards anzeigen. Um das Problem zu beheben, reicht folgender JQuery-Code aus:

<script type="text/javascript">
$(document).ready(function() {
twttr.anywhere(function (T) {
	T("a.twtr-user").hovercards({
		username : function(node) {
			return node.innerHTML;
		}
	});
	T("a.twtr-atreply").hovercards({
		username : function(node) {
			return node.innerHTML;
		}
	});
});
});
</script>

Und schon erhält man auch Hovercards im Widget:

Auch interessant:

1. @Anywhere Hovercards für Links (auch Blackbird Pie)
2. JQuery Event Listener für hinzugefügten Inhalt
3. Regexp Selektor in JQuery

Die Überschrift hört sich etwas tricky an, aber ich denke, wenn wir das Problem auf ein praktisches Beispiel übertragen, wird es klar.

Nehmen wir an, wir haben eine Fußballstatistik-Seite, wo alle Statistiken zur 1. bis 3. Fußballbundesliga abrufbar sein sollen. Jeder Spieler hat eine eigene Seite und zu jedem Spieler müssen täglich aufwändige Statistik-Berechnungen durchgeführt werden, die mehrere Minuten dauern.

Eine Lösung wäre, dass man mit Cronjobs 1x täglich diese aufwändigen Berechnungen nachts durchführt und so die Ergebnisse bereit hält, wenn der Besucher eine Spielerseite auswählt. Das Problem an dieser Vorgehensweise ist allerdings, dass es so viele Spieler gibt, dass die Berechnungen zu lange dauern würden. Zudem werden eh nur 10% der Spielerseiten besucht und 2% der Spielerseiten haben 90% der Zugriffe. Man kann also für diese 2% (High Traffic-Seiten) Cronjobs anlegen, die restlichen Berechnungen aber, sollen quasi On-the-Fly erstellt werden. Das führt zwar zu teilweise langen Wartezeiten für die Besucher, aber die Ergebnisse dieser Berechnungen sind so großartig, dass die Besucher darauf auch bis zu mehreren Minuten warten würden.

Anforderungen an die “On the fly”-Berechnungen

1. Die Parameter für die Berechnung ändern sich nur 1x täglich
2. Die Ergebnisse liegen nach der Berechnung in einem Array vor und sollen als JSON zwischengespeichert werden, so dass dann die Anzeige der Ergebnisse schnell erfolgen kann
3. Wenn der Besucher auf die Ergebnisse warten muss, soll eine Warteseite mit einem Ajax-Loader angezeigt werden. Wenn die Berechnungen beendet sind, wird auf die eigentliche Seite weitergeleitet
4. Für einen Spieler darf die Statistik-Berechnung nur 1x ausgeführt werden.
   Ein Beispiel: Besucher 1 besucht die Seite von “Arjen Robben” und stößt die Berechnungen an. Besucher 2 besucht wenige Sekunden danach die Seite von “Arjen Robben”, es liegen keine Daten vor und trotzdem soll das Skript erkennen: “Moment! Die Berechnungen laufen schon, stoße die Berechnungen kein zweites Mal an.”
5. Sollten veraltete Berechnungen vorliegen, werden diese zwar angezeigt (mit einem Hinweis, dass die Daten veraltet sind), um keine Wartezeit zu haben, im Hintergrund wird allerdings die aufwändige Berechnung angestoßen. Hier gilt wieder: Die Berechnung darf nur 1x angestoßen werden.

Warteseite mit JQuery-Ajax

Die Warteseite wird nur dann ausgegeben, wenn noch nie Daten für den Spieler berechnet wurden.

Damit die Warteseite das Ende der Berechnung mitbekommt, muss diese über Ajax die Berechnungen anstoßen.

$(document).ready(function() {
	$.ajax({
	   type: 'GET',
	   url: 'spielerSeite.php',
	   cache: false,
	   data: 'do=ajax',
	   success: function(msg){
	   if (msg == 'true'){
			location.replace('http://localhost/spielerSeite.php');
		}
		else
		{
			$('div#responseAjax').empty();
			$('div#responseAjax').addClass('success');
			$('div#responseAjax').html(msg);
		}
	   }
	 });
});

Es wird also die Seite spielerSeite.php?do=ajax aufgerufen. Diese Seite führt die Berechnungen durch und gibt am Ende ‘true’ aus, so dass auf die eigentliche Seite spielerSeite.php weitergeleitet wird. Wenn nicht ‘true’ zurück gegeben wird, hat bereits ein anderer Benutzer die Berechnungen angestoßen und man gibt eine Meldung zurück.

Zwischenspeicherung der Berechnungen als JSON

Die fertigen Berechnungen, werden als json-Datei im Filesystem gespeichert:

function setJSON()
{
	file_put_contents($this->json_dir.$this->spieler_string.'.json', json_encode($this->berechnung_array));
}
function getJSON()
{
	$this->berechnung_array = json_decode(file_get_contents($this->json_dir.$this->spieler_string.'.json'), true);
}

Vorteil von json ist die absolut problemlose Konvertierung vom PHP-Array zu einem json-String, der in einer Datei gespeichert wird. Anhand des Änderungsdatums der Datei mit filemtime kann man zudem einfach feststellen, ob die Daten wieder aktualisiert werden müssen.

Lock-Mechanismus zur einmaligen Ausführung

Wie kann man mit PHP feststellen, ob bereits eine Berechnung für einen Spieler läuft? Gar nicht. Also muss man es sich merken!

In einem Execution Array ($this->execution_array) werden die $this->spieler_string gespeichert, deren Berechnungen zur Zeit ausgeführt werden. Damit alle Skripte, die gleichzeitig laufen, auf dieses Array zugreifen können, wird das Array als JSON gespeichert:

function setExJSON()
{
	file_put_contents('execution.json', json_encode($this->execution_array));
}
function getExJSON()
{
	if (!file_exists('execution.json'))
	{
		$this->execution_array = array();
	}
	elseif (file_get_contents('execution.json') === 'null')
	{
		$this->execution_array = array();
	}
	else
	{
		$this->execution_array = json_decode(file_get_contents('execution.json'), true);
	}
}

Nun muss bei jedem potentiellen Start der Berechnungen überprüft werden, ob für den Spieler schon Berechnungen laufen. Dabei ist darauf zu achten, dass $this->execution_array frisch aus der JSON-Datei geladen wurde. Sollte niemand die Berechnung gestartet haben, wird das Execution-Array um den entsprechenden Eintrag erweitert und als JSON gespeichert.
Nachdem die Berechnungen durchgeführt wurden, wird das Array wieder geladen, der entsprechende Eintrag gelöscht und das Array wieder gespeichert:

$this->getExJSON();
if (in_array($this->spieler_string,$this->execution_array))
{
	exit();
}
else
{
	$this->execution_array[] = $this->spieler_string;
	$this->setExJSON();
	$this->fuehreLangeBerechnungenDurch();
	$this->getExJSON();
	unset($this->execution_array[array_search($this->spieler_string, $this->execution_array)]);
	$this->setExJSON();
}

Das Problem an dieser Implementation ist natürlich, dass Schreiben und Lesen ins Execution-Array kein kritischer Abschnitt ist und z.B. zeitgleich mehrere Berechnungsvorgänge gestartet werden könnten.. Da aber schlimmstenfalls “nur” mehrere Berechnungen für einen Spieler gleichzeitig durchgeführt würden, ist das Problem vernachlässigbar.

Ablaufkontrolle

Und hier der komplette Ablauf des Skripts:

$this->execution_array = array();
if (isset($_GET['do']) AND $_GET['do'] === 'old')
{
	//Daten veraltet: Alten Daten laden und anzeigen
	$this->getJSON();
	$this->toHTML();
}
elseif (isset($_GET['do']) AND $_GET['do'] === 'wait')
{
	//Warteseite mit Ajax anzeigen
	$this->doWaitHTML();
}
elseif (isset($_GET['do']) AND $_GET['do'] === 'ajax')
{
	//Durch Ajax von Warteseite aus Berechnungen angestoßen
	$this->getExJSON();
	if (in_array($this->spieler_string,$this->execution_array))
	{
		//Anderer User hat Berechnungen schon angestoßen
		$this->ajaxFalseResponse();
	}
	else
	{
		//Berechnungen durchführen
		$this->execution_array[] = $this->spieler_string;
		$this->setExJSON();
		$this->fuehreLangeBerechnungenDurch();
		$this->getExJSON();
		unset($this->execution_array[array_search($this->spieler_string, $this->execution_array)]);
		$this->setExJSON();
	}
}
elseif (!file_exists($this->json_dir.$this->spieler_string.'.json'))
{
	//Es liegen noch keine Berechnungen vor! Weiterleiten auf Warteseite.
	$host  = $_SERVER['HTTP_HOST'];
	$uri   = $_SERVER['PHP_SELF'];
	$extra = '?do=wait';
	header("Location: http://$host$uri$extra");
	exit();
}
else
{
	$this->getJSON();
	if (filemtime($this->json_dir.$this->spieler_string.'.json') < strtotime(' -1 day'))
	{
		//Die Daten sind veraltet. Weiterleiten zum Anzeigen der alten Daten, aber Berechnungen der neuen Daten starten
		$host  = $_SERVER['HTTP_HOST'];
		$uri   = $_SERVER['PHP_SELF'];
		$extra = '?do=old';
		header("Location: http://$host$uri$extra");
		$this->getExJSON();
		if (in_array($this->spieler_string,$this->execution_array))
		{
			//Anderer User hat Berechnungen schon angestoßen
			exit();
		}
		else
		{
			//Berechnungen durchführen
			$this->execution_array[] = $this->spieler_string;
			$this->setExJSON();
			$this->fuehreLangeBerechnungenDurch();
			$this->getExJSON();
			unset($this->execution_array[array_search($this->spieler_string, $this->execution_array)]);
			$this->setExJSON();
		}
	}
	else
	{
		//Wenn Daten aktuell sind: Anzeigen!
		$this->toHTML();
	}
}

$("p").click(function(){
   $(this).after("<p>Another paragraph!</p>");
});

Beim Klick auf einen Absatz wird danach ein neuer Absatz eingefügt mit dem Inhalt Another paragraph!. Klickt man auf diesen neuen Absatz Another paragraph! passiert nichts, obwohl laut dem JQuery-Code ja eigentlich beim Klick auf einen Absatz ein weiterer Absatz eingefügt werden soll.

Eine längere Schreibweise für o.g. Code ist diese hier mit der bind-Methode:

$("p").bind("click", function(){
   $(this).after("<p>Another paragraph!</p>");
});

Die Lösung, damit Event Listener auch auf hinzugefügten Inhalt funktionieren, ist die live-Methode:

$("p").live("click", function(){
   $(this).after("<p>Another paragraph!</p>");
});

Jetzt kann man auch auf Another paragraph! klicken und bekommt einen weiteren Absatz.

Übrigens ist diese live-Methode auch die Lösung, um in seinem selbst entworfenen Widget im neuen Admin-Panel (seit WordPress Version 2.8 ist die Widget Administration überarbeitet) Events per JQuery jederzeit benutzen zu können. Das Problem ist ansonsten nämlich, dass man das per Drag & Drop hinzugefügte Widget-Administrationspanel erst abspeichern musste, ehe JQuery-Events funktionieren.

Auch interessant:

1. CSS Attribut Selektoren
2. Regexp Selektor in JQuery
3. @Anywhere Hovercards für Links (auch Blackbird Pie)

Ein HTML-Auszug sieht so aus:

<div id="posting_1234">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>
<!-- ... -->
<div id="posting_1235">
Dies ist ein <a href="http://link.de">Link</a> im Posting.</div>
<div>
Ein anderer <a href="http://andererlink.de">Link</a> in einem anderen DIV.</div>

Nun will man mit CSS alle Links innerhalb des td-Tags, dessen id mit td_posting_ anfängt, anders darstellen. Das kann man umständlich mit der gestern vorgestellten JQuery-Funktion hinbekommen, aber einfacher und direkter ist es mit den CSS Attribut Selektoren:

td[id^="td_posting_"] a:link{
text-decoration: underline;
color: #032846;
}

Das ^-Zeichen hinter id dient dazu festzulegen, dass id mit der angegebenen Zeichenkette beginnen soll. Es wäre ja auch denkbar, dass id mit einer bestimmten Zeichenkette enden soll, denn müsste anstatt ^ ein $ Zeichen benutzt werden:

td[id$="ende"] a:link{
text-decoration: underline;
color: #032846;
}

Wenn nur überprüft werden soll, ob eine Zeichenkette irgendwo in der ID vorkommt muss ein *-Zeichen benutzt werden:

td[id*="zeichen"] a:link{
text-decoration: underline;
color: #032846;
}

Das deckt zwar viele Anwendungsfälle ab, aber wenn man auf einen komplizierteren regulären Ausdruck angewiesen ist, muss man auf die gestrige JQuery-Funktion zurück greifen.

Auch interessant:

1. JQuery Event Listener für hinzugefügten Inhalt