nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

LiveSite - Datum - HTML tag

Srinivasa Talla

Can I use html tag for datum value? I would like to use this string in Jquery method. It is not working, may be the html tags are converting like <,>, etc.

 <Datum ID="D01" Type="String" Name="IFrame1"><iframe ....></iframe></Datum>

What are the other options available for this without DCR? Can you please give simple example?

Find more posts tagged with

Comments

Garth McMillan

Yes, values will need to be escaped (or wrap it in CDATA). You would need to unescape the value prior to using it in your jQuery function. Adding disable-output-escaping="yes" to your XSL should do it. For example:

<xsl:value-of select="//Datum[@Name='IFrame1']" disable-output-escaping="yes" />

Srinivasa Talla

Thanks for quick reply, I appreicate that. Here is the changed code.

<xsl:variable name='ifrm1' select='/Properties/Data/Datum[@Name="IFrame1"]' disable-output-escaping="yes" />

In JS code, we are using like this. Is this the correct way of using XSLT variable in JS or jquery?

<script>
$('#videoframe1').html('{ifrm1}');
</script>

If we use the quotation, it is just displaying {ifrm1} as string. If no quotation then it is giving error like 'ifrm1' reference not found. Any advice?

Adam Stoller

I don't think the JS code will have access to XSL variables.

What you might be able to do (off the top of my head) is have the XSL variable value added to some hidden element in the generated HTML - like:

<div id="vars" ifrm1="$ifrm1"/>

And then have the JS code pull the value from there - something like:

<script>
var ifrm1 = $('#vars@ifrm1');
$('#vidoframe1').html(ifrm1);
</script>

Again, this is off the top of my head, not looking at any code reference guides to verify syntax and such - but the concept should, I believe, work.

TimeDifference.rptdesign

Srinivasa Talla

Ghoti, thanks for the reply. Not sure how this will work, we can't put the iframe code in div tag initially. If we put in div, it will play automatically. IFrame has youtube auto play embed code, we have to add that based on user click on image. So we are using Jquery/JS to insert the IFrame after click.

<div id="vars" ifrm1="$ifrm1"/>

Any workaround for the issue - using xslt variable in javascript?

Rick Poulin

You can't use an XSL variable in Javascript directly. The only alternative to what ghoti suggested is that you not reference it in XSL at all. Instead, have your Javascript call the $AJAX_URL and get the content from that feed.

bangladesh.csv

Garth McMillan

If you dont want to do either ghoti's or rpoulin's suggestion, you can embed the JS onto the page itself.

Something like:

<script>
$('#videoframe1').html('<xsl:value-of select="/Properties/Data/Datum[@Name='IFrame1']" disable-output-escaping="yes" />');
</script>

However, you need to be mindful when doing this that you type out valid XSL. For example, you need to replace invalid characters (such as greater than, ampersands etc.) with their escaped versions.

For example, the JS code "if (something > something else)" needs to be written as "if (something > something else)" with the relevant sections wrapped in <xsl:text disable-output-escaping="yes">. It starts getting messy very quickly.

Srinivasa Talla

Zaarin,I would like to embed the JS onto the page itself, if it works. This is simple and staright forward. But other folks are saying, it will not work - Using XSLT variable in JS.

I tried this code sample but didn't see any result. We have too many quotes here. Not sure whether it will process it or not. In general we could use either double quotes in side single quotes or vise versa. But in this case, this

@Name='IFrame1'

is inside of double quotes and again inside of single quotes. Not sure the XSLT will process inside code first or not.

The input is something like

<iframe width="560" height="315" src="//www.youtube.com/embed/uYV3Bavcq5g" frameborder="0" allowfullscreen></iframe>

I tried the above version and also by coverting to < and >. No luck.

Garth McMillan

No, they are saying you can't use XSL variables in an external JavaScript file - which is true. I am saying you can write JavaScript out onto the page itself via the component XSL and then you have access to your XSL variables.

The JavaScript around the <xsl:value-of .../> doesn't matter to the XSL - it's just text. You could write anything there as long as you escape any characters that need to be escaped. You can wrap it all in <xsl:text> elements if you want.

The following produce the same:

<script>
	$('#videoframe1').html('<xsl:value-of select="/Properties/Data/Datum[@Name='IFrame1']" disable-output-escaping="yes" />');
</script>

<script>
	<xsl:text>$('#videoframe1').html('</xsl:text>
	<xsl:value-of select="/Properties/Data/Datum[@Name='IFrame1']" disable-output-escaping="yes" />
	<xsl:text>');</xsl:text>
</script>

Not related to the XSL, but one thing to remember is that you'll need to have jQuery loaded earlier in the HTML to this component code.

Rick Poulin

In addition to escaping some characters, Zaarin's solution works as long as the value of your XSL variable does not contain any line breaks. So yes, it can work in the right circumstances, I guess I just typically don't trust the input data that much.

Untitled.png

Bowker

doing something like this:

$("#xxxx").html('<xsl:value-of disable-output-escaping='yes' select='xxxxx'/>');

</script>

fails when the value of xxxxx contains a quote or a carriage return.

I find a better solution to put the content into a temporary div then copy it's content as needed:

$("#xxxx").html($('#somethingUnique<xsl:value-of select="/Properties/@ComponentID"/>').html());

</script>