CODEWITHSUNDEEP
javascripthtmlxmlxsltescaping
Matthew Vines
Matthew Vines

Reputation: 27561

How does one insert XSLT elements with attributes inside of javascript inside of a html attribute?

Question summary: What changes do I have to make to make the following xslt document valid.

The following is a simplified version of a theme document I am trying to modify for a Gizmox WebGUI DataGrid control. The issue I am having with it is the horrendous onclick event attribute on the button element. I have tried the code both this way, and with &quot; in place of " for the attribute quotes. In neither case does the document validate. I could do some of the work in the javascript method, and probably will before I am done, but I would still need to pass the value of <xsl:value-of select="@Attr.TotalPages"/> as a parameter in that case as well.

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:WC="wgcontrols">
    <xsl:template name="tplListDrawPaging">
    <table border="0" cellpadding="0" cellspacing="0" class="List-PagingPanel" dir="{$dir}" align="center">
      <tr>
          <td width="150px" align="right" class="Common-FontData" dir="ltr">
              <span>Go to page:</span>
              <input type="text" id="{@Id}-goToPageTextBox" name="{@Id}-goToPageTextBox" style="width:35px;" />
              <button type="button" onclick="var goToValue = getElementById('{@Id}-goToPageTextBox').value;
                                        if(goToValue &lt;= 0){goToValue = 1;}
                                        else if(goToValue &gt; <xsl:value-of select="@Attr.TotalPages"/>){goToValue = <xsl:value-of select="@Attr.TotalPages"/>;})
                                        List_NavigateTo('{@Id}',goToValue);">Go</button>
        </td>
      </tr>
    </table>
  </xsl:template>
</xsl:stylesheet>

Upvotes: 0

Views: 1189

Answers (1)

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262979

You have to escape the curly braces inside the expression by doubling them:

<button type="button" onclick="var goToValue = document.getElementById('{@Id}-goToPageTextBox').value; if (goToValue &lt;= 0) {{ goToValue = 1; }} else if (goToValue &gt; {@Attr.TotalPages}) {{ goToValue = {@Attr.TotalPages}; }} List_NavigateTo('{@Id}', goToValue);">Go</button>

I would definitely put that code inside its own function and call that from the onclick handler, though.

Upvotes: 3

Related Questions