Peter Rehm's Blog

apple,development,life & more

Escape special characters within JSON.stringify

Mit 2 Kommentaren

In order to stringify an Object to a JSON string you have to escape the special characters.
Specials characters are for example the following:

CODE:
\b  Backspace (ascii code 08)
\f  Form feed (ascii code 0C)
\n  New line
\r  Carriage return
      Tab
\v  Vertical tab
'  Apostrophe or single quote
"  Double quote
\  Backslash caracter
& Ampersand


Unfortunately JSON.stringify() is not taking care of the special characters. However you can
easily convert those characters with a replacer function within JSON.stringify().

The method to handle such characters looks as follows:

QUOTE:

// escape json strings
function escapeSpecialCharacters(string)
{
return string
.replace(/[']/g, "\\'")
.replace(/["]/g, '\\"')
.replace(/[&]/g, "\\&")
.replace(/[\n]/g, "\\n")
.replace(/[\r]/g, "\\r")
.replace(/[\t]/g, "\\t")
.replace(/[\b]/g, "\\b")
.replace(/[\v]/g, "\\v")
.replace(/[\f]/g, "\\f");
}

// replacer handler for JSON stringify
function stringifyReplacer(key, value)
{
if (typeof value === 'string') {
return escapeSpecialCharacters(value);
}

return value;
}


Now you only have to pass the function name "stringifyReplacer" to the stringify Method.

CODE:
var object = { 'asd' : 'as\nd' };
var json = JSON.stringify(object, stringifyReplacer);


Now you should have an valid JSON string which you can parse again with JSON.parse().

Always escaping whenever you stringify a object to JSON is a good idea to keep you application
working even when special characters are being provided.

Geschrieben von Peter Rehm

07.10.2014 um 19:11:34

Abgelegt in Programmierung

Tags für diesen Artikel: ,

Zusammenhängende Formularfelder - Steuern des aktiven Feldes mit JS

Ohne Kommentare

Möchte man z.b. ausweisdaten, seriennummern oder ähnliches per HTML
Formular abfragen, möchte man es vielleicht erreichen, dass der Cursor
direkt von Feld zu Feld springt, nachdem die ausreichende Anzahl Zeichen
eingegeben wurde. Dies kann einfach mittels JavaScript erreicht werden.

CODE:
<script type="text/javascript">
<!--
function skip_field(testid,length,next)
{
var doc=document.getElementById(testid);
if(doc.value.length>=length)
{
document.test.elements[next].focus();
}
}
//-->


Geschrieben von Peter Rehm

16.08.2007 um 02:38:03

Tags für diesen Artikel: ,

Focus von beliebigen HTML Elementen entfernen

Ohne Kommentare

Hat man ein Element geklickt, und dadurch z.B. einen AJAX Request ausgelöst,
bleibt meist ein Focus auf dem Element. Dies wäre an sich nicht weiter schlimm.
würde der nicht so übel aussehen!

focus nach geklicktem element

Diesen Focus kann man einfach mit der JavaScript Methode blur() entfernen.

CODE:
<a href="#bla" onfocus="this.blur()">bla</a>


oder wie in meinem Fall mit Prototype:

CODE:
$('element').blur();

Geschrieben von Peter Rehm

30.04.2007 um 22:40:30

Abgelegt in Programmierung

Tags für diesen Artikel: , , ,

Internet Explorer 6 & 7, Focus auf Input Elemente nach AJAX Request

Mit 1 Kommentar

Bei einem aktuellen Projekt trat ein seltsames Problem auf.
In jedem Formular wird auf das erste Feld manuell ein focus() gesetzt,
dass man sehr benutzerfreundlich durch die Felder tabben kann und
sofort loslegen kann.

Nachdem ich wie gewohnt zunächst alles in Safari & Firefox entwickelt habe,
war ich sehr erstaunt, dass das focus() nicht an allen Stellen des Projektes
zu sehen war. Nach kurzer Zeit habe ich entdeckt, dass der Focus nur bei
den Seiten nicht angezeigt wird, wo der Inhalt per AJAX nachgeladen wurde.

Es gibt eine sehr einfache wenn auch sehr unschöne Lösung für das Problem.
Man kann den Focus einfach doppelt aufrufen, das habe ich dann in einer
Funktion implementiert, um es einfach wieder zu entfernen, wenn eine andere
Lösung möglich ist.

CODE:
function focus(name)
{
$(name).focus();
// called focus twice due to a bug with ie!!!
$(name).focus();
}

Geschrieben von Peter Rehm

29.04.2007 um 15:34:47

Abgelegt in Programmierung

Tags für diesen Artikel: ,

Vorschau von Webseiten

Ohne Kommentare

Speziell für Referenzen auf eigen Projekte benötigt man immer Screenshots. Die Seiten ändern sich und man sollte die Screenshots auch immer aktuell halten.

Neulich bin ich auf websnapr gestoßen.

Dies bringt die gewünschte Funktion mit sich und hat auch gleich eine komfortable JavaScript Lösung parat über die man das ganze elegant Lösen kann. Dies kann man an obigem Link sehen.

Geschrieben von Peter Rehm

26.11.2006 um 19:43:34

Tags für diesen Artikel: , ,

Multi List Drag & Drop - Part 2!

Mit 1 Kommentar

Mich hat es mal wieder gepackt, und ich hab das Multi List Package upgedated.
Wofür ein Urlaub doch gut ist :-)

Ich will es kurz und schmerzlos machen, hier findet ihr den alten Beitrag, mit allen wichtigen Informationen.

Allerdings ist das Package flexibler geworden, nachdem ich gedacht habe man sollte die Listen einfach erwitern können. Zusätzlich habe ich die addLoadEvent unterstützung eingebaut.

Update: Es gibt mal wieder eine erweiterung. Ab jetzt kann man die Class komfortabel selber erweitern und muss sich um die Updates nicht mehr sorgen. Man erzeugt eine angepasste Klasse die die sajax Klasse erweitert. In dieser Klasse werden alle Einstellungen getätigt, und man kann die update_db Funktion überschreiben, mit welcher die Daten geschrieben werden.

download - demo and simple documentation

Viel Spaß!

Geschrieben von Peter Rehm

01.09.2006 um 19:43:35

Abgelegt in Verschiedenes

Tags für diesen Artikel: , , ,

IFrames mit variabler Höhe

Mit 1 Kommentar

Bei Iframes ist eine Breite von 100% kein Problem, dies lässt sich technisch ohne Probleme realisieren. Bei der Höhe ist dies allerdings nicht möglich da dann immer 100% der gesamten Höhe genommen werden.

Daher kann man sich nur mit JavaScript aushelfen. Dieses Javascript wird beim onLoad ausgeführt. onLoad kann nicht nur bei body Elementen sondern auch bei iframe Elementen verwendet werdenten verwendet. Allerdings kann Safari mit den onLoad Elementen nicht viel Anfangen, dies ist das Hauptproblem. Da kann man sich nur helfen, indem man in den body einen onload hinzufügt der die Größe speichert.

Das passende JavaScript dazu:

CODE:
function getIframeHeight1() {
fix = 300; // fixe höhe
min = 100; //mindes höhe
max = 300; //max höhe
if(fix>max) return fix; // wenn fix größer als max => fix
if(fix>min && fix
if (window.innerHeight) {
h = window.innerHeight;
} else if (document.body && document.body.offsetHeight) {
h = document.body.offsetHeight;
}
if(h
if(h>max) return max;
return h;
}
function adjustIframe()
{
document.getElementById('iframe1').height=getIframeHeight1();
}


Danke an Alex für die "Inspiration" :-)

Geschrieben von Peter Rehm

12.07.2006 um 00:16:28

Abgelegt in Verschiedenes

Tags für diesen Artikel: ,

Multi List Drag & Drop - Sajax!

Mit 2 Kommentaren

Als ich über die Seite von Tom Westcott gestolpert bin war mir klar, ich muss das in mein neues CMS einbinden. Ich hatte mir damals schon vorgestellt dass das für die Inhaltsstruktur oder für die Sidebar interessant sein könnte, aber ich war damals noch in der Planungsphase.

Als ich dann die Implementation in Serendipity die ich durch Garvin's SuperBlog entdeckt habe getestet habe, war mir klar, genau das will ich auch. Allerdings hat mir nur die AJAX Implementierung zugesagt, da ich ganz genau weiss da manche kunden bei so futuristischen Anwendungen sicher vergessen das abzuschicken. Daher muss das automatisch gemacht werden. Tom hat glücklicherweise auch gleich beide Methoden bereitgestellt.

Allerdings war der Code sehr verworren, und daher habe ich angefangen den Code neu aufzubauen, da ich vor allem im CMS das dann schon sauber einbauen wollte. Anstelle der umfangreicheren Implementation reicht nun folgendes:

CODE:
/**
* db settings
*/
$cfg['server']['host'] = "localhost"; // server
$cfg['server']['user'] = "root"; // dbuser
$cfg['server']['pass'] = ""; // password
$cfg['server']['db'] = "sajaxdemo"; // dbname

/**
*    start the connection
*/
$conn = mysql_connect ($cfg['server']['host'],
$cfg['server']['user'],
$cfg['server']['pass']);
$result = mysql_select_db ($cfg['server']['db'],$conn);

/**
*    include the sajax file
*/
include("sajax.php");


Danach muss noch der Pfad in der sajax Datei angepasst werden, dass das einbinden der styles und des JS auch funktioniert.

CODE:
var $sajax_path='thirdparty/sajax/';


Die Funktion update_db sollte dann auch an die Gegebenheiten angepasst werden. Die Funktion greift auf die global Datenbankverbindung zu.

Das Auslesen wird dann direkt in dem File gemacht in dem Sie die Liste anzeigen möchten.

Um dies zu vereinfachen habe ich eine Bespiel Datei mitgeliefert, in der Sie das alles sehen können. Dazu auch der passende SQL dump.

Beispielseite - Download
    Ich hoffe dieses Script findet irgendwo sinvollen Einsatz. Über Feedback würde ich mich freuen.

Geschrieben von Peter Rehm

20.06.2006 um 00:33:22

Abgelegt in PHP, Programmierung

Tags für diesen Artikel: , ,

Thickbox

Ohne Kommentare

Soeben habe ich ein sehr nette Erweiterung für Webseiten entdeckt.

die Thickbox .

Dadurch wird es möglich wie eine Art Popup im selben Browserfenster zu verwenden. Sieht echt sehr schick aus, ich muss mir nur mal einen sinvollen Einsatz überlegen, dass ich es mal im Detail testen kann.

Geschrieben von Peter Rehm

25.04.2006 um 11:13:11

Abgelegt in Verschiedenes

Tags für diesen Artikel:

FCKedit Pt. II

Ohne Kommentare

Selbst das Update auf die 2.2 Version brachte keine Verbesserung.
Aber dafür eine entscheidende Erkenntnis:

Das wird alles verhunzt weil der HTML Code nicht komplett XHTML valid war.
Ist ja ein sinniger Grund.
Der Haken ist nur, dass quasi alles versaut wird was nicht 100% XHTML ist.
Und bei Bedienung durch Kunden kann alles mögliche passieren.

Und ich weiss wovon ich rede :-)

Ich bitte daher die OS-Gemeinde, behebt die Probleme.
Komisch ist auch, im IE gibt es das Problem, im FF quasi nicht.
Und wenn ich schon mecker, ICH WILL SAFARI SUPPORT!!

Geschrieben von Peter Rehm

19.01.2006 um 02:19:46

Abgelegt in PHP, Programmierung

Tags für diesen Artikel: , , ,

FCKeditor

Mit 1 Kommentar

Ich bin ja ein echter Fan des FCKeditors. Aber was muss ich da auf einer Kundenseite sehen?

Er macht lauter unsinnige tags, Übermäßig p & a Tags,... Ich kann es mir nicht erklären.
Dadurch wird das ganze Layout zerhagelt,... Und wenn ich das von Hand korrigiere bringt mir
das rein gar nichts. Beim nächsten öffnen und speichern ist wieder alles im Eimer.
So eine Scheiße!!!

Nachdem ich nicht herausfinden konnte welche Version ich in meinem CMS einsetze update ich einfach mal auf 2.2 vom Dezember :-)
Mal kucken ob das was bringt. Immerhin hab ich nun Frust abgelassen.

Geschrieben von Peter Rehm

18.01.2006 um 23:27:07

Abgelegt in PHP, Programmierung

Tags für diesen Artikel: ,