Archiv der Kategorie: jQuery

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 😉

Memo an mich selbst #1

Lieber Sascha,

  1. Versuche nicht, eine Zend_Mail ohne addTo zu senden #pfui #böse
  2. setFrom ist bei Zend_Mail wirklich sinnvoll zu setzen #thumbsup
  3. jQuery.post result data auf größer-gleich 1 prüfen, nicht auf größer 0 #uiuiui
  4. Zend_Mail->send schmiert ab, wenn die Adressen ein ( oder ) enthalten #pfuipfui
  5. Lobet den Debugger im Zend Studio #thumbsupupup
  6. Preiset Firebug #findeKeinGeeignetesTag
  7. Lade die geänderte config-Datei auch hoch, du Depp! #facepalm

Ansonsten alles Spaghetti…
Schönen Abend noch…

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.

Dynamische Daten mit jQuery in eine Textarea schreiben

Beim Versuch, dynamisch nachgeladene Daten in eine Textarea schreiben zu wollen, bin ich auf eine besonderheit der textarea hereingefallen.
Normal funkioniert es ja mit z.B. einem so

$(’span#meinspan‘).html(meinedaten);

Alternativ natürlich auch mit .text.

Okay, nun wollte ich Daten in eine Textarea schreiben:

$(‚textarea#meineta‘).html(meinedaten);

Aber die TA blieb leer. Firebug zeigt zwar an, dass der Inhalt von ‚meinedaten‘ korrekt platziert ist, er wird aber nicht angezeigt. Nanu?

Dann komme ich doch drauf: Die TA wird als Formularfeld behandelt, und alle Formfelder werden nicht mit .html sondern mit .val gesetzt, also so

$(‚textarea#meineta‘).val(meinedaten);

Nun zeigt der Browser alles korrekt an.

Ich habe zwar schon vorher Form-Felder mit val gefüllt, kam aber in bezug auf die TA nicht auf diese Lösung,da ja in einem die Werte in value=““ bereichen stehen, in der TA aber zwischen dem öffnenden und dem schließenden Tag, also käme dort ja das .html richtig.
Naja, Spezialfall eben, merkt es euch und nicht in diese Falle laufen 😉

jQuery, bitte helfen Sie … nicht!

Wer bei jQuery ein Support Ticket aufgibt oder einen Bug via Trac meldet, dem sollte klar sein, dass die Menschen dort nicht gerade die nettesten sind, genauer gesagt sieht es so aus, als wäre z.B. ein gewisser „scott.gonzalez“ ein recht schroffer und unfreundlicher Typ.

Ich dachte einst, ich hätte einen Fehler in jQuery gefunden und meldete diesen auch. Ich beschrieb das Problem und lieferte Sourcecode mit, natürlich nur einen Teil (das nötigste) und auch mit anderen Funktionsnamen. Dabei können einem durchaus Fehler passieren, nicht aber „scott.gonzalez“, der ist nä(h)mlich perfekt, wie es scheint.
In meiner Beschreibung – genauer gesagt im Sourcecode – hatte sich ein Schreibfehler eingeschlichen.
Ich schrieb:

$(document).ready(function()
{
// Add some dynamic content here
$(‚div#mydiv‘).html(‚myLink“>Click me!‘);

// Try to make some event with it…
$(‚a#mylink‘).click(function(){
console.log(‚Hello World…‘);
});
};

Die betreffende Stelle habe ich mal hervorgehoben. Ich schrieb oben „myLink„, unten jedoch – Asche auf mein Haupt – nur „mylink„, also einmal großes L, einmal kleines l.
Das dies ein simpler Vertipper sein kann sollte eigentlich jemanden klar sein, der Support leistet. Aber „scott.gonzalez“ – mein Bearbeiter bei jQuery – ist da stur wie ein Roboter. Anstatt sowas zu sagen wie

„Hey, du hast da einen Tippfehler drin, kleines l statt großem L, aber ich gehe mal davon aus, dass das nicht das eigentlich Problem ist. Wenn ich da nämlich ein großes L reinmache sehe ich, dass es immer noch nicht geht und das liegt daran: ….“

Cool – wie „scott.gonzalez“ nun mal ist – schließt dieser das Supportticket und schreib kurz und knapp:

„Ids are case sensitive, you need to use ‚#myLink‘ not ‚#mylink‘.

Closing invalid; this has nothing to do with jQuery UI.“

Und damit ist der Fall erledigt.
Danke für den tollen Support…