How to properly use innerHTML

Question

I have a link, that when I click it calls a javascript function with a string argument. This string is actually an a-tag+script-tag, like:

<a>..</a><script>...</scipt>

which displays a video file.

So anyways, the javascript function is supposed to create that code, and make the video show on the page, but what shows up when I press the link is a string of the code, so its showing as text (but part of it is a hyperlink) and not executing to become the video.

Anyone know why?

Its weird, because if I copy the code (which displays as text), and paste it in the editor like normal, then the video shows...

<a title="Click to Show Video" href='javascript:void(0);' onclick="switchFunc('{$thisNode/@*[name()=current()/@Name]}');">
    <div dir="{@Direction}" class="ms-rtestate-field">
      <xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping="yes"/>
    </div>
</a>




<script type="text/javascript"> 
  function switchFunc(source) {
    document.getElementById('videoContainer').innerHTML = source;
  }  
</script>

<div id="videoContainer">    </div>

It has some xls from microsoft sharepoint, it's like a variable that represents a string. — sneaky, Mar 23 '12 at 18:29
can you check in the console how the string is formatted? I think it's a problem with the xsl, and you should scape the onclick string as well. — nicosantangelo, Mar 23 '12 at 18:30
@sneaky Wait, is that the source code that is send to the browser (after server-side processing) or the original source code (before server-side processing)? — Šime Vidas, Mar 23 '12 at 18:31
i'm not sure, i think its before server side processing. Its the code thats on the sharepoint .aspx page. — sneaky, Mar 23 '12 at 18:33
Could you please stop using `innerHTML` and try a more DOM based solution? — helly0d, Mar 29 '12 at 18:09

score 1 · Accepted Answer · answered Mar 23 '12 at 18:35

As I said in the comment I suspect that your attribute is being encoded, so you could try the following:

<a title="Click to Show Video" href='javascript:void(0);' >
<xsl:attribute name="onclick">switchFunc('<xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping="yes"/>');</xsl:attribute>
    <div dir="{@Direction}" class="ms-rtestate-field">
      <xsl:value-of select="$thisNode/@*[name()=current()/@Name]" disable-output-escaping="yes"/>
    </div>
</a>

That's weird, can you paste the attribute value here? – nicosantangelo Mar 23 '12 at 19:14 — nicosantangelo, Mar 23 '12 at 19:14

Justin Pihony · Answer 2 · 2012-03-23T18:45:13.730

0

Why dont you update the innerHtml with the tag you want, and have the javascript run via eval?

I am not entirely sure about the xslt part of it, but the idea would be to break up your two sections (you had said this is really an <a>Anchor</a> and <script>Javascript</script>)

html

<a title="Click to Show Video" 
    href='javascript:void(0);' 
    onclick="switchFunc('<a>Anchor</a>','Javascript');">

js

<script type="text/javascript"> 
  function switchFunc(htmlValue, javascriptMethodCall) {
    document.getElementById('videoContainer').innerHTML = htmlValue;
    eval(javascriptMethodCall);
  }  
</script>

edited Mar 23 '12 at 18:45

answered Mar 23 '12 at 18:20

Justin Pihony

66,056
18
147
180

I don't understand what you mean, can you type the code here please? – sneaky Mar 23 '12 at 18:30
How would I change the a-tag to call switchFunc now? – sneaky Mar 23 '12 at 18:37
I have updated it. I am not as good at xslt, but the basic idea should be evident here. – Justin Pihony Mar 23 '12 at 18:45
What shows as text? The html part? Can you give an example of what you are seeing in your question? – Justin Pihony Mar 23 '12 at 18:54

score 0 · Answer 3 · answered Mar 23 '12 at 19:16

Attribute values are always escaped regardless of output-escaping settings as the other way the content could break the wellformedness the XML file.

Anyway, the core architecture is the problematic on multiple ways. First it moves some trivial client side functionality to the server. Plus this way you encapsulate the main content of the page (video urls) into script code thus hide it from indexers.

I am a big fun of XSLT but the weirdo look and hard readability of the code tells that something is not OK.

A possible solution is the annotation approach: render lists with items holding key information stored as data- attribute on them and let the javascript code (your own or a client side template engine) build the output.

How to properly use innerHTML

3 Answers3