TYPO3 pass Fluid variable value to the Javascript

Question

In a fluid template I have a fluid variable which value I would like to use in my JavaScript code.

I am using JavaScript inside of fluid template.

My Code:

<!-- value I would use further in my javascript -->
<h1 id="product-model">{product.model}</h1>

<!-- Javascript code (in the same file) -->
<script>
   <![CDATA[
     function printProductWindow() {
       document.title = document.getElementById("product");
       window.print(); 
     } 
   ]]>
</script>

Thanks in advance! Denis

Sorry if I wasn´t clear, At the moment document.title has zero value, although {product.model} variable contains a value. I am not sure what am I doing wrong here.... Thanks! — Denis Milosavljevic, Dec 13 '16 at 14:41

René Pflamm · Accepted Answer · 2016-12-13T15:02:29.260

7

Your element id is wrong:

 document.title = document.getElementById("product-model");

because you have defined it as id="product-model".

Alternative, if your JavaScript is in your FluidTemplate, you can also set the Value there:

<script>
  <![CDATA[
    function printProductWindow() {
      document.title = "]]>{product.model}<![CDATA[";
      window.print(); 
    } 
  ]]>
</script>

But let me warn you: changing the title via JavaScript is not a good practice.

Have an look at the TitleTagViewHelper from the news extension here to see one solution how this can be solved.

edited Dec 13 '16 at 15:02

answered Dec 13 '16 at 14:47

René Pflamm

3,273
17
29

Thank you sooooo much :) – Denis Milosavljevic Dec 19 '16 at 08:24
1

does not work anymore. Since TYPO3 8 <![CDATA[ blocks the output so the javascript is empty. – lisardo Jul 06 '20 at 18:42

score 6 · Answer 2 · answered Jul 28 '18 at 13:14

6

<script>
        function printProductWindow() {
            document.title = <f:format.raw>{product.model}<f:format.raw>;
            window.print(); 
        }
</script>

For TYPO3 8.7.

answered Jul 28 '18 at 13:14

Jimit Shah

653
1
7
16

1

Apostrophes are missing "{product.model}" – ESP32 Jan 12 '19 at 23:43
1

I would suggest `{product.model}` to avoid XSS if `model` contain quotes – Tymoteusz Motylewski Jun 13 '19 at 13:50
what If my JS is not in the same file as the template? – Lenon Tolfo Aug 28 '19 at 08:03
1

@LenonTolfo : Set the value as hidden in the template and fetch the value in any file ;) – Jimit Shah Sep 18 '19 at 07:17

Dimitri L. · Answer 3 · 2019-01-13T19:30:28.547

4

you can use the fluid variables in js as well but most of the time you need to use a format viewhelper like <f:format.htmlspecialchars>.

<script>
    <![CDATA[
        function printProductWindow() {
            document.title = '<f:format.htmlspecialchars>{product.model}</f:format.htmlspecialchars>';
            window.print(); 
        }
    ]]>
</script>

edited Jan 13 '19 at 19:30

answered Dec 13 '16 at 15:05

Dimitri L.

4,499
1
15
19

It doesnt work, but was pretty close... Thanks anyway :) – Denis Milosavljevic Dec 19 '16 at 08:24

score 1 · Answer 4 · answered Jul 31 '18 at 09:07

1

https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ThingsToKnow/JsAndInline.html

<f:format.cdata>
   <script type="text/javascript">
      var myLayout;
      $(document).ready(function() {
         myLayout = $('body').layout({
            north__size: 27,
            north__initClosed: false,
            north__initHidden: false,
            center__maskContents: true // IMPORTANT - enable iframe masking
         });
      });
   </script>
</f:format.cdata>

answered Jul 31 '18 at 09:07

exotec

439
4
17

Could you please add some explanation to your codeß – TheTanic Jul 31 '18 at 09:27
1

does not work anymore (since TYPO3 9.x). The curly brackets are now interpreted by fluid which ends up in complete messed up javascript. The manual is outdated. – lisardo Jul 06 '20 at 18:38

score 0 · Answer 5 · answered Mar 14 '22 at 14:46

Another way would be:

<!-- value I would use further in my javascript -->
<h1>{product.model}</h1>

<!-- Javascript code (in the same file) -->
<script>
     function printProductWindow() {
       <f:format.raw>
       document.title = {product.model};
       window.print(); 
       </f:format.raw>
     } 
</script>

Put the Viewhelper <f:format.raw> to the closest curly brackets which shoul output a variable to get the fluid detection right.

TYPO3 pass Fluid variable value to the Javascript

5 Answers5