Problem with XSLT variable into JS

yankleber · January 21st, 2015, 12:18 PM

I am trying to push a XSLT variable into a JS function, but I am getting a 'Unexpected token' error from JS.

Look what I have:

Code:

<!-- it loads the test variable 'mypic2' with 'mypicname.jpg' -->
<xsl:variable name="mypic2">
   <xsl:value-of select="'mypicname'" disable-output-escaping="yes" />.jpg
</xsl:variable>

<!-- It show correctly the content of the variable mypic2 -->
My content is: <xsl:value-of select="$mypic2"/>

<!-- But IT is causing the error 'mypicname is not defined' -->
<script type="text/javascript" >
   var picurl = <xsl:value-of select="$mypic2" />;
   alert (picurl);
</script>

<!-- I tried to remove the $ but then it alerts 'undefined' -->
<script type="text/javascript" >
   var picurl = <xsl:value-of select="mypic2" />;
   alert (picurl);
</script>

What am I not seeing here?

joefawcett · January 21st, 2015, 12:28 PM

Not sure, as can't see your XML, but don't you need quotes around the path?

Code:

<script type="text/javascript" >
   var picurl = "<xsl:value-of select="$mypic2" />";
   alert (picurl);
</script>

yankleber · January 21st, 2015, 12:44 PM

Hi Joe,

Nope, now it says 'Unexpected token ILLEGAL'.

Tried double quotes outside and single quotes inside.
Tried single quotes outside and double quotes inside.

The error persists. That's very weird.

joefawcett · January 21st, 2015, 12:50 PM

Show the JavaScript that is created.

yankleber · January 21st, 2015, 01:08 PM

Look what's being rendered:

Code:

<script type="text/javascript">
                                      var picurl = "mypicname.jpg
                          ";
                                      alert (picurl);
                                    </script>

Would be the line break and the lots of spaces causing it?

joefawcett · January 21st, 2015, 01:14 PM

Yes, there are a number of solutions, this should work:

Code:

<script type="text/javascript" >
   var picurl = <xsl:text>"</xsl:text><xsl:value-of select="$mypic2" /><xsl:text>"</xsl:text>;
   alert (picurl);
</script>

or, failing that, try:

Code:

<script type="text/javascript" >
   var picurl = "<xsl:value-of select="concat('&quot;', $mypic2, '&quot;')" />";
   alert (picurl);
</script>

Martin Honnen · January 21st, 2015, 01:27 PM

Why have you used

Code:

<xsl:variable name="mypic2">
   <xsl:value-of select="'mypicname'" disable-output-escaping="yes" />.jpg
</xsl:variable>

?
Simply do

Code:

<xsl:variable name="mypic2" select="'mypicname.jpg'"/>

if you want to assign a literal string.
Then to construct the Javascript string literal assigned to the variable use

Code:

var  picurl = "<xsl:value-of select="$mypic2"/>";

yankleber · January 21st, 2015, 03:03 PM

Quote:

Originally Posted by joefawcett

Yes, there are a number of solutions, this should work:

Code:

<script type="text/javascript" >
   var picurl = <xsl:text>"</xsl:text><xsl:value-of select="$mypic2" /><xsl:text>"</xsl:text>;
   alert (picurl);
</script>

or, failing that, try:

Code:

<script type="text/javascript" >
   var picurl = "<xsl:value-of select="concat('&quot;', $mypic2, '&quot;')" />";
   alert (picurl);
</script>

Joe, unfortunately these solutions didn't work but at least it put a light over the problem and could fix it with:

Code:

var picurl = '<xsl:value-of select="normalize-space($mypic)" />';

yankleber · January 21st, 2015, 03:09 PM

Quote:

Originally Posted by Martin Honnen

Why have you used

Code:

<xsl:variable name="mypic2">
   <xsl:value-of select="'mypicname'" disable-output-escaping="yes" />.jpg
</xsl:variable>

?
Simply do

Code:

<xsl:variable name="mypic2" select="'mypicname.jpg'"/>

if you want to assign a literal string.
Then to construct the Javascript string literal assigned to the variable use

Code:

var  picurl = "<xsl:value-of select="$mypic2"/>";

Lol, this is only a test code. Actually in the place of 'mypicname' I will have an url gathered from database and the .jpg has to be concatenated later.

samjudson · January 22nd, 2015, 06:25 AM

The problem is in this code:

Code:

<xsl:variable name="mypic2">
   <xsl:value-of select="'mypicname'" disable-output-escaping="yes" />.jpg
</xsl:variable>

What this creates in mypic is a text node containing a carriage return, followed by some whitespace, followed by the result of the xsl:value-of instruction, followed by ".jpg" and then followed by some more whitespace and a carriage return.

As this last whitespace and carriage return is part of the 'text' at the end of the variable it is considered significant, and is output if you then do xsl:value-of this variable.

The simplest solution to this is to do this instead:

Code:

<xsl:variable name="mypic2" select="concat('mypicname', '.jpg')"/>

or ensure that the variable body contains no whitespace:

Code:

<xsl:variable name="mypic2"><xsl:value-of select="'mypicname'" />.jpg</xsl:variable>

Obviously in either example you can replace 'mypicname' string literal with your xpath to return the actual image filename.