naden.de/blog

Vorsicht: PHP json_encode und numerische Arrays

naden — Fri, 23 Dec 2011 19:51:26 +0000

Auf den ersten Blick liefert die PHP-Funktion json_encode ein unerwartetes Ergebnis, wenn man ein Array mit numerischen Indizes umwandelt.

#1 fortlaufenden, numerische Indizes 0, 1 und 2

$a = array(5, 6, 7);

echo json_encode($a);

#1 Ausgabe: Array sieht wie erwartet aus

[5,6,7]

#2 Index beginnt bei 2

$b = array(2 => 'a', 'b', 'c');

echo json_encode($b);

#2 Ausgabe ist kein Array, sondern ein Objekt

{"2":"a","3":"b","4":"c"}

#3 Index beginnt bei 0 und macht dann einen Sprung auf 20

$c = array(5, 20 => 6);

echo json_encode($c);

#3 Ausgabe ist kein Array, sondern ein Objekt

{"0":5,"20":6}

Unerwartet aber es macht natürlich Sinn. Javascript kennt kein associativen Arrays, sondern nur fortlaufend nummerierte.

“Associative Arrays” werden in Javascript als Objekte abgebildet, da ist ist es von json_encode natürlich richtig, in diesem Fall so zu verfahren.

onNodeInserted jQuery Plugin

naden — Thu, 22 Dec 2011 17:20:36 +0000

Bei stark ajax-lastigen Oberflächen habe ich immer eine Möglichkeit gesucht, auf neu eingefügte DomNodes meist zu Formatierungszwecken Javascript-Funktionen anzuwenden global, ohne die immer wiederkehrenden Aufrufe in jedem onSuccess-Handler.

Das ist nicht immer über simple CSS-Angaben möglich, besonders dann nicht, wenn man HTML ohne Klassenangaben geliefert bekommt oder einen clientseitigen Tablesorter nutzen möchte etc.

jQuery bietet seit einiger Zeit mit live(); eine Möglich um Events auch an zukünftige Elemente zu binden. Das lässt sich zwar auch für Custome-Events nutzen, diese muss man aber explizit triggern.

Die Möglichkeit, die ich gebaut habe ist sehr experimentell und nicht für Produktivsysteme geeignet.

Dazu habe ich ein jQuery-Plugin geschrieben, was das Event DOMNodeInserted überwacht und, wenn einer der definierten Selektoren greift den dazu passenden Callback-Handler aufruft.

Als Selektor kann jedes Konstrukt benutzt werden, dass jQuery.is() versteht, was uns eine enorme Flexibilität gibt. Diese ist auch wichtig, den Selektoren sollten so genau wie möglich definiert sein, sonst können leicht 10.000 von Aufrufen zustande kommen, wenn ein etwas allgemeineres Element eingefügt wird. Das wäre dann ein echtes Performanceproblem.

Die Nutzung ist sehr einfach, hier ein Beispiel

Als Test Html nehmen wir eine unsortierte Liste, die bereits zwei Elemente enthält.

Nun initialisieren wir unseren Event-Listener mit einem selectorMap genannten Objekt, was als Schlüssel unsere jeweiligen Selektoren und als Werte die dazu passenden Callback-Handler enthält. Hier überwachen wir alle Listen darauf, ob ein neues Listenelement oder ein neues Listenelement mit einem enthaltenen Link eingefügt wird.

$.onnodeinserted({

selectorMap: {

‘ul li’: function(el, selector) {

$(el).css({color: ‘red’});

‘ul li a’: function(el, selector) {

$(el).css({fontWeight: ‘bold’});

$.data(el, ‘nonce’, Math.random());

}

});

Zu Testzwecken fügen wir nun einige Elemente hinzu.

$('

‘, {text: ‘and a young tree’}).appendTo(‘ul’);$(‘ul li:nth(1)’).html($(‘‘, {href:’#', text: ‘two’}));

Nun entfernen wir den Even-Listener wieder, der folgende Aufruf wird nun nicht mehr abgefangen.
$.onnodeinserted('destroy');
$(‘

‘, {text: ‘one more’}).appendTo(‘ul’);Demos mit allen Optionen
Demo

Download

Download

Einschränkungen:

ich nutze das Event DOMNodeInserted, was als deprecated

gekennzeichnet ist

im Internet-Explorer funktioniert es erst ab Version 9

.htaccess-Redirect – ohne Query-String

naden — Fri, 16 Dec 2011 14:14:05 +0000

Um alle Url’s mittels mod_rewrite und .htaccess von Domain A auf die Index von Domain B umzuschreiben und dabei auch den vorhandenen Query-String zu entfernen bedarf eines kleinen Tricks.

Falsch

Die Ziel-Url enthält noch immer den Query-String.

Quell-Url
http://www.domain-a.tld/topic.php?id=2839

mod_rewrite
RewriteRule ^(.*)$ http://www.domain-b.tld [R=301, L]

Ziel-Url
http://www.domain-b.tld/?id=2839

Richtig

Wir müssen ein ? an die Ziel-Url ranhängen, damit mod_rewrite den Query-String nicht mit übergibt.

Quell-Url
http://www.domain-a.tld/topic.php?id=2839

mod_rewrite
RewriteRule ^(.*)$ http://www.domain-b.tld? [R=301, L]

Ziel-Url
http://www.domain-b.tld

5 Wege um Parameter an Javascripts zu übergeben

naden — Tue, 29 Nov 2011 12:24:50 +0000

Über die Jahre habe ich so einige Methoden ausprobiert, um an externe Javascript-Dateien GET-Parameter zu übergeben. Diese habe ich nun in einem Post zusammengefasst. Die Scripte sind simpel gehalten. Für den Einsatz in der Wildnis würde sich noch die eine oder andere Fehlerüberprüfung anbieten. Enjoy!

#1

Die simpelste Methode übergibt GET-Parameter an das eingebundene Script, so wie man es mit jeder Url machen würde.

Einbindung

<script type="text/javascript" src="javascript-params-1.js?id=1&language=de">script>

Script

function getParams1() {
  var scripts = document.getElementsByTagName('script'),
      tokens = scripts[scripts.length - 1].src.split('?')[1].split('&'),
      params = {};
 
  for(var k=0; k<tokens .length; k++) {
    var tmp = tokens[k].split('=');
    params[tmp[0]] = tmp[1];
  }
 
  return params;
}

Aufruf und Ausgabe

console.log(getParams1());

{
 id: "1",
 language: "de"
}

#2

In den eigenen Script-Tag werden beliebig viele zusätzliche data-Attribute eingebaut.

Einbindung

<script type="text/javascript" src="javascript-params-2.js" data-id="2" data-language="en">script>

Script

function getParams2() {
  var scripts = document.getElementsByTagName('script'),
      script = scripts[scripts.length - 1],
      params = {};
 
  for(var k=0; k<script .attributes.length; k++) {
    if(/data\-/.test(script.attributes[k].nodeName)) {    
      params[script.attributes[k].nodeName.substring(5)] = script.attributes[k].nodeValue;
    }
  }
 
  return params;
}

Aufruf und Ausgabe

console.log(getParams2());

{
 id: "2",
 language: "en"
}

#3

In den eigenen Script-Tag wird ein data-Attribute eingebaut, in dem ein anonymes Javascript-Object im JSON-Format eingebettet ist.

Einbindung

<script type="text/javascript" src="javascript-params-3.js" data-params="{id:3, language:'fr'}">script>

Script

function getParams3() {
  var scripts = document.getElementsByTagName('script');      
  return eval('(' + scripts[scripts.length - 1].getAttribute('data-params') + ')');
}

Aufruf und Ausgabe

console.log(getParams3());

{
 id: "3",
 language: "fr"
}

#4

In den eigenen Script-Tag wird ein anonymes Javascript-Object im JSON-Format eingebettet.

Einbindung

<script type="text/javascript" src="javascript-params-4.js">
{id: 4, language: 'it'}
script>

Script

function getParams4() {
  var scripts = document.getElementsByTagName('script'), text = '';
 
	// webkit kennt innerText nicht
	if(document.getElementsByTagName('body')[0].innerText != undefined) {
		text = scripts[scripts.length - 1].innerText;
	}
	else {
		text = scripts[scripts.length - 1].textContent;
	}
 
  return eval('(' + text + ')');
}

Aufruf und Ausgabe

console.log(getParams4());

{
 id: "4",
 language: "it"
}

#5

In einem extra Script-Tag werden globale Javascript-Variablen definiert, die im Script ausgelesen werden können.

Einbindung

<script type="text/javascript">
param_id = 5;
param_language = "es";
script>
<script type="text/javascript" src="javascript-params-5.js">script>

Script

function getParams5() {
  return {id: window.param_id, language: window.param_language};
}

Aufruf und Ausgabe

console.log(getParams5());

{
 id: "5",
 language: "es"
}

Demo

Cross Domain Ajax Proxy

naden — Fri, 26 Aug 2011 11:18:54 +0000

Durch die sicherheitsbedingte “same domain policy” kann man per Ajax nur Daten von der eigenen Domain laden. Das stört oft, lässt sich aber mit einem 10-zeiligen serverseitigen PHP-Proxy leicht lösen. Wenn man diesen zusätzlichen Traffic aber auf die Clientseite verlagern möchte, muss man auf Drittdiente ausweichen.

Dazu gibt es einige kostenlose Dienste, die aber mehr offline als online sind. Einzig Google biete über ihre Feed-Api eine Lösung, auf deren Verfügbarkeit man sich verlassen kann. Google verlangt allerdings einen API-Key, den man erst nach einer Registrierung bekommt. Zudem läd Google einen ganzen Shitload an Javascript-Dateien nach, die man eigentlich gar nicht haben möchte.

Eine gute Alternative ist die von Yahoo! angebotene Yahoo! Query Language zu nutzen, die den Zugriff auf externe Datenfeeds in zahllosen Formaten erlaubt und ihre eigene Syntax an SQL anlehnt.

Um z.B. den JSON-Feed einer Facebook-Seite anzuzeigen reichen wenige Zeilen jQuery:

var query = "SELECT * FROM json WHERE url = 'http://www.facebook.com/feeds/page.php?id=106760056048493&format=json'";
 
$.getJSON('http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query.toLowerCase()) + '&format=json&callback=?', function(result) {
 
$.each(result.query.results.json.entries, function(k, v) {      
 
// ...
 
 });

Die Daten werden dabei über http://query.yahooapis.com/v1/public/yql?q= getunnelt.

Eine komplett funktionierendes Demo gibt es hier: Cross Domain Ajax Proxy Demo

YQL kann sehr viel mehr Datenquellen anzapfen, ein genaueres Angucken lohnt!

Javascript lernen

naden — Tue, 23 Aug 2011 14:06:52 +0000

Ein nettes, interaktives Lernprogramm für Javascript-Neulinge haben die Jungs und Mädels von Codecademy.com ins Netz gestellt.

Die Webseite wendet sich wirklich nur an absolute Programmierneulinge, die noch keine Ahnung von Variablen haben und denken, dass ein Array die neueste Pastasorte ist.

In acht, aufeinander aufbauenden Tutorials werden Kontrollstrukturen und Variablentypen gut erklärt. Abgesehen von alert und confirm ist es eine allgemeine Einführung in eine Programmiersprache.

Das ist auch der einzige Kritikpunkt, da eine Interaktion mit dem DOM nicht stattfindet. Ansonsten eine gelungene Webseite für Lernwillige, die etwas den Spiele-Karma-Character von Stackoverflow.com aufgreift.

zur Webseite

WordPress 3.1 Update mit Problemen

naden — Mon, 22 Aug 2011 10:03:35 +0000

Wer WordPress auf die Version 3.1 oder neuer upgedatet hat, der sollte sich mal seine Kategorie- und Tag-Seiten angucken. Die liefern nämlich alle stillschweigend den Fehler 404 – Not ~~funny~~ found!

Das Update-Problem besteht schon seit Januar 2011 und von Seiten der WordPress-Entwickler gibt es keinen Fix. Was im Netz alles als Lösung kursiert schwankt zwischen kurios und schädlich. Ich habe alles an Lösungsversuchen inklusive einem sogenannten “HotfiX” ausprobiert, der dann per 302-Redirect auf einem Link wie /category/drupal ?cat=ID gemacht hat. Nichts davon funktioniert.

Die einzige funktionierende Lösung ist ein Downgrade auf WordPress v3.0.5 und das geht so:

Download von WordPress 3.05
Alle Dateien außer dem Verzeichnis wp-content und der Datei wp-config.php hochladen und vorhandene Dateien überschreiben.
/wp-admin aufrufen und dem Datenbankupdate zustimmen.

Fertig. Für mich ein weiterer Grund, endlich die Migration auf Drupal voranzutreiben. Ein WordPress-Import Modul gibt es bereits.

MySql Substring Count

naden — Mon, 20 Jun 2011 15:30:47 +0000

Ein nützlichen MySql-Schnipsel, was den Befehl substr_count simuliert.

SELECT (LENGTH(field)-LENGTH(REPLACE(field, 'string', '')))/LENGTH('string') FROM table

string: zu zählender String
field: Datenbankfeld, in dem gesucht werden soll
table: Datenbaktabelle

fb_xd_fragment

naden — Wed, 25 May 2011 11:01:54 +0000

Wer einen Facebook-Like-Button via Javascript API eingebunden hat, der wird sich wundern, warum Urls, die den ?fb_xd_fragment= Paramater enthalten nur eine leere Seite liefern. So auch ich. Alarmiert von einer Bouncerate von 98%.

Ich habe mich quer durch das Facebook Developer Forum, Gitbub und Stackoverlow gelesen. Das Problem ist schon seit über einem Jahr bekannt. Leider funktionierten alle Lösungen die irgendwo gelistet waren für mich nicht. Egal ob channelUrl oder nicht. Besonders gefährlich die sehr heiß gestrickten Lösungen in PHP.

Das folgende Code-Snippet löst das Problem, wenn man die Möglichkeit hat, PHP zu nutzen.

function fb_xd_fragment_fix() { 
  if(isset($_REQUEST['fb_xd_fragment'])) {
    $tokens = parse_url($_SERVER['REQUEST_URI']);
    $query = array();
 
    foreach(explode('&', $tokens['query']) as $token) {
      list($k, $v) = explode('=', $token);
      if($k != 'fb_xd_fragment') {
        $query[$k] = $v;
      }    
    }
 
    $target = $tokens['path'];
 
    if(count($query) > 0) {
      $target .= '?'. http_build_query($query);
    }
 
    header('HTTP/1.1 301 Moved permanently.');
    header('Location: '. $target);
    exit;
  }
}

Die Funktion fb_xd_fragment_fix(); sollte möglichst vor allem anderen Code aufgerufen werden. Es wird nur der störende Parameter aus der Url herausgetrennt und auf die so entstandene, saubere Url weitergeleitet.

WordPress Shortcodes für Kommentare

naden — Tue, 26 Apr 2011 17:59:51 +0000

Seit WordPress 2.5 gibt es eine sogenannte Shortcode-Api, mit der man BB-Code-artige Tags im Blogpost mit Content-Parsern verdrahten kann.

Obwohl das mitunter nützlich sein kann, haben die Machen diese bis heute nicht für Kommentare aktiviert.

Das folgende Miniplugin rüstet diese Funktion nach:

/*
Plugin Name: CommentShortcodes
Plugin URI: http://www.naden.de/blog/wordpress-shortcodes-fuer-kommentare
Description: Enables all available shortcodes for use in wordpress comments. 
Version: 0.1
Author: Naden Badalgogtapeh
Author URI: http://www.naden.de
*/
 
add_filter('comment_text', 'do_shortcode');

Download