Wenn man selbst Applikationen programmiert die auf Javascript basieren und später noch diverse Erweiterungen ermöglichen sollen, dann macht es durchaus Sinn eigene Callbacks anzubieten. Sei es in einer jQuery Extension oder einer eigenen Applikation.

Die Anforderung

Zur Erfüllung meiner aktuellen Anforderung habe ich eine Javascript Klasse erstellt die mit dem Operator new erstellt werden kann:

var myObject = new FunkyObject();

Perfekt für die erste Anforderung, aber sobald weitere Entwickler involviert werden oder man Teile der Applikation sogar als OpenSource Software veröffentlicht, wäre es ja schön wenn nicht jeder im eigenen Code rum macht sondern ordentlich in seinem Script bleibt:

var myObject = new FunkyObject({
  onLoad: function() {
    //do crazy custom things
  }
});

Sieht ordentlich aus und ist ohne Kommentare selbsterklärend: Beim laden werden verrückte Sachen getan. Aber was tut das FunkyObject um die Callbacks aufzurufen?

Eine Javascript Klasse

Genau genommen ist eine Javascript Klasse nichts weiter als eine Funktion die sich selbst zurück gibt und über den new Operator erstellt wird. Meine Grundlage sieht so aus:

var FunkyObject = function(args) {
  var defaults = {};
  this.args = $.extend(defaults, args);
  this.goCrazy();
  return this;
};

Dieser Code setzt jQuery voraus, das die Funktion $.extend mitbringt. Damit wird das übergebene args Objekt durch die in defaults angegebenen Werte aufgefüllt, sofern sie nicht vorhanden sind. Man kann also für das onClick Event ein Standardverhalten hinterlegen:

var FunkyObject = function(args) {
  var defaults = {
  onLoad: function() {
    //default behavior
  };
  this.args = $.extend(defaults, args);
  this.goCrazy();
  return this;
};

Die Funktion goCrazy() wird ausgeführt sobald die Klasse initialisiert wird. Um dem nächsten Entwickler die Möglichkeit zu geben auch diese Funktion zu überschreiben, werden alle Grundlagen in der prototype Eigenschaft der Klasse definiert:

var FunkyObject = function(args) { /* ... */ };
FunkyObject.prototype.goCrazy = function() {
  // do the init stuff
};

Mit diesem Konstrukt könnte ein Entwickler im eigenen Script jene Klasse überschreiben ohne in den eigentlichen Quelltext eingreifen zu müssen.

myObject.goCrazy = function() {
  // custom constructor
}

Das als kleine Anmerkung am Rande, das erklärte Ziel ist der komfortable Aufruf des onLoad Events. Natürlich könnte man über this.args.onClick() einfach die entsprechende Funktion aufrufen, aber sieht das schön aus? Ist das variabel?

Die Antwort lautet nein.

Schön und variabel

Viel cooler ist eine total schöne und variable trigger() Funktion zu schreiben, die in den Parametern nach einem Callback sucht und diesen ggf. ausführt.

FunkyObject.prototype.trigger = function(action) {
  var callback = 'on'+this.ucfirst(action);
  if(typeof this.args[callback] == 'function') {
    this.args[callback]();
  };
}

In der goCrazy Funktion sieht der Aufruf dann so aus:

var FunkyObject = function(args) { /* ... */ };
FunkyObject.prototype.goCrazy = function() {
  this.trigger('load');
};

Die trigger Funktion baut sich den Eventnamen aus einem on und dem Parameter action zusammen und prüft anschließend ob eine Funktion mit diesem Namen vorhanden ist. Ist dies der Fall wird sie ausgeführt.

Leider gibt es keine Javascript Funktion mit dem Namen ucfirst, aber über die Prototype Eigenschaft kann man das String Objekt entsprechend aufrüsten:

String.prototype.ucfirst = function() {
  return this.substr(0,1).toUpperCase() + this.substr(1,this.length);
};

Mit diesen zwei Funktionen baut man sich sehr schnell eine Grundlage um variable Scripte zu schreiben die komplett erweitert werden können.

Parameter für den Callback

Oft muss der Callback über einen gewissen Zustand informiert werden. Für das benutzte Beispiel könnte es die Information sein ob das Laden erfolgreich war. Bei der Definition des Callbacks muss ein Parameter akzeptiert werden:

var myObject = new FunkyObject({
  onClick: function(success) {
    alert(success ? 'hat geklappt!' : 'fehler');
  }
});

Die goCrazy Funktion muss den Status an die trigger Funktion weitergeben:

FunkyObject.prototype.goCrazy = function() {
  success = true;
  this.trigger('load', success);
};

Wir gehen mal von einem grundlegenden Erfolg aus. Das wird es auch sofern die trigger Funktion beigebracht bekommt was sie mit zusätzlichen Parametern anfangen soll:

FunkyObject.prototype.trigger = function(action) {
  var callback = 'on'+this.ucfirst(action);
  if(typeof this.args[callback] == 'function') {
    this.args[callback](arguments.shift());
  };
}

Viele Änderungen sind es nicht. In der vordefinierten Variable arguments sind sämtliche Parameter vom Aufruf der Funktion gespeichert. Die Array Funktion shift entfernt das erste Element aus dem Array und gibt den Rest zurück. So wird nicht der Callbackname sinnloser Weise an den Callback gegeben sondern alle andere Parameter. So kann man auch mehr als ein Wert an den Callback schicken:

FunkyObject.prototype.goCrazy = function() {
  success = true;
  this.trigger('load', success, 'ready', {hello: 'world'});
};

Fazit

Ich mag Callbacks. Wenn man ein gutes Grundgerüst hat kann man auf alle Events individuell reagieren. Sollte es ein Callback nicht geben den man wirklich dringend und sofort benötigt kann man mit dem Überschreiben der prototype Funktion kurzfristig neue Callbacks hinzufügen und später in die Core Anwendung übernehmen.

Wichtig ist aber darauf zu achten keine unendlichen Scripte in den Callbacks unterzubringen. Spätestens nach 20 Zeilen sollte man sich überlegen den Code in einzelne Häppchen aufzuteilen.

Und in eigener Sache noch die Warnung vor gedankenlosem Copy and Paste: Durch Unterschrift auf dem NDA musste ich alle Funktionen umbenennen. Also nachdenken und gute Funktionsnamen benutzen.

Mit jQuery.Deferred lassen sich Objekte erzeugen, die beim erreichen eins Zustandes bescheid geben, damit andere Objekte darauf reagieren können. Klingt verworren ist aber ganz einfach, zum Beispiel sollen die Bilder angezeigt werden wenn sie fertig geladen sind.

Ohne $.Deferred

Vor jQuery 1.5 musste man sich mit Callbacks oder window.setTimeout() helfen um auf Ereignisse zu reagieren.

$('#elem').fadeIn(function() {
  // do something when #elem is visible
});

Bei einem Element ist das leicht, aber wenn es sich um mehrere Elemente handelt, oder man nicht genau sagen kann wann ein Element einen Status erreicht hat, dann wirds kritisch.

Mit $.Deferred

Die großartigen Funktionen heißen $.when() und $.then(). In meinem letzten Projekt musste ich warten bis mehrere Bilder geladen wurden. So sieht der Aufruf aus:

$.when(loadImg('#img1')).then(function() {
  //do stuff, the image is loaded
});

Zugegeben, das kann auch leichter haben mit $('#img1').load(function() { /* action */ }), richtig schön wird es auch bei mehreren Bildern:

$.when(
  loadImg('#img1'),
  loadImg('#img2'),
  loadImg('#img3'))
.then(function() {
  //do stuff, all images are loaded
});

Die Funktion $.then() wird erst ausgeführt wenn alle Funktionen in $.when() ihr okay gegeben haben. Genial oder?

Die Funktion loadImg() muss natürlich entsprechend vorbereitet werden, damit sie okay sagen kann.

function loadImg(selector) {
  var dfd = $.Deferred();
  $(selector).load(function() { dfd.resolve(); });
  return dfd.promise();
}

In der Variable dfd wird ein neues Deferred Objekt erzeugt. Die Rückgabe der Funktion muss von diesem Objekt die Funktion promise() ausgeben.

Und wenn die Funktion ihr erklärtes Ziel erreicht hat, wird die Funktion resolve() aufgerufen. Damit ist der Funktion $.when() klar das sie ggf. weitermachen kann.

Fazit

jQuery Magic vom feinsten! Das war ein sehr kleiner Einstieg in dieses großartige Konzept, Deferred kann noch einiges mehr und die offizielle jQuery Dokumentation verrät was.

Ich wünsche viel Spaß beim programmieren und coole neue Scripte.

In meinem aktuellen Projekt kann der Benutzer unter einer großen Auswahl Elementen wählen. Jedes Element gehört in eine Kategorie. Also wäre es doch nett oben eine Kategorie anzuklicken und anschließend nur die Einträge dieser Kategorie zu sehen.

Nichts leichter als das! Es gibt natürlich großartige und weniger gute Plugins zu dem Thema, aber es ist in einer Zeile selbst geschrieben. Macht Spaß und verdeutlicht die Verkettung in jQuery.

Das HTML Gerüst

Damit fängt es immer an. So sieht es leicht gekürzt aus:

<div class="categories">
  <ul>
    <li data-id="1">Kategorie 1</li>
    <li data-id="2">Kategorie 2</li>
  </ul>
  <div id="category_1" class="category">
    <!-- jede Menge Inhalt -->
  </div>
  <div id="category_2" class="category">
    <!-- noch  mehr Inhalt in Kategorie 2 -->
  </div>
</div>

Es gibt also einen umfassenden Container, darin befindet sich eine unsortierte Liste als Menü und darunter die einzelnen Kategorien. Die Listenpunkte sind mit dem HTML5 Attribut data-id ausgestattet um klar zu machen, welchen Punkt sie einblenden.

jQuery arbeitet auf grandiose Art und Weise damit zusammen, dazu gleich mehr.

Eine Zeile jQuery

Hier kommt sie:

$('.categories>ul li').live('click', function() { $(this).closest('.categories').find('.category').hide().filter('#category'+$(this).data('id')).show().end().end().end().siblings('li').removeClass('active').end().addClass('active');}).filter(':first').click();

Auch wenn ich große Töne gespuckt habe von wegen eine einzige Zeile, würde ich doch empfehlen ein paar Zeilenumbrüche einzubauen. In Javascript müssen die Zeilen nicht mit einem Simikolon beendet werden, deshalb kann man diese Zeile auch übersichtlicher notieren:

$('.categories>ul li')
    .live('click', function() {
      $(this)
        .closest('.categories')
          .find('.category')
            .hide()
            .filter('#category'+$(this).data('id'))
              .show()
            .end()
          .end()
        .end()
        .siblings('li')
          .removeClass('active')
          .end()
        .addClass('active');
    })
    .filter(':first')
    .click();

Einzelerklärung

Jetzt gehts los! jQuery basiert immer auf einem Elementstack. Das bedeutet man wählt per CSS Selektor eine beliebige Anzahl Elemente aus und wendet darauf beliebig viele Befehle an. In diesem Beispiel werden alle Listenelemente ausgewählt die sich in einer Liste befindet, welche wiederum ein direktes Kindelement eines Elements mit der Klasse .categories ist.

$('.categories>ul li')

Würde man das > Zeichen weglassen, würden sich die folgenden Anweisungen auf alle Listen im Element .categories beziehen, was natürlich nicht gewünscht ist.

Jedem Listenelement wird der Eventhandler click zugewiesen:

.live('click', function() {

Die großartige Funktion live(event, callback) arbeitet im Gegensatz zu click(callback) auch mit Elementen die nachträglich dem Dom hinzugefügt wurden.

Innerhalb eines Callbacks bezieht sich $(this) auf das spezifische Element welches den Funktionsaufruf ausgelöst hat. Sprich: das angeklickte Listenelement. Das dient als Ausgangspunkt um das umfassende Element .categories in den Elementstack zu laden:

$(this).closest('.categories')

Vom Ausgangspunkt $(this) wird das nächstgelegene Element ausgewählt. Sollten sich mehrere Elemente mit der Klasse .categories auf der Seite befinden können wir so sicherstellen, dass das richtige Element behandelt wird.

Aus dem richtigen Element werden alle Elemente der Klasse .category gesucht und ausgeblendet:

.find('.category').hide()

Mit find(selector) wird innerhalb der Objekte im Elementstack gesucht. Im Gegensatz zu der Funktion filter(selector) welche die Elemente im Stack durchgeht und nur jene zurück liefert auf die der Selector zutrifft.

Die großartige Methode data(key, value) greift automatisch auf das data Attribut aus dem HTML zu und stellt es zur Verfügung.

Mit diesem Wissen müsste der nächste Schritt klar sein:

.filter('#category'+$(this).data('id')).show()

Aus allen ausgewählten und versteckten .category Elementen wird das mit der ID des angeklickten Listenelements ausgewählt und angezeigt.

Mit end() setzt man einen veränderten Elementstack wieder zurück. Wir haben jetzt drei mal end(), für filter(), find() und closest(). Also befinden wir uns wieder beim angeklickten Listenelement.

.siblings('li')

Damit werden alle Nachbarn des Listenelements ausgewählt, also alle Einträge in der Liste. Egal welches, keines darf mehr die Klasse active besitzen:

.removeClass('active').end()

Im gleichen Zug wird auch die Veränderung durch siblings(selector) zurück gesetzt. Fehlt nur noch das hinzufügen der Klasse zum angeklickten Element:

.addClass('active');

Das war es innerhalb des Callbacks. Beim laden der Seite werden alle Kategorien angezeigt, das ist nicht Ziel des Tab Widgets, aber auch leicht zu lösen. Zur Erinnerung: Es wurden alle Listenelemente ausgewählt und jedem Element ein Clickhandler zugewiesen.

$('.categories>ul li').live('click', function() { /* lange zeile */ })

Auch die live() Funktion gibt den Elementstack zurück, deshalb brauchen wir nur noch zwei grandiose Funktionen anzuhängen:

.filter(':first').click();

In jQuerysprache heißt das: Nimm das erste Element aus deinem Stack und klicke es an. Was dann passiert haben wir gerade ausführlich besprochen. Alle Kategorien werden ausgeblendet, die erste wieder ein und das erste Listenelement mit der Klasse active gekennzeichnet.

Fertig! Das war ein Tab Widget in mehr oder weniger einer Zeile.

Eins gibt es heute: movingLabels! Der Name sagt alles, mit diesem Plugin kann man nach belieben seine Labeltags rumwirbeln lassen, sobald das zugehörige Formularfeld den Focus erhält. Am besten direkt die Demo ansehen, downloaden und den erklärenden Artikel lesen.

Vorweg

Ich weiß es gibt schon genau dieses Plugin Namens slidingLabels, aber das ist mir in der Anwedung und in den Möglichkeiten nicht ausgereift genug. Wir brauchen doch in jedem Projekt etwas neues! Jedenfalls fürs Auge. Deshalb hier meine eigene Umsetzung.

HTML und CSS

Vor dem Einsatz des Plugins muss man sein Formular entsprechend vorbereiten. Das vom Cake HtmlHelper generierte HTML passt schon perfekt und sieht in etwa so aus:

<div>
  <label>Name</label>
  <input type="text" name="name" />
</div>

Vor dem Einsatz muss das Label schon über dem Inputfeld liegen. Deshalb ist der umschließende DIV Container notwendig. Am schnellsten geht es mit folgendem CSS:

form div {
  position:relative;
  margin:5px 0;
}
form div label {
  position:absolute;
  top:3px;
  left:8px;
}

Damit ist die Grundlage fertig.

JavaScript

Das Plugin herunterladen, jQuery einbinden und das Plugin movingLabels. Das Plugin sucht in dem übergebenen Element standardmäßig nach DIV Containern und in diesen nach Label- und Inputtags vom Typ Text und Passwort. So sieht der Aufruf aus:

jQuery(function($) {
  $('form').movingLabels();
});

Das wars! Beim Fokus von einem Formularfeld wird das Label sanft ausgeblendet.

Anpassungen

Natürlich kann man alle Einstellungen und Animationen ändern. Als Parameter übergibt man dafür ein Objekt mit angepassten Eigenschaften.

jQuery(function($) {
  $('form').movingLabels({custom: 'settings'});
});

Folgende Optionen sind implementiert:

label: 'label'

ein HTML Selector der das Element spezifiziert, welches sich bewegt
 

input: ':text, :password'

das Eingabefeld für welches die Labels bewegt werden sollen. Ebenfalls ein HTML Selector
 

div: 'div'

das umfassende Element. Rate mal? Richtig, ein HTML Selector
 

animation.hide: {opacity: 0, marginLeft: 20}

das Animationsobjekt welches ausgeführt wird, wenn der Focus gesetzt wurde
 

animation.show: {opacity: 1, marginLeft: 0}

verliert das Feld den Focus, wird das Label in diesen Zustand versetzt
 

animation.start: {marginLeft: '-20px'}

nachdem die Animation zum verstecken gelaufen ist, wird dieses CSS Objekt zugewiesen. Achtung: wenn man das nicht braucht muss es als leeres Objekt übergeben werden, sonst gibts Ärger von jQuery.
 

animation.speed: 150

die Geschwindigkeit mit der das ganze ablaufen soll. Entweder in Millisekunden oder in Worten ('slow', 'fast')

Fertig!

Ich muss sagen, ich bin bisher recht Stolz auf dieses kleine Plugin. Jetzt kann man sich eine Demo ansehen oder es herunterladen. Kommentare sind geöffnet und ich bin gespannt.

Wer komplizierte oder ausgefallene Projekte umsetzt und Hilfe sucht, kann sich gerne an die coolste Agentur der Welt wenden: Ape Unit!!

Wenn aber das unbedingt nur von einer Lightbox kommt, dann sollte man sich kurz hinsetzen, einen geeigneten Klon aussuchen (hier ist die große Lightbox Matrix) und die Klickvergrößerung von TYPO3 damit ersetzen. Das ist schnell, effektiv und in diesem Beitrag erklärt.

Vorbereitungen

Für mein aktuelles Projekt habe ich mich für den Lightbox Clone TopUp entschieden. Sieht sehr vielversprechend aus. Also welcher Klone auch immer: Daten herunterladen und ins Projekt einbinden. Dazu gehören mind. jQuery und das entsprechende Plugin, in vielen Fällen auch noch eine CSS Datei. Firebug verrät im Script Reiter ob es funktioniert hat.

TopUp benötigt keine CSS Datei, dafür aber einen Bilder- und einen Players-Ordner in dem SWF Dateien gespeichert sind um verschiedene Medien wiederzugeben. Per JavaScript können die Pfade angepasst werden:

TopUp.host = 'http://www.kiwi-service.de/';
TopUp.images_path = 'fileadmin/template/img/topup/';
TopUp.players_path = 'fileadmin/template/flash/';

JavaScript einbinden

Eine Besonderheit bringt TopUp mit: Es lädt dynamisch die benötigten JavaScriptdateien nach. Dafür braucht er den kompletten javascripts/jquery Ordner. Dieser muss im gleichen Ordner liegen wie top_up-min.js.

fileadmin/template/js/top_up-min.js
fileadmin/template/js/jquery/...

Test

Alle benötigten Dateien sind eingebunden und in Firebug sichtbar. Um zu testen ob es funktioniert, füge ich ein Inhaltselement vom Typ HTML ein und schreibe mein eigenes Bild rein. Testbilder sind im Images Ordner vorhanden.

<a href="fileadmin/template/img/topup/photos/1.jpg" class="top_up">
  <img src="fileadmin/template/img/topup/thumbnails/1.jpg">
</a>

Funktioniert, wunderbar! Wenn nicht, dann die eigene Seite mit den Beispielen vergleichen.

Typoscript

Nun muss man TYPO3 noch das hässliche JavaScript PopUp austreiben. Hier mein Konfiguration für Version 4.3

temp.imageLinkWrap = 1
temp.imageLinkWrap {
enable = 1
typolink {
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
parameter.cObject.file.maxW = {$styles.content.imgtext.maxW}
parameter.override.listNum.stdWrap.data = register : IMAGE_NUM_CURRENT
title.field = imagecaption // title
title.split.token.char = 10
title.if.isTrue.field = imagecaption // header
title.split.token.char = 10
title.split.returnKey.data = register : IMAGE_NUM_CURRENT
parameter.cObject = IMG_RESOURCE
parameter.cObject.file.import.data = TSFE:lastImageInfo|origFile
ATagParams = target="_blank"
}
}
tt_content.image.20.1.imageLinkWrap >
tt_content.image.20.1.imageLinkWrap < temp.imageLinkWrap 

Als erstes wird das temporäre Objekt temp.imageLinkWrap erzeugt und konfiguriert. Interessant ist die letzte Angabe ATagParams - darüber gibt man jedem Link die Klasse top_up mit, damit das Plugin sich um die Bilder kümmert.

Anschließend wird die Standardvergrößerung in tt_content.image.20.1.imageLinkWrap überschrieben. Cache leeren und Seite neuladen, fertig!

TopUp Spezialitäten

Dieses TopUp ist wirklich ein schönes Teil. Mit der Funktion addPresets() lassen sich für Links in DOM Bereichen Voreinstellungen treffen. Zum Beispiel alle Bilder die über ein Inhaltselement eingestellt sind, zu einer Gruppe zusammenfassen:

TopUp.addPresets({
".csc-textpic-imagewrap a": {
group: "images"
}
});

Das bedeutet alle TopUp-Links im Div .csc-textpic-imagewrap werden der Gruppe images zugewiesen. Im Overlay gibts dann Vor- und Zurückpfeile.

Fazit

Die Initialisierung und Einstellungen einer Lightbox variieren natürlich. Es gibt aber ein paar schöne und elegante Tools deren Einsatz sich lohnen. Vorallem im Zusammenspiel mit der brand neuen TYPO3 Version 4.3 - ein großartiger Schritt mit schönen Verbesserungen. Unbedingt ansehen. Und TopUp einbinden!

Zum Beispiel in einem Tool welches umfangreiche Exportmöglichkeiten besitzt und gerade von einer jungen, dynamischen Agentur entwickelt wird. In dem Programm legt man ein Exportscript an und kann diesem verschiedene Exportdateien zuweisen die beim durchlaufen dynamisch erstellt werden.

Diese einfache 1:n Beziehung ist mit Cake schnell gebacken, mit ein paar Zeilen erweitert und läuft. Allerdings verteilt auf mehreren Seiten. Zum Glück gibt uns Cake einfache Möglichkeiten an die Hand um das zu verhindern.

In diesem Artikel will ich aufschreiben wie man praktisch jedes Cake Projekt zusammen mit dem Lieblings-Javascriptframework jQuery in eine coole Web 2.0 Anwendung verwandeln kann.

Grundlagen

Ich gehe mal von einer laufenden Cakeanwendung aus. Da gibt es die Tabelle Export und die Tabelle Exportfiles. Die beiden sind über eine 1:n Beziehung verknüpft, die Anwendung wurde gebacken und man verfügt über die normalen CRUD Funktionen.

Wenn Interesse an einem Tutorial dazu besteht, wäre ein kurzer Hinweis in den Kommentaren oder per Mail nett.

Der AppController

Den schönsten Teil bringt Cake schon mit: den RequestHandler. Mit dessen Hilfe kann man auf Ajaxanfragen reagieren. Als erstes muss er in der Datei app/app_controller.php eingebunden werden:

$components = array('RequestHandler');

Anschließend stehen in jedem Controller über $this->RequestHandler umfangreiche Möglichkeiten zur Verfügung. Besonders toll wirds im Callback beforRender(). Dieser wird im AppController definiert und von Cake automatisch aufgerufen, wenn die Logik im entsprechenden Controller abgearbeitet wurde.

So sieht die Killerfunktion aus:

function beforeRender() {
  if($this->RequestHandler->isAjax()) {
     Configure::write('debug', 0);
     if($this->RequestHandler->prefers() == 'json') {
        die(json_encode($this->viewVars));
     }
     else {
        $this->layout = 'ajax';
     }
  }
}

Was hier passiert ist so gut wie selbsterklärend: Wenn es sich um eine asynchrone Anfrage handelt if($this->RequestHandler->isAjax()), dann wird als erstes jegliche Debugausgabe verboten. Das muss man sich unbedingt merken, sonst besteht die Gefahr auszuflippen weil debug() "aufeinmal" nichts mehr ausgibt. Auf der anderen Seite kann man aber nicht mit einem JSON String in Javascript weiterarbeiten, wenn dem ein Datenbanklog am Hintern an der schließenden Klammer klebt. Also nicht vergessen!

Nach dem Cake weiß, das es eine Ajaxanfrage bearbeitet, wird geprüft, welche Rückantwort erwartet wird $this->RequestHandler->prefers(). Wenn diese JSON ist, werden alle viewVars, dass sind alle Variablen die über $this->set() im Controller gesetzt wurden, als JSON Objekt zurück gegeben. Damit stehen dem Javascript alle Informationen zur Verfügung die sonst im View verarbeitet werden. Toll oder?

Dieses die(json_encode()) finde ich noch nicht ganz so elegant wie der ganze Rest von Cake, tut aber seine Arbeit. Vielleicht hat jemand einen schöneren Ansatz?!

Wenn die Anfrage kein JSON erwartet, wird nicht das Standardlayout genutzt, sondern auf das Ajax umgeschaltet. Das befindet sich in der Datei app/views/layouts/ajax.ctp und besteht nur aus einer Zeile:

<?php echo $content_for_layout; ?>

Standardlayout

Um Probleme beim ändern der BaseURL zu vermeiden habe ich mir angewöhnt im Standardlayout das Tag base zu verwenden um mit jQuery schnell auf die URL zugreifen zu können. In der Datei app/views/layouts/default.ctp muss dafür folgende Zeile hinzugefügt werden:

<base href="http://<?=$_SERVER['HTTP_HOST']?><?=$this->base?>/" host="http://<?=$_SERVER['HTTP_HOST']?>" />

Ich weiß, das Attribut host verhindert eine komplette Validierung, allerdings brauche ich in einigen Fällen nur den Host und in anderen die komplette BaseURL, da zum Beispiel die erstellen Formulare mit $form->create(...) schon die BaseURL enthalten.

Das wird man gleich sehen.

jQuery Action

Da sind jetzt in wenigen Zeilen mächtige Grundlagen gelegt worden, die man mit jQuery an seiner Seite ausnutzen möchte. Im Formular zur Erstellung eines neuen Exports habe ich ein Button "Neue Exportdatei", die bei Klick in den Container div#new das Formular lädt um eine neue Datei zu speichern. Nichts leichter als das:

$ajax({
  url: $('base').attr('href')+'exportfiles/add/export:'+$('#ExportEditForm').attr('rel'),
  dataType: 'html',
  success: function(form) {
      $('#new').html(form);
  }
};

Als benannten Parameter wird die ID des aktuellen Exports übergeben. Im Controller steht diese Information im Array $this->params['named'] zur Verfügung. Von da wird sie an den View übergeben und hier wird, sofern gesetzt ein verstecktes Formularfeld erzeugt, anstatt der gebackenen Liste der vorhandenen Exports.

Mit der Verwendung des Ajax-Layouts und der Angabe dataType: 'html' steht in der Variable form der Success Funktion genau das Formular zur Verfügung, welches im View definiert wurde.

JSON benutzen

Wenn das Formular ausgefüllt wurde, muss man das Abschicken abfangen. Leider unterstützt die Live Funktion noch nicht den Event submit, deshalb muss man sich mit einem Klick auf den Submitbutton helfen.

$('#new .submit input').live('click', function() { ... });

Das wirklick spannende ist natürlich auch hier die Ajaxanfrage und das Geheimnis liegt im dataType: 'json'.

$.ajax({
  url: $('base').attr('host')+$form.attr('action'),
  data: $form.serialize(),
  type: 'POST',
  dataType: 'json',
  success: function(content) {
    if(content.saved) {
        $form.closest('fieldset').prev().find('ul')
            .find('li.empty').remove().end()
            .append('<li>Neuer Eintrag <b>'+$form.find('input[type=text]:first').val()+'</b> angelegt.</li>');
    }
    else {
        alert("Leider ist ein Fehler beim speichern aufgetreten.");
    }
  }
});

In der Variable $form ist das jQuery Objekt gespeichert, welches das Formular widerspiegelt, dass gerade abgeschickt wurde. Da man immer wieder darauf zugreifen muss, macht es Sinn das in eine Variable zu legen um Zeit bei der Abarbeitung zu sparen.

In der Variable content stehen jetzt dank AppController und RequestHandler alle View-Variablen zur Verfügung. Über das Auslesen des Attributs Action des Formulars muss man sich nicht mal mehr Gedanken machen wo das Formular überhaupt abgearbeitet wird. Wichtig ist nur das in der entsprechenden Funktion ein Status gesetzt wird:

$this->set('saved', true);

Fazit

Nach genau dem gleichen Prinzip funktioniert auch das Löschen oder jeder andere Anwendungsfall der einem einfällt. Ich bin im Moment mal wieder begeistert von diesen beiden tollen Frameworks und den schier unerschöpflichen Möglichkeiten.

Demnächst gibt es dann hoffentlich mal die Vorstellung von einem fertigen Tool. Bis dahin freue ich mich auf Fragen und Verbesserungsvorschläge. Vielen Dank fürs lesen!

Das Problem mit den Dingern, ist die dynamische Veränderung. Ein einfaches $("select").find("option:first").remove(); funktioniert zwar zum entfernen, aber das hinzufügen von Options ist schon schwieriger (-böser Blick zum Internet Explorer-). Und wenn die Selectbox sich dann an einer weiteren orientieren soll, dann wirds haarig.

Die Lösung ist das Klonen und verstecken der "originalen" Box. Aus dem Klon kann man dann die überflüssigen Auswahlmöglichkeiten entfernen.

Und jetzt folgt der Artikel wie man das effizient anstellen könnte. Natürlich Hand in Hand mit jQuery.

Das Problem

Folgende Anforderung bestand im aktuellen Projekt: In der ersten Selectbox wird die Frequenz gewählt (monatlich, vierteljährlich usw.). Die zweite Box bietet eine Auswahl an Monaten zur Angabe der Dauer.

<select name="frequency" class="frequency">
  <option value="1">monatlich</option>
  <option value="3">vierteljährlich</option>
  <option value="6">halbjährlich</option>
  <option value="12">jährlich</option>
</select>

<select name="months" class="months">
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
  <option value="11">11</option>
</select>

Theoretisch

Sehr einfach zu erklären: Der Anwender wählt in der ersten Auswahl "halbjährlich" - darauf hin stehen in der Monatsauswahl nur noch "0" und "6" zur Verfügung. Welcher Monat angezeigt wird, kann ganz einfach mit der Modulo-Operation berechnet werden. Darüber hatte ich mich auch schon im Blog ausgelassen.

Der Klon wird mit der Klasse active gekennzeichnet und muss vor der nächsten Veränderung entfernt werden.

Praktisch

Jetzt wirds nett. jQuery ist natürlich im Projekt eingebunden. Sobald das Dokument geladen wurde, muss ein Eventhandler auf die Frequenzauswahl gelegt werden.

jQuery(function($) {
  $("select.frequency").onChange(function() {
  //hier gehts weiter!!
  });
});

Diese Form ist besser als das überall gesehene $(document).ready(function() {}), denn die $ Funktion muss nicht mehr zwangsläufig von jQuery besetzt sein, sondern wird dem eigenen Code als Parameter übergeben.

Als nächstes beschreibe ich alle Schritte zum Ändern der Selectbox $("select.months") einzelnd. Anschließend gibts nochmal die komplette Funktion unkommentiert im Ganzen.

new_frequency = $(this).val();
$form = $(this).parents("form:first");

Die Auswahl wird in new_frequency zwischengespeichert und das umfassende Formular in der Variable $form abgelegt, um später schneller darauf zugreifen zu können.

Die Variable $form beginnt mit einem Dollarzeichen. Damit kennzeichne ich Variablen, die ein jQuery-Objekt enthalten. So ist es leicher, diese im weiteren Verlauf zu erkennen. Dieses Vorgehensweise kann ich wärmstens empfehlen.

if($("select.months.active", $form).length > 0) {
  $("select.months", $form).filter(".active").remove().end().show();
}

Mit der Anweisung $("select.months.active", $form).length werden alle Selectboxen mit der Klasse active gesucht. Sind diese vorhanden, werden beide Selectboxen (die ggf. versteckte und der Klon) selektiert.

Mit der Funktion filter(".active") wird davon die aktive Selectbox ausgewählt und entfernt. Das end() setzt die Auswahl von filter() zurück und show() zeigt die übrig gebliebene Selectbox an.

jQuery Power in einer einzigen Zeile! Aber es wird noch besser...

Die Selectbox mit der Klasse .months muss geklont werden, verändert, angezeigt und die ursprüngliche Box versteckt werden. Zum Glück braucht man dazu auch nicht mehr als eine Zeile.

$("select.months", $form).clone().hide().insertBefore("select.months").end().addClass("active").find("option").filter(function(i) { return i%new_frequency == 0 ? false : true; }).remove();

Sieht komplizierter aus als es ist. Man kann es praktisch Stück für Stück lesen:

1. $("select.months", $form) sucht die Selectbox im aktuellen Formular mit der Klasse months.
2. clone() kopiert die aktuelle Auswahl und speichert sie irgendwo zwischen. Die Auswahl besteht nicht aus dem Klon, sondern der ursprünglichen Auswahl.
3. hide() - deshalb kann die Auswahl, also die erste Selectbox, auch einfach versteckt werden. Das passiert nach dem klonen, damit der Klon nicht extra wieder eingeblendet werden muss.
4. insertBefore("select.months") fügt den Klon vor der Selectbox ein.
5. end() setzt die Auswahl zurück. Damit besteht die Auswahl aus dem Klon und nicht mehr aus der ursprünglichen Selectbox.
6. addClass("active") fügt die Klasse hinzu damit der Klon später erkannt werden kann.
7. find("option") sucht alle Optiontags innerhalb der geklonten Selectbox.
8. filter(function(i) { return i%new_frequency == 0 ? false : true; })
   Ein großartiges Stück jQuery präsentiert hier die ganze Power der filter() Funktion. Dieser kann man nicht nur einen Tagnamen, eine ID oder eine Klasse übergeben, sondern auch eine anonyme Funktion! Anhand dieser wird jedes enthaltene Element überprüft. Gibt die Funktion true zurück, bleibt das Element in der Auswahl; ansonsten fliegt es raus.
   Diese Funktion besteht nur aus einer simplen Berechnung und schmeißt alle Monate raus, welche zur gespeicherten Frequenz passen.
   Schön, oder?
9. remove() entfernt dann die übrig gebliebenen Auswahlmöglichkeiten.

Fertig! Eine einzige Zeile klont und bearbeitet die Auswahlmöglichkeit. Und das sooft der Benutzer möchte. So sieht die Funktion im ganzen aus:

$(".frequency").change(function() {
  new_frequency = $(this).val();
  $form = $(this).parents("form:first");
  
  if($("select.months.active", $form).length > 0) {
    $("select.months", $form).filter(".active").remove().end().show();
  }
  
  $("select.months", $form)
      .clone().hide().insertBefore(".plan:visible select.months").end().addClass("active")
      .find("option").filter(function(i) { return i%new_frequency == 0 ? false : true; }).remove();
});

Fazit

Ich mag jQuery. Kennst du eine besser Lösung? Mal abgesehen von Plugins die das ganze mit einem unüberschaubaren Overhead erledigen?

Ansonten viel Spaß mit abhängigen Selectboxen.

Da hilft nur eins: während der Eingabe dem Benutzer direkt passende Tags vorschlagen. Eine automatische Vervollständigung wie beim Mailen in den großen sozialen Netzwerken oder beim suchen bei Google.

Zum Glück haben sehr schlaue Leute schon diverse Plugins erstellt, welche einen JSON String oder eine simple Textliste verarbeiten können. Zum Beispiel Autobox2. Gleich mal die Demo angucken, runterladen und dann ins eigene Projekt integrieren.

So funktionierts...

Vorbereitung

Bestimmt ist jQuery schon im gesamten Projekt verfügbar, wenn nicht, muss es unter views/layouts/default.ctp mit Hilfe des Javascript Helpers eingebunden werden:

echo $javascript->link('jquery.min');
echo $javascript->link('jquery.action');
echo $scripts_for_layout;

Der Javascript Helper sucht die Dateien automatisch im Ordner webroot/js/ und bindet sie ein, sofern sie vorhanden sind. In der Datei jquery.action.js befindet sich mein eigenes Script in dem das Verhalten der Seite gesteuert wird.

Sehr wichtig für den nächsten Schritt ist die Ausgabe der Variable $scripts_for_layout. Diese kann von jedem View aus befüllt werden. Das brauchen wir im View der Edit/Add Methode vom Model:

$javascript->link(array(
  'jquery.templating',
  'jquery.ui.autobox.ext.js',
  'jquery.ui.autobox.js'
), false);

Damit werden die Javascript Dateien nicht überall eingebunden, sondern nur auf den Seiten auf denen sie auch benötigt werden.

Nach dem gleichen Prinzip, aber mit dem HTML Helper wird die Autobox CSS Datei eingebunden.

$html->css('jquery.ui.autobox.css', null, array(), false);

Und da wir gerade dabei sind, bietet es sich an diese Datei zu öffnen und in der Zeile 66 den Pfad zum close.gif anzugeben. Wenn sich alles in den korrekten Ordnern befindet ist es einfach:

background: url('../img/close.gif');

Aussehen wird es gut, aber im Moment weiß das Script nicht wo es sich befindet. Damit die Baseurl auch in Javascript zur Verfügung steht, habe ich mir angewöhnt im HTML Gerüst das Basetag zu erweitern:

<base href="http://<?=$_SERVER['HTTP_HOST']?><?=$this->base?>/" host="http://<?=$_SERVER['HTTP_HOST']?>" />

Mit dieser Zeile im Layout wird später vieles einfacher. Leider validiert es mit dem Attribut host nicht mehr, wer darauf Wert legt, muss sich also eine andere Lösung überlegen.

jQuery Action

Jetzt gehts los und das Plugin wird initalisiert. Ich mache das gerne in der Datei jquery.action.js. Um es auf die schnelle zu testen, kopiere ich einfach das Beispiel aus der Demo. Gemäß des letzten Posts zu HABTM heißt mein Feld temp_tags. Das resultiert in der ID ModelTempTags:

jQuery(function($) {
  
  var list1 = [{text: 'Curious George'}, {text: 'George of the Jungle'}, {text: 'Felix the Cat'}];
  
  $('#ModelTempTags').autobox({
    list: list1,
    match: function(typed) { return this.text.match(new RegExp(typed, "i")); },
    insertText: function(obj) { return obj.text },
    templateText: "<li>Hey: <%= text %></li>"
  });
});

Seite neuladen, und... herrlich! Funktioniert. Nur eine Kleinigkeit: Die vorhandenen Tags werden nicht übernommen. Zum Glück hilft eine einzige Zeile um das Problem zubeheben. Innerhalb der Autobox Konfiguration wird die Vorbelegung (prevals) angegeben:

prevals: $('#LinkTempTags').val().split(', ')

Mit dieser Zeile wird der Inhalt ausgelesen, beim Komma geteilt und der Autobox als Vorbelegung übergeben. Dann kanns jetzt losgehen mit der asynchronen Datenübertragung. Das Attribut list in der Autobox Konfiguration wird ausgetauscht mit einer URL:

ajax: $('base').attr('href')+'tags/index',

Damit wird im Parameter val die Benutzereingabe an den Tags Controller geschickt. Und der muss jetzt noch reagieren.

Antworten mit CakePHP

Der Controller Tags ist dafür zuständig eine Liste zu genierieren. In der Variable $this->params['url']['val'] steht die Benutzereingabe zur Verfügung. Mit der wird eine Datenbankabfrage gestartet:

$tags = $this->Tag->find('all', array('conditions' => array('title LIKE' => $this->params['url']['val'].'%'), 'order' => 'Tag.title ASC'));

Mit Hilfe der RequestHandler Componente wird ein Ajaxaufruf erkannt. Dafür muss die Componente im Controller eingebunden werden.

class TagsController extends AppController {
  var $components = array('RequestHandler');

In der Index Funktion wird bei einem Ajaxaufruf der Renderingprozess gestoppt und purer Text zurück gegeben.

if($this->RequestHandler->isAjax()) {
  Configure::write('debug', 0);
  $this->autoRender = false;
  return '['.implode(',', Set::format($tags, '{text: "{0}"}', array('{n}.Tag.title'))).']';
}

Besondere Aufmerksamkeit verdient die letzte Zeile. Implode bekommt ein Array, das aus dem Core Utility Set stammt: Format. Eine großartige Funktion die ein verschachteltes Array umformatiert. In diesem Fall zu JSON Objekten, welche dann mit einem Komma verbunden werden.

Das wars! Kaum zu glauben, aber ein Neuladen macht die Einbindung komplett. Und den Webentwickler fröhlich!

Speichern im Model

Das Plugin erstellt für jeden Tag ein verstecktes Formularfeld, welches den gleichen Namen hat wie das Ursprungsfeld. Damit die eingegebenen Daten übertragen werden, muss der Name auf ein Array hinweise:

echo $form->input('temp_tags', array('name' => 'data[Model][temp_tags][]');

Der Trick sind die beiden eckigen Klammern am Ende. Damit steht die Eingabe im Model als Array zur Verfügung:

debug($this->data['temp_tags']);

Ganz normal. Aber: Mit ein bisschen jQuery lässt sich der Mouseover-Status schon bei einem Klick festsetzen. Das sieht gut aus und wirkt fast wie ein dynamisches nachladen der Seite.

Ansehen kann man sich diesen Effekt zum Beispiel hier im Hauptmenü oder auf der Seite von Isabel von Roon. Wie der Effekt eingebaut wird, was find(), filter() und siblings() bedeutet und wie man den aktiven Menüpunkt hervorhebt wird in diesem Artikel besprochen.

Die HTML Grundage

Das oben genannte Beispiel ist zu simpel, deshalb machen wir es etwas komplizierter undzwar mit einem verschachtelten Menü.

<div id="menu">
<ul>
<li><a href="#">Punkt 1</a></li>
<li>
<a href="#">Punkt 2</a>
<ul>
<li><a href="#">Punkt 2.1</a></li>
<li><a href="#">Punkt 2.2</a></li>
<li><a href="#">Punkt 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Punkt 3</a>
<ul>
<li><a href="#">Punkt 3.1</a></li>
<li><a href="#">Punkt 3.2</a></li>
<li><a href="#">Punkt 3.3</a></li>
<li><a href="#">Punkt 3.4</a></li>
</ul>
</li>
<li><a href="#">Punkt 4</a></li>
</ul>
</div>

Die Funktionsweise ist klar: Bei einem Klick ins Menü darf sich nur das jeweilige Menü verändern (die Nachbarn). Einfach die Aktiv-Klasse generell zu entfernen und dem angeklickten Menüpunkt zuweisen hätte zur Folge, dass beim Klick ins Submenü der darüber liegende Punkt seine Aktiv-Klasse verlieren würde.

Demo: Hier ansehen was ich meine.

Lovley jQuery

Wer jetzt an ein kompliziertes und umfangreiches Script denkt, der hat noch nicht genug mit jQuery gearbeitet. Denn die Anforderungen benötigen nur eine einzige Zeile:

jQuery(function($) {
  $('#menu a').click(function() {
    $(this).blur().parents('li').siblings('li:has(.active)').find('a').removeClass('active').end().end().end().addClass('active');
    return false;
  });
});

Was hier passiert ist wird jetzt Stück für Stück durchleuchtet:

jQuery(function($) {})
Diese Funktion wird aufgerufen, sobald das DOM fertig geladen wurde. Als Parameter wird das jQuery-Framework übergeben und in der Variable $ gespeichert. Mit dieser Schreibweise hat man weniger Stress, wenn ein Kollege auf die Idee kommt ein zweites Javascript Framework einzubinden (Grrr...)

$('#menu a').click(function() {})
Mit dieser Anweisung werden alle Links im Element mit der ID Menü selektiert und jeder einzelne bekommt einen Eventhandler zugewiesen: click.

In der Funktion ist der angeklickte Link in der Variable this gespeichert.

$(this)
Mit diesem Konstrukt wird der angeklickte Menüpunkt in ein jQuery-Objekt verwandelt, und liegt als einziges auf dem Elementstack.

.blur()
entfernt den gepunkteten Rahmen um den Link. Eine alternative Möglichkeit wäre outline:none im CSS anzugeben. Je nach belieben.

.parents('li')
Jetzt wird es spannend! Diese Funktion wählt alle Elternelemente aus. Mit der Einschränkung, dass sie vom Typ li sind.

.siblings('li:has(.active)')
Siblings steht für Nachbarn. Diese Funktion findet nur die benachbarten Elemente. Klickt man also auf ein Untermenü, befinden sich nach siblings() alle LI Elemente dieser Liste im Stack.

Mit der Übergabe eines Selectors kann man die Nachbarn auch gleich einschränken. li:has('.active') steht für alle LI Elemente welche ein Objekt der Klasse .active beinhalten.

Alternativ könnte man auch die Funktion filter() benutzen. Mit siblings('li') werden alle benachbarten LI Elemente ausgewählt. Anschließend mit filter(':has('.active')') auf das enthalten sein eines aktiven Links geprüft. Und genau hier liegt der Unterschied zwischen filter() und find():

Filter() filtert die Elemente im Stack. Find() sucht innerhalb der Elemente im Stack. Logisch, oder?

Mit siblings('li:has(.active)') sparen wir uns eine Anweisung und im Stack befinden sich alle benachbarten Elemente, die einen aktiven Link beinhalten. Weiter gehts.

.find('a')
Innerhalb des LI Elements wird jetzt nach dem aktiven Link gesucht und dieser ausgewählt.

.removeClass('active')
Entfernt die Klasse von dem Link. (Bitte daran denken keinen Punkt vor der Klasse anzugeben!)

.end()
Mit der Funktion end() wird eine Veränderung im Elementstack rückgängig gemacht. Dabei bezieht sich das end() immer auf die als letztes getätigten Veränderungen.

Das erste end() macht also das find('a') rückgängig, im Stack befinden sich jetzt wieder die LI Elemente mit einem (ehemals) aktiven Link.

.end()
Als nächstes werden die Nachbarn aus dem Stack geworfen. (siblings)

.end()
Und jetzt noch die Elternelemente raus und wieder zurück zum Kind: $(this). Wir befinden uns jetzt wieder ganz am Anfang der Auswahl und es bleibt nur noch eine Funktion:

.addClass('active')
Diese Funktion weißt dem angeklickten Link die passende Klasse zu, damit beim nächsten Klick das ganze Spiel wieder von vorne beginnen kann.

Das wars!

Im Beispiel habe ich noch ein return false; hinzugefügt. Diese Anweisung verhindert, dass der Browser sein Standardverhalten abspielt (bei Links die angeklickte Seite aufrufen). In einer wirklichen Umgebung darf das natürlich nicht vorkommen.

Ich hoffe ihr konntet etwas aus diesem Artikel mitnehmen. Weitere jQuery Fragen und Beispiellösungen stelle ich gerne auf Anfrage vor. Nur rein in die Kommentare.

Frohes verketten!

jQuery bietet ja ein tolles Ajaxkonstrukt an mit dem es kein Problem ist Daten vom Server zu holen. Aber auf die Dauer wird es doch etwas nervig immer wieder zu tippen.

Und weil "objektorientiertes Javascript" und selber entwickeln so viel Spaß macht, habe ich mir eine alternative Lösung einfallen lassen: Im Projekt werden an geeigneter Stelle Elemente erzeugt, die alle benötigten Informationen enthalten.

Diese werden in einem Updater registriert, welcher sich um die regelmäßige Abfrage kümmert. Das war die Theorie und jetzt kommt die Praxis.

Das Element

Ein Element besteht aus einer URL auf dem Server, dem Typ der zurückerwartenden Daten und einer Funktion die aufgerufen wird, wenn die Aktion erfolg hatte. Im Quelltext sieht das so aus:

var Paul = new element('count/paul', 'json', function(j) {
  alert("Paul hat "+j.count+" Einträge.");
});

Diese Elemente können überall im Projekt erzeugt werden. Alternativen zu json sind alle Formen die jQuerys Ajaxfunktion erkennt: Html, Text und Jsonp.

Der Updater

Ganz am Anfang (oder am Ende, je nach Geschmack) wird der Updater initalisiert:

var Updater = new updater();

Der Updater akzeptiert zwei Einstellungen:

Updater.intervall = 1000; // Zeit bis zur nächsten Abfrage
Updater.baseurl = "http://kleiner.test.com/"; // String der vor jede URL geschrieben wird

Und hat eine handvoll Funktionen für den dynamischen Umgang mit dem Objekt:

Updater.start(); // Startet den Vorgang sofern Elemente vorhanden sind
Updater.stop(); // Stoppt die Aktualisierungen
Updater.isRunning(); // Prüft ob sich der Updater in Aktion befindet
Updater.log(); // Schreibt alle gespeicherten Elementen in die Konsole
Updater.register(Element); // Fügt ein neues Element hinzu
Updater.remove(Element); // Entfernt ein Element

Die Verwendung

Dem Updater werden beliebig viele Elemente, auch zur Laufzeit, übergeben:

Updater.register(Paul);
Updater.start();

Das wars! Die Funktion im übergebenen Element wird jetzt, im erfolgsfall, alle 1000 Millisekunden aufgerufen.

Die technische Seite vom Element

So sieht das Element aus:

function element(url, dataType, successFunction) {

  //einstellungen
  this.url = url;
  this.data = {};
  this.type = 'get'
  this.dataType = dataType || 'html';

  //callback um die daten zu bekommen
  this.getData = function() {
    return this.data;
  }

  //callback um an die URL zu kommen
  //erster parameter ist die im Updater gespeicherte baseurl
  this.getUrl = function(BASEURL) {
    return this.url;
  }

  //callback wenn eine antwort vorliegt
  //erster Parameter ist die Antwort vom Server, zweiter der Updater an sich
  this.success = successFunction || function(html, Updater) {
    console.log('Anfrage #'+Updater.counter);
    console.log(html);
  }

  //callback wenn ein fehler aufgetreten ist
  //erster parameter ist der Updater an sich um dieses Element daraus zu entfernen
  this.error = function(Updater) {
    //bei einem fehler entfernt sich das objekt selbstständig aus dem updater
    Updater.remove(this);
  }

}

Zwei Funktionen sind wichtig: getData() wird aufgerufen, bevor die Anfrage an den Server gesendet wird. Der Rückgabewert der Funktion wird an den Server geschickt.

Damit ist es also möglich, auf Veränderungen im Frontend zu reagieren. Zum Beispiel:

Paul.getData = function() {
  return {relation: $('body').attr('rel'), project: $('#project_selector').val()};
}

Schön, oder? Natürlich kann man sich noch viel einfallen lassen. Etwa mit der URL, welche mit Hilfe der Funktion getUrl() aus dem Element geholt wird. Es soll ja Fälle geben (CakePHP), bei denen es leichter ist Daten per URL zu übergeben:

Paul.getUrl = function(BASEURL) {
  return BASEURL+this.url+'/'+$('#team .paul').attr('rel');
}

Die Funktionen success(return, Updater) und error(Updater) erklären sich von selbst und haben als Parameter immer das umfassende Element dabei. Deshalb kann sich das Objekt in einem Fehlerfall auch selbstständig entfernen. Es könnte auch das Intervall verändern, ein neues Objekt hinuzfügen, oder was auch immer!

Die technische Seite vom Updater

Als erstes der gesamte Block Quelltext:

function updater() {

  //einstellungen
  this.intervall = 1000;
  this.elements = new Array();
  this.active_element = 0;
  this.baseurl = BASEURL;

  this.running = false;
  this.counter = 0;
  this.timeout = '';

  //alle elemente anzeigen
  this.log = function() {
    console.log(this.elements);
  }

  //neues element hinzufügen
  this.register = function(element) {
    this.elements.push(element);
  };

  //ein element entfernen
  this.remove = function(element) {
    for(i in this.elements) {
      if(this.elements[i] == element) {
        //delete this.elements[i];
        this.elements.splice(i, 1);
        return true;
      }
    }
    return false;
  }

  //elemente durchgehen
  this.process = function(active_element) {
    this.active_element = active_element || 0;

    if(this.elements[this.active_element]) {
      _this = this;
      _elem = this.elements[this.active_element];

      //ajaxaufruf
      $.ajax({
        //einstellungen
        url: _elem.getUrl(_this.baseurl),
        data: _elem.getData(),
        type: _elem.type,
        dataType: _elem.dataType,

        //hat funktioniert!
        success: function(result) {
          _elem.success(result, _this);
        },

        //ein fehler
        error: function(error) {
          //das object soll entscheiden wie es weitergeht
          _elem.error(_this);
        },

        //wie auch immer soll das nächste element aufgerufen werden
        complete: function() {
          _this.next();
        }
      });     

    }
    else {
      this.active_element = 0;
      this.next();
    }
  };

  //ruft process erneut auf, verzögert um intervall mit dem activen element
  this.next = function() {
    if(this.isRunning()) {
      //nur so zum spaß
      this.counter++;

      //zeit die bis zum nächsten aufruf vergehen soll
      var _intervall = 0;

      //nächstes element suchen
      this.active_element++;

      //schon am ende angelangt?
      if(this.active_element >= this.elements.length) {
        this.active_element = 0;

        //längerer intervall bis es wieder los geht
        _intervall = this.intervall;
      }

      //erneut aufrufen
      _this = this;
      _this.timeout = window.setTimeout(function() {
        _this.process(_this.active_element);
      }, _intervall);
      return true;
    }
    else {
      return false;
    }
  }

  //startet den vorgang
  this.start = function() {
    this.active_element = -1;
    this.running = true;
    this.counter = 0;
    this.next();
  }

  //stoppt das updaten
  this.stop = function() {
    this.running = false;
    window.clearTimeout(this.timeout);
    return this.counter;
  }

  //prüfen ob der Updater läuft
  this.isRunning = function() {
    return this.running;
  }
}

Nett, oder? Was ist passiert? Die Einstellungen sollten klar sein. In der Variable timeout wird der aktuelle Timeout gespeichert. Damit kann man beim Abbrechen alle Verbindungen trennen, anstatt noch eine ausführen zu müssen.

Log(), register() und remove() sind an sich uninteressant. Außer eine Erwähnung, dass der Operator delete ein Element zwar entfernt, aber danach nicht das Array neu durchnummeriert. Da liegen dann lauter "undefinied" rum. Deshalb habe ich splice() benutzt. Funktioniert super.

Spannend wird es in der Funktion process(). Diese wird für jedes Element aufgerufen. Als Parameter erwartet sie den Key vom aktiven Element. Wenn ein Element vorhanden ist, wird die Ajaxabfrage ausgeführt.

Innerhalb der Funktion Ajax() bekommt das this eine neue Bedeutung. Deshalb musste ich es in _this zwischenspeichern.

Die Funktion ruft also, je nach umstand, success() oder error() auf und übergibt die Kontrolle an das Element. In jedemfall wird aber _this.next() durch die Funktion Ajax.complete() aufgerufen. Diese wird, unabhängig vom Status, nach jeder Ajaxanfrage ausgeführt.

In der Funktion next() wird das nächste Objekt gesucht. Sofern der Updater läuft isRunning() wird der Counter erhöht und das Intervall auf Null gesetzt. Das passiert, weil alle registrierten Elemente sofort nacheinander aufgerufen werden sollen und erst anschließend die in this.intervall angegebene Zeit gewartet wird.

Wenn alle Elemente durchgearbeitet wurden, wird der Index auf Null und der Intervall auf die eingestellte Zeit gesetzt.

Anschließend gibt es ein klassisches window.setTimeout() um das ganze Spielchen wieder von vorne anzufangen.

Start(), stop() und isRunning() erklären sich wieder von selbst, und damit ist die Vorstellung beendet!

Fazit

Der große nächste Erweiterungsschritt ist in dem Updater alle Anfragen zu sammeln und in einem Packet an den Server zu schicken. Die Antwort kann dann direkt vom Updater auseinander gefriemelt und an die verschiedenen Elemente verteilt werden.

Dazu muss der Server allerdings noch vorbereitet werden, und bisher sind es noch nicht viele Benutzer. Aber ich denke es ist eine solide Grundlage die gut erweitert werden kann.

Das war auch die Intention dieses Postings. Hast du einen Vorschlag? Kritik? Hinweis? Freue mich über Kommentare und Inspiration. Danke für die Aufmerksamkeit.