Javascript in Fluid

Der Einsatz von Inline-Javascript mit gleichzeitiger Verwendung von Template-Variablen scheint in Fluid momentan auf Grund der Bedeutung der geschweiften Klammern ({) innerhalb der beiden Syntaxen noch etwas holprig zu laufen.
Dies kann mittels der CDATA-Section Notation (zwar ein wenig unschön, aber wirkungsvoll) folgendermaßen umgangen werden:

<script type="text/javascript">
    <![CDATA[
    $(function() {
        $("#searchWord" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                   url:"]]>{ajaxUrl}<![CDATA[",
                   dataType: "json",
                   data: {
                     'tx_sschproductbase_pi1[sWord]': $('#searchWord').val()
                   },
                   success: function(data) {
                     response(data);
                 }
            });
        },
        minLength: 1
    });
});
]]>
</script>

Die Template-Variable {ajaxUrl} wird jetzt ersetzt. Allerdings, unter gewissen Umständen, noch nicht einwandfrei.
Die „gewissen Umstände“ äußern sich bei Query-Parametern die mittels des Et-Zeichens (&) konkateniert werden.
Was ja dann bei mehr als einem der Fall ist.
Fluid escaped meines Wissens den gesamten Output mittels htmlspecialchars.
Die Et-Zeichen im Link würden ohne weitere Anpassung zu &. Der Link funktioniert so leider nicht.
Mittels eines NULL-ViewHelpers konnte ich das Problem auch nicht lösen.

Meine Lösung bestand darin, dass ich mir einen entsprechenden ViewHelper geschrieben habe, der das Escaping dekodiert.
Der ViewHelper sieht folgendermaßen aus:

class Tx_SschProductbase_ViewHelpers_EscapeViewHelper extends Tx_Fluid_ViewHelpers_EscapeViewHelper {
    /**
     * Escapes oder Decodes special characters with their escaped counterparts as needed.
     *
     * @param string $value
     * @param string $type The type, one of html, entities, url
     * @param string $encoding
     * @return string the altered string.
     * @author Sebastian Schreiber <typo3@schreibersebastian.de>
     * @api
     */
    public function render($value = NULL, $type = 'html', $encoding = NULL) {

        if (empty($value)) {
            $value = $this->renderChildren();
        }

        switch ($type) {
            case 'html_decode':
                return t3lib_div::htmlspecialchars_decode($value);
                break;
            default:
                return parent::render($value, $type, $encoding);
                break;
        }
    }
}

Ich habe einfach den Escape-ViewHelper von Fluid erweitert und einen weiteren Typ mit dem Namen html_decode eingeführt.
Dieser ruft einfach die htmlspecialchars_decode Methode in der TYPO3-Gott-Klasse t3lib_div auf.

Der Aufruf in meinem Fluid-Template sieht so aus:

{namespace prod=Tx_SschProductbase_ViewHelpers}
<script type="text/javascript">
    <![CDATA[
    $(function() {
        tx_sschproductbase_pi1[controller]=Category");
        $("#searchWord" ).autocomplete({
            source: function(request, response) {
                $.ajax({
                   url:"]]><prod:escape type='html_decode'>{ajaxUrl}</prod:escape><![CDATA[",
                   dataType: "json",
                   data: {
                     'tx_sschproductbase_pi1[sWord]': $('#searchWord').val()
                   },
                   success: function(data) {
                     response(data);
                 }
            });
        },
        minLength: 1
    });
});
]]>
</script>

Danach funktionierte der AJAX-Link einwandfrei.

Veröffentlicht von

avatar

Sebastian Schreiber

Ich bin 1980 in Bergisch Gladbach geboren. Nach dem Abitur und Zivildienst habe ich 2000 an der Fachhochschule Lippe & Höxter das Studium der Medienproduktin begonnen und nach längeren Aufenthalten in Valencia und Berlin 2003 das Studium mit dem Abschluss Bachelor of Science in Medienproduktion abgeschlossen. Nach einer Festanstellung kurz nach dem Studium in einer kleinen Webagentur in Köln mit Schwerpunkt TYPO3 bin ich nun seit 2008 freiberuflicher Webentwickler.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.