TYPO3 extbase - fluid variable to jquery

Question

How could one pass a fluid variable from the controller to jQuery or JavaScript?

Inside my controller:

public function tabs () {
    $this->view->assign('tab', 1);
}

Inside fluid I'd use the variable as {tab} But how can I pass to JavaScript? Any help would be appreciated...

Answer 1

In case you need Fluid tags like f:for you can use CDATA (Fluid variable working also). e.g.

    <script type="text/javascript"><![CDATA[
            function initialize() {
                    var marker = [];
                    var LatLng;
                    var queryLatlng = new google.maps.LatLng(]]>{queryLat}, {queryLng}<![CDATA[);
                    var mapOptions = {
                            center: queryLatlng,
                            zoom: 8,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    var map = new google.maps.Map(document.getElementById("tx_gmapplus-map"),mapOptions);

                    marker['0'] = new google.maps.Marker({
                            position: queryLatlng,
                            map: map,
                            title: "Standort"
                    });
                    ]]><f:for each="{addresses}" as="address" iteration="it"><![CDATA[
                            latlng = new google.maps.LatLng(]]>{address.txGmapplusLatitude}, {address.txGmapplusLongitude}<![CDATA[);
                            ]]>marker['{it.cycle}']<![CDATA[ = new google.maps.Marker({
                                    position: latlng,
                                    map: map,
                                    title: ]]>"{address.name}"<![CDATA[
                            });
                            ]]></f:for><![CDATA[
            }
]]></script>

Not really comfortable to write, but it is working and you have the advantage of Fluid logic.

Answer 2

I usually use data-Attributes for this. So in Fluid you have something like this:

<div data-tab="{tab}"></div>

In your JavaScript you access this attribute with:

jQuery('div').data('tab');

Of course you can use any HTML-Element for this.

Answer 3

JS in fluid templates behaviour is ... terrible in most cases, if your JS code contains any curly brackets you need to include external script instead placing the script in the view.

The reason is that Fluid thinks, that all curly brackets belongs to its scope, so when you write:

$('#mySelectBox').change(function() {
    // functions body code
    // next line
    // next line
});

Fluid destroys the JS and renders it as just:

$('#mySelectBox').change(function() Array);

Then most often I use something like this:

in the view:

<script>var TxMyExtKeyTabNumber = {tab}</script>
<script src="path/to/static/script.js"></script>

in script.js:

$("#container").val(TxMyExtKeyTabNumber);

Answer 4

I have solutions without ![CDATA[. I have an issue with passing element id to a modal in fluid templates

                document.addEventListener("DOMContentLoaded", function(event) {
                    var deki = '#modal-{data.uid}'; // data.uid is fluid variable 
                        $(deki).on('show.bs.modal', function () {
                            // call play() on the <video> DOM element
                            $('#videoId1')[0].play()
                        });
                        $(deki).on('hidden.bs.modal', function () {
                            // call play() on the <video> DOM element
                            $('#videoId1')[0].pause()
                        })

                });
    

Answer 5

I made something like this, and for values just add {settings.mySettingName} TypoScript variable or whatever data you have

function getHiddenSettings(className) {
    var settings = {};
    $.each($(className), function (index, input) {
        if (input.dataset.type === "integer") {
            settings[input.name] = parseInt(input.value) || 0;
        } else if (input.dataset.type === "boolean") {
            settings[input.name] = !!(parseInt(input.value) || input.value === "true")
        } else if (input.dataset.type === "string") {
            settings[input.name] = input.value;
        }
    });
    return settings;
}

var settings = getHiddenSettings(".mySettings");

$('pre').html(JSON.stringify(settings, null, 2));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="hidden" class="mySettings" name="closedTimes" value="0" data-type="integer">
<input type="hidden" class="mySettings" name="onlyEmail" value="false" data-type="boolean">
<input type="hidden" class="mySettings" name="serverError" value="Server problem" data-type="string">
    
<pre></pre>

Answer 6

Not nice (but also not more ugly then the CDATA stuff) but its possible to use tag-notation fluid directly in javaScript. Outside { } brackets you can of course access the fluid variable directly. Inside the brackets you can wrap the fluid variable with any fluid tag.

So all examples below will work...

<script>
   var myGlobal = {fluidVar};
   function myFunc(){
      var myLocal = <f:format.raw>{fluidVar2}</f:format.raw>
      var myLocal2 = <f:if condition="1">{fluidVar3}</f:if>
   }
</script>