Archiv der Kategorie: JavaScript

Im jQuery tablesorter nach deutschem Datum sortieren

Den jQuery tablesorter kennen bestimmt viele, ich benutze diesen sehr häufig und gern. Allerdings kann das Ding von Haus aus nicht nach dem deutschem Datumsformat (dd.mm.yyyy [hh:mm]) richtig sortieren.

Hier dazu mein „Plugin“, dass in die entsprechende JavaScript Datei gehört:

$.tablesorter.addParser({
 id: 'germanDate',
 is: function(s) {
 return false;
 },
 format: function(s) {
 var dateMatches = s.match(/([0-9]{1,2})\.([0-9]{1,2})\.([0-9]{2,4}) ([0-9]{1,2}):([0-9]{1,2})/i);
 return dateMatches[3]+dateMatches[2]+dateMatches[1]+dateMatches[4]+dateMatches[5];
 },
 // set type, either numeric or text
 type: 'numeric'
 });

$('#tblApps').tablesorter({
 sortList: [[1,0]],
 headers: {
 0: { sorter: false },
 2: { sorter: 'germanDate' },
 3: { sorter: false }
 }
 });

Damit kann mein Frontend nun auch innerhalb von Tabellen nach Terminen im deutschen Datum richtig sortieren.

JSONP mit jQuery

JSON Daten mit jQuery zu senden sollte ja kein Problem mehr sein.

Allerdings: Möchte ich die Daten nicht an „mich“ selbst, sondern an eine andere Domain senden, dann funktioniert das nicht mit jQuery.post(), da JSON unter die „Single Domain“ Policy fällt … die ja auch eine sinnvolle Einrichtung ist.

Allerdings wird es in Zeiten immer engerer Vernetzung mitunter nötig, Daten vom Kundenserver A beim Dienstleister B abzufragen. Dazu braucht man dann JSONP – JSON mit Padding.

Wie bereits erwähnt, unterstützt jQuery.post() das ganze nicht, hauptsächlich darum, weil es nur JSON, HTML, XML oder Script verarbeitet (siehe Doku) … leider 🙁

Doch jQuery’s AJAX Funktionen bieten ja auch die jQuery.ajax()-Methode selbst an, die wir beliebig konfigurieren können.

Heraus kommt dann solch ein Konstrukt, welches in der Lage ist, die JSON Daten auch an andere Domains zu senden. Leider werden diese nicht im „reinen“ JSON Format gesendet, sondern als „data“ Parameter in JSON Format … das Serverscript sollte da etwas tolerant sein 😉

myJSONObject sollte natürlich vorher korrekt initialisiert worden sein.


$.ajax({
type: 'POST',
url: 'http://example.com/subfolder/script.php',
contentType : 'application/x-www-form-urlencoded',
data: {data: JSON.stringify(myJSONObject)},
success: function(data){
console.log('succ');
console.log(data);
},
dataType: 'jsonp'
});

Viel Erfolg damit 😉

Text beim focus automatisch (vor)auswählen mit jQuery

Automatisch den Inhalt des Elements auswählen, wenn es den Fokus erhält (reinklicken, reinTABen). Das ganze mit jQuery. Mit Dank an Sam.


$("input, textarea").focus(function()
{
if(this.value == this.defaultValue)
this.select();
});

jQuery Datepicker in Deutsch

jQuery’s Datepicker ist eine tolle Sache, leider funktioniert das ganze für deutsche Sprache nicht wie in der Doku beschrieben.

Allerdings habe ich in Dennis Blog einen super Eintrag entdeckt, wie es doch geht. Ein paar kleine Umformatierungen, da ich bei mit sowohl jQuery wie auch mootools einsetze und das ganze kann losgehen.


jQuery(function(jQuery)
{
jQuery.datepicker.regional['de'] = {clearText: 'löschen', clearStatus: 'aktuelles Datum löschen',
closeText: 'schließen', closeStatus: 'ohne Änderungen schließen',
prevText: ' nextText: 'Vor>', nextStatus: 'nächsten Monat zeigen',
currentText: 'heute', currentStatus: '',
monthNames: ['Januar','Februar','März','April','Mai','Juni',
'Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
'Jul','Aug','Sep','Okt','Nov','Dez'],
monthStatus: 'anderen Monat anzeigen', yearStatus: 'anderes Jahr anzeigen',
weekHeader: 'Wo', weekStatus: 'Woche des Monats',
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayStatus: 'Setze DD als ersten Wochentag', dateStatus: 'Wähle D, M d',
dateFormat: 'dd.mm.yy', firstDay: 1,
initStatus: 'Wähle ein Datum', isRTL: false};
jQuery.datepicker.setDefaults(jQuery.datepicker.regional['de']);
});

Den Code bindet ihr einfach in euer JavaScript ein und ruft euren Datepicker ganz normal nun in Deutsch auf.

Viel Erfolg…

POST Parameter in JavaScript benutzen

Nachdem der letzte Beitrag wohl etwas irreführend war, hier mal ein Bericht mit dem Ziel, POST Parameter in JavaScript zu benutzen.

Nachdem man ja GET-Parameter relativ leicht auslesen kann, will ich hier nur auf die POST-Parameter eingehen.

Zunächst einmal muss man beschreiben, was denn nun bei einem POST-Request passiert und warum man nicht einfach per JavaScript darauf zugreifen kann.

Ganz kurz: Per POST werden Daten vom Browser (Client) an den Webserver (Server) gesendet, wo diese dann ausgewertet werden können. Der Client “wartet” solange auf Antwort, bis der Server diese sendet. In der ganzen Zeit kann man mit “normalem” JavaScript nix anfangen, da der Client-Code ja noch gar nicht im Browser ist. Sendet der Server nun eine Antwort, so erhält der Browser einfach neue Parameter, ähnlich wie beim GET, nur sind die POST-Paramater nicht zugänglich, weil diese in dem Moment nirgendwo mehr gesetzt sind.
Soviel zur Basis.

“Und wie komme ich nun an die Parameter ran?”
Gute Frage und ebenso leicht zu beantworten. Den POST muss Serverseitig ja irgendeine Serverseitige Scriptsprache entgegennehmen (nehmen wir mal rein zufällig … ähm … PHP) und diese kann dann auf die Eingabe reagieren und eine neue Seite bauen.

Damit ich nun Clientseitig wieder die POST-Daten habe, muss ich mir von PHP aus die POST-Daten irgendwohin in die Antwort an den Browser schreiben, wo JavaScript auch was damit anfangen kann.

Beispiel, ein Kontaktformular (ganz simpel):

<form action="formular.php" method="POST">
<input name="meinname" type="text" />
<input name="senden" type="submit" value="absenden!" />
</form>

Wir möchten nun, nachdem das Formular abgesendet wurde, auf der Antwortseite eine alert-Box aufpoppen lassen, die “Danke, xyz” sagt (ist wirklich ein sehr einfaches Beispiel, oder?)

Okay, der Code für formular.php

<?php if (isset($_POST['meinname'])) { ?>
<script>
var derNameLautet = <?=$_POST['meinname']?>;
alert('Danke, ' + derNameLauetet);
</script>
<?php } ?>

So, nun wird, wenn ein POST vorliegt, der POST-Wert in eine JavaScript Variable geschrieben. Diese kann ich dann für vieles Benutzen, ich hoffe, das Prinzip ist klar.

Aber ich habe einen AJAX-POST, wie mache ich das denn da?
Noch einfacher, der AJAX-POST verlässt ja die Seite nicht, d.h. die Werte, die per POST gesendet wurden, liegen ja noch immer vor und können recht einfach weiterbenutzt werden.

So, diesmal sollte das ganze Prinzip klarer sein, warum ein Auslesen der POST-Variablen in JavaScript mittels

<script>
var meinePOSTVariable = POST[‘postVariable’];
</script>

schlicht nicht möglich ist.

Läuft, läuft nicht, läuft nicht immer …

Eine neue tolle Web-GUI, umgesetzt mit jQuery. AJAX, Bilder, Layout und Farben, alles perfekt abgestimmt, mehrmals auf Funktion getestet, auch auch verschiedenen Rechnern.

Alles super.

Also: Freigabe, Bekanntgabe der URL und auf Lob warten.

Kurze Zeit später, der Endbenutzer am Telefon, in Erwartung von (verdientem) Lob gehe ich ran, nur um zu hören: “Geht nicht!”.

Völlig perplex öffne ich die Seite, alles funktioniert.

HTML lädt, CSS: perfekt, Javascript: vorhanden, jQuery: alles roger.

Woran liegt’s dann?

Fehlerkonsole vom Firefox aufgemacht und siehe da: Eine Fehlermeldung: “console nicht bekannt“ in Zeile xyz”

Cool, ein vergessenes Kommando “console.log”, die uns zu debugzwecken Ausgaben in Firebug liefert, führt nun dazu, dass der Endbenutzer unsere schöne GUI nicht bedienen kann, weil der natürlich nicht Firebug installiert hat. Großes Aha!

Kleine Ursache, lange Suche …

jQuery und der HTML-Head Bereich

Habe grade etwas länger zur Lösung dieses Problems verpulvert und möchte damit allen helfen, die ähnliche Probleme haben.

Ziel war es, über eine Suchfunktion mittels AJAX und jQuery ein neues Tab zu öffnen und dort die Suchinfos darzustellen und zwar ebenso, wie schon bereits vorher angezeigte “festen” Infos dargestellt wurden. Dazu gehörte auch, dass ein Klick auf eine Zeile einen jQuery-Dialog öffnet und dort mehr Informationen angezeigt werden.

Nun, die “normalen” Informationen mit dem jQuery-Dialog anzuzeigen war kein Problem, das Problem entstand, als ein neues jQuery-Tab hinzukam, dass die Ergebnisse der Suche als GET-Request darstellte (jQuery-Tab mit URL als Referenz).

Nach der Durchführung einer Suche funktionierte keine jQuery-Funktion mehr, also öffnete sich kein Info-Fenster.

Nun, ich mache es kurz: Die Lösung ist nun, dass in der Antwort des Requests nicht nur die Daten mit Layout enthalten waren, sondern eine komplette HTML-Seite und diese auch inklusive Bereich. Und dort war wiederrum ein Verweis auf jQuery enthalten; allerdings ohne die Datei, die die ganze jQuery-Logik für diese Seite beinhaltet.

jQuery lädt also neu und “kennt” dannach die Logik für die aktuelle Seite nicht mehr; ergo: Keinerlei Funktion mehr auf der Seite.

Evtl. sollte jQuery hier nachbessern und die im Speicher befindlichen Scripte nicht “vergessen”, wenn es sich selbst neu lädt. Am besten, es läßt sich gar nicht mittels eines neuen Aufrufes von neu laden, denn das störte an dieser Stelle das Vorwärtskommen doch enorm.

So, ich hoffe, ich konnte irgendeinem von euch helfen, so daß ihr nicht allzulange braucht, um eure Problem zu lösen.

Google aktualisiert Chrome auf Version 3

Ab und zu benutze ich Google´s Chrome Browser. Ich finde diesen Browser recht gut, vor allem schnell. Leider fehlt mir – um komplett zu wechseln – die möglichkeit, Add-On´s zu installieren. Ich brauche, berufsbedingt, solche Sachen wie Firebug und co., um vernünftig und effektiv arbeiten zu können. Gut, bei Chrome heißen die Add-On´s Extensions und kommen irgendwann mit Version 3.

Nun, gestern meine Überraschung. Ich starte Chrome, alles okay. Ich surfe etwas, mache Chrome kurz dannach wieder aus. Surfe noch was mit Firefox, mache dann Chrome wieder an und siehe da: Die Seite “Neuer Tab” sieht schon ganz anders aus. Ein Blick in die Info und siehe da: Chrome Version 3.0.195.21. Cool, die Version 3 ist aus dem Beta und mittlerweile stable, sehr schön.

Kleiner Test mit den Extensions, aber: Funktioniert immer noch nicht, weil deaktiviert. Gut, warte ich noch eine Weile, aber Firefox lebt mittlerweile echt gefährlich.

Ein wenig hoffe ich auch darauf, dass Mozilla sowas wie Memory Management und schnelleres Startverhalten noch in eines der nächsten Releases hinbekommt. Firefox ist toll zum arbeiten, Chrome sehr gut zum surfen auf JavaScript-lastigen Seiten – zum Beispiel in Browsergames.

Schauen wir mal, was die Zukunft bringt.

Kleiner Randbeitrag: SR Ware´s Iron Browser – Chrome ohne Google sozusagen – ist ebenfalls in Version 3.0.197.0 erschienen. Beim Iron sind aber die Extension aktiviert. Leider funktioniert schon das Google eigene GMail-Checker nicht richtig, auch an dieser Baustelle (Iron Browser) muss ich also noch was warten.

Automatische Aktualisierungen mit jQuery

Wer mit jQuery arbeitet, der baut sich schnell viele Funktionen, die die Arbeit erleichtern sollen. Leider fehlt jQuery sowas wie ein Timer, der bestimmte Funktionen immer wieder aufruft … der JavaScript Erfahrene Entwickler weiß genau: „Da nehme ich doch setInterval()„.

Genau, und mit setInterval() kann ich auch jQuery Funktionen aufrufen.
Habe ich beispielsweise eine jQuery-Funktion zum AJAX nachladen von Daten wie

jQuery.fn.loadSomething = function()
{
…..// mach was, z.B. einen AJAX-POST oder sowas…
}

dann kann ich in in meiner ready Funktion sowas hier schreiben:

$(document).ready(function()
{
…..setInterval(„$(this).loadSomething();“,30000);
});

Das ruft mir nun alle 30 sekunden meine jQuery-Funktion loadSomething auf, in der ich allerhand Schabernack treiben kann.

Sehr praktisch…