Personal Homepage, Tutorials & Blog

Ajax: Smileys in Kommentarfeld einfügen

Ajax: Smileys in Kommentarfeld einfügen

23. September '10

Mit der Javascript-Bibliothek jQuery lässt sich ohne großen Aufwand eine einfache Ajax-Anwendung realisieren. Im folgenden gehe ich davon aus, dass in die aufgerufene Seite bereits das jQuery-Framework eingebunden wurde (hier kann das Einbinden nachgelesen werden). Dies ist notwendig, damit das nachfolgende Beispiel funktioniert.

Beispiel

Folgender Code wird in den head-Bereich der Homepage geschrieben:

<script type="text/javascript">
<!--
function insert(tag) {
    document.form.comment.value +=" "+tag+" ";
    document.form.comment.focus();
}
//-->
</script>

Folgender Code wird im Body-Bereich der Homepage platziert:

<form name="form" action="mail.php" method="post">
                           
    <fieldset>
       
        <p>
            <img src="images/smiley1.gif" style="border:0px;" onclick="insert(':smile1:')" />
            [...] <!-- Bitte hier die Verknüpfungen zu den Smileys einfügen -->
            <img src="images/smiley9.gif" style="border:0px;" onclick="insert(':smile9:')" />
            <br /><small>Smileys (Einf&uuml;gen per Klick)</small>
        </p>
       
        <p>
            <textarea id="comment" cols="79" rows="5"></textarea>
        </p>
       
        <p>
            <input type="submit" value="Button" />
        </p>
   
    </fieldset>
   
</form>

Erklärung

Im head-Bereich wird der Code plaziert, der später für das Einfügen verantwortlich ist. Der Code wird per Klick auf das Bild aufgerufen (onclick=“insert(‚:smile1:‘)“). Dadurch wird in das Kommentarfeld der Text „:smiley1:“ mit jeweils einem Leerzeichen am Anfang und am Ende eingefügt.

Code durch Bilddatei ersetzen

<?php echo str_replace($smiley_code, $smiley_bild, $kommentar); ?>

Damit aus dem Code „smiley1“ wieder eine Bilddatei wird, muss natürlich ein Austausch vorgenommen werden. Es ist vorteilhaft, wenn die Variablen $smiley_code und $smiley_bild als Arrays definiert sind, damit Code eingespart werden kann. In der Variablen $smiley_code wird nun der Smiley-Code gespeichert, in der Variablen $smiley_bild der HTML-Code für die Bilddatei.

Was ist der Vorteil dieser Methode?

Durch diese Methode kann jeder Benutzer ohne weitere Kenntnisse Smileys verwenden. Desweiteren können die Bilddateien der Smileys ohne Probleme ausgetauscht werden, da ja nur ein Code im Kommentar gespeichert ist.

Demo

 

Wenn Ihnen dieser Artikel gefallen hat, oder Sie Anregungen/Kritik haben, würde ich mich freuen, wenn Sie einen Kommentar schreiben oder das RSS Feed abonnieren, um immer automatisch über die neuesten Artikel auf dieser Seite informiert zu werden. Sie dürfen diesen Artikel oder die gesamte Seite auch gerne verlinken.

3 Kommentare

  1. php-coder /

    Wiedermal sehr gelungen dein Tutorial.
    Und, bitte mach weiter so, gib nie auf 😀

    Update: bitte mach den ganzen php code rein danke 😀

  2. php-coder /

    Wiedermal sehr gelungen dein Tutorial.
    Und, bitte mach weiter so, gib nie auf 😀

  3. roclafamilia /

    Helpful blog, bookmarked the website with hopes to read more!

Einen Kommentar schreiben