<h1>Craft 3</h1>

<p>According to the craft 3 <code>js</code> <a href="https://docs.craftcms.com/v3/dev/tags/js.html#parameters" rel="nofollow noreferrer">docs</a></p>

<p>We'll need to adjust some things as follows:</p>

<h3>Twig</h3>

<p>We no longer need to tell craft which File we're editing as it 
now simply inserts a <code>&lt;script&gt;</code> tag with the contents at the end of the <code>&lt;body&gt;</code> tag. (Can be adjusted, see <a href="https://docs.craftcms.com/v3/dev/tags/js.html#position" rel="nofollow noreferrer">position docs</a>.)</p>

<pre><code>{% js %}
// define our vars
var dziFilesUrl = "http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/";
var dziData = "{{ entry.kelimImageData }}";
//Call our function
tileSourceFromData(dziData, dziFilesUrl);
{% endjs %}
</code></pre>

<h3>JS</h3>

<p>Remove the <code>dziFilesUrl</code> declaration from <code>openseadragon-custom-dzi.js</code> &amp; and other files you declare this variable in.</p>

<p>And that about sums it up, if any error does occur, please inform me of whatever error your browser console spews out or otherwise any error craft presents.</p>

<h1>Craft 2</h1>

<p>I'm gonna guess that you're using craft cms v2 as I only found <code>includeJS</code> in the <a href="https://docs.craftcms.com/v2/templating/includejs.html" rel="nofollow noreferrer">craft 2 docs</a>. </p>

<h3>Adjust your twig as follows:</h3>

<pre><code>{%includeJsFile "" %}

{% set myJs %}
  // here you're setting the vars which use the twig variables for them to be available later on in the JS
  var dziFilesUrl = "http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/";
  var dziData = "{{ entry.kelimImageData }}";

  // you could even still call your `tileSourceFromData` function here
  tileSourceFromData(dziData, dziFilesUrl);
{% endset %} 

{% includeJs myJs %}` 
</code></pre>

<p><strong>And then remove the setting of those vars in your <code>openseadragon-custom-dzi.js</code>.</strong></p>

<p>This should:</p>

<ol>
<li>Set the vars with the backend data in the Footer (see <a href="https://docs.craftcms.com/v2/templating/includejs.html" rel="nofollow noreferrer">docs</a>)</li>
<li>Call the <code>tileSources</code> function in the footer as you did before.</li>
<li>Allow you to use the <code>dziFilesUrl</code> and the <code>dziData</code> variables anywhere else in your JS with the backend data as their values.</li>
</ol>

<p>Beware: This JS is getting executed in the footer according to the <a href="https://docs.craftcms.com/v2/templating/includejs.html" rel="nofollow noreferrer">docs</a> so you need to either start your function call from within the twig <code>myJs</code> or when the full page is loaded, otherwise you'll run into undefined variables.</p>

<p>Sidenote: you were calling your <code>tileSourceFromData</code> function in the twig with only one arg, instead of the required two before, this is also adjusted in my answer.</p>

CC BY-SA 4.0
2019-12-07T08:41:59.480Z
Thanks. But its not working yet. First thing i was not aware of, is that there is a difference between craft 2 & 3. So i changed `{%includeJsFile "" %}`to `{% js "" %}`.
But i get an error: "Uncaught SyntaxError: Invalid regular expression flags", which i cannot find. Between the "" in {% js "" %} i have to put the path to the js file, right?
And what do you mean by "then remove the setting of those vars..."? Should i remove the vars in the .js File?
Henrik
CC BY-SA 4.0
2019-12-09T09:05:58.780Z
that's what I was implying yes, since you're setting / "creating" those vars in your craft js part, there's no need to also declare them in your acutal .js file (also this'll prevent them from being overwritten from double-declarations)
Campiotti
CC BY-SA 4.0
2019-12-09T09:25:53.527Z
@Henrik I've updated my answer to include a craft 3 part at the top, if you follow that guide you should hopefully be able to fix your issue.

There's no longer any need for the `"/path/to/file.js"` in `{% js "" %}` as it's been changed (see linked docs in updated answer), now you just do `{% js %}`
Campiotti
CC BY-SA 4.0
2019-12-13T12:20:35.857Z
thanks a lot. just found some time to try your solution. I edited the code example in my initial questions, because i think you are missing something with the second var, because i did not mention it correctly. 
The var dziData is not the twig variable, but is part of the javascript for image zoom to work (Tile Images made by Deepzoom to work in Openseadragon Viewer).
Henrik
CC BY-SA 4.0
2019-12-13T12:30:09.323Z
When i follow your instruction, i get the error in the console: dziData is not defined. When i leave the var=dziData like in my inital question, the console.log of the image gives me something like this: "http://localhost:3000/openseadragon/highres/O:28:&quot;craftelementsdbAssetQuery&quot;:85:{s:8:&quot;volumeId&quot;;N;s:..." and so on. Encoding Issue?
Henrik
CC BY-SA 4.0
2019-12-16T06:51:12.380Z
That looks more like debug output which is also "cleaned" so no injections can occur, both of those things are not really what we want in this case...

I'll try and look around in the docs to see if I can find anything, not sure what could be causing this type of output currently.

I don't think it's an encoding issue though.
Campiotti
CC BY-SA 4.0
2019-12-06T10:25:14.133Z
2019-12-09T09:24:01.163Z
2019-12-09T09:24:01.163Z
Campiotti
<p>I tried different solutions given <a href="https://craftcms.stackexchange.com/questions/19726/pass-craft-field-object-to-javascript-function">here</a>, <a href="https://craftcms.stackexchange.com/questions/17773/how-do-i-print-a-value-from-craft-twig-into-a-javascript-function">here</a> and <a href="https://craftcms.stackexchange.com/questions/10949/can-i-set-a-js-variable-to-a-twig-output-tag/10950#10950">here</a>.
But I get nothing to work, probably missing something small and simple.</p>

<p>I have this variable in a .js File:  </p>

<pre class="lang-js prettyprint-override"><code>var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
var dziData = '&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"&gt;&lt;Size Height="5097" Width="3600"/&gt;&lt;/Image&gt;';
</code></pre>

<p>where I want the <code>entry.kelimImageData</code> coming from the Backend.</p>

<p>In my .twig File i have this:  </p>

<pre><code>{% includeJsFile "/assets/js/openseadragon-custom-dzi.js" %}

{% set myJs %}
  tileSourceFromData('{{entry.kelimImageData}}');
{% endset %} 

{% includeJs myJs %}` 
</code></pre>

<p>My <code>openseadragon-custom-dzi.js</code> File looks like this (modified to make it not so long)  </p>

<pre><code>var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
var dziData = '&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;Image xmlns="http://schemas.microsoft.com/deepzoom/2008" Format="jpeg" Overlap="1" TileSize="254"&gt;&lt;Size Height="5097" Width="3600"/&gt;&lt;/Image&gt;';

var tileSourceFromData = function(data, filesUrl) {
  var $xml = $($.parseXML(data));
  var $image = $xml.find('Image');
  var $size = $xml.find('Size');
  var dzi = {
    Image: {
      xmlns: $image.attr('xmlns'),
      Url: filesUrl,
      Format: $image.attr('Format'),
      Overlap: $image.attr('Overlap'),
      TileSize: $image.attr('TileSize'),
      Size: {
        Height: $size.attr('Height'),
        Width: $size.attr('Width')
      }
    }
   return dzi;
  }; 
}
</code></pre>

<pre><code>var viewer = OpenSeadragon({
  ...
  tileSources: tileSourceFromData(dziData, dziFilesUrl)
});
</code></pre>

<variable><includejs>
Pass Craft Field String to Javascript Function
# Pass Craft Field String to Javascript Function

(Asked by: username_0 on 2019-12-05)

I tried different solutions given here, here and here.
But I get nothing to work, probably missing something small and simple.
I have this variable in a .js File:  
var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
var dziData = '';

where I want the entry.kelimImageData coming from the Backend.
In my .twig File i have this:  
{% includeJsFile "/assets/js/openseadragon-custom-dzi.js" %}

{% set myJs %}
  tileSourceFromData('{{entry.kelimImageData}}');
{% endset %} 

{% includeJs myJs %}` 

My openseadragon-custom-dzi.js File looks like this (modified to make it not so long)  
var dziFilesUrl = 'http://localhost:3000/openseadragon/highres/{{ entry.kelimImageData }}/';
var dziData = '';

var tileSourceFromData = function(data, filesUrl) {
  var $xml = $($.parseXML(data));
  var $image = $xml.find('Image');
  var $size = $xml.find('Size');
  var dzi = {
    Image: {
      xmlns: $image.attr('xmlns'),
      Url: filesUrl,
      Format: $image.attr('Format'),
      Overlap: $image.attr('Overlap'),
      TileSize: $image.attr('TileSize'),
      Size: {
        Height: $size.attr('Height'),
        Width: $size.attr('Width')
      }
    }
   return dzi;
  }; 
}

var viewer = OpenSeadragon({
  ...
  tileSources: tileSourceFromData(dziData, dziFilesUrl)
});

**Tags:** variable, includejs

---

## 1 answers

### Answer by username_1 on 2019-12-06. Score: 1

# Craft 3

According to the craft 3 `js` [docs](https://docs.craftcms.com/v3/dev/tags/js.html#parameters)

We'll need to adjust some things as follows:

### Twig

We no longer need to tell craft which File we're editing as it
now simply inserts a

> **Comments:**
> **username_0**: Thanks. But its not working yet. First thing i was not aware of, is that there is a difference between craft 2 & 3. So i changed `{%includeJsFile "" %}`to `{% js "" %}`. But i get an error: "Uncaught SyntaxError: Invalid regular expression flags", which i cannot find. Between the "" in {% js "" %} i have to put the path to the js file, right? And what do you mean by "then remove the setting of those vars..."? Should i remove the vars in the .js File?  
> **username_1**: that's what I was implying yes, since you're setting / "creating" those vars in your craft js part, there's no need to also declare them in your acutal .js file (also this'll prevent them from being overwritten from double-declarations)  
> **username_1**: @Henrik I've updated my answer to include a craft 3 part at the top, if you follow that guide you should hopefully be able to fix your issue.  There's no longer any need for the `"/path/to/file.js"` in `{% js "" %}` as it's been changed (see linked docs in updated answer), now you just do `{% js %}`  
> **username_0**: thanks a lot. just found some time to try your solution. I edited the code example in my initial questions, because i think you are missing something with the second var, because i did not mention it correctly.  The var dziData is not the twig variable, but is part of the javascript for image zoom to work (Tile Images made by Deepzoom to work in Openseadragon Viewer).  
> **username_0**: When i follow your instruction, i get the error in the console: dziData is not defined. When i leave the var=dziData like in my inital question, the console.log of the image gives me something like this: "http://localhost:3000/openseadragon/highres/O:28:&quot;craftelementsdbAssetQuery&quot;:85:{s:8:&quot;volumeId&quot;;N;s:..." and so on. Encoding Issue?  
> **username_1**: That looks more like debug output which is also "cleaned" so no injections can occur, both of those things are not really what we want in this case...  I'll try and look around in the docs to see if I can find anything, not sure what could be causing this type of output currently.  I don't think it's an encoding issue though.  

---

