Row value is not available in javascript

Question

After referring the following two references, I have created a javascript function in XSL template. The javascript is getting called and an alert is appearing. But the value of CountID is coming as empty in the alert though it has value in html.

What change do we need to do to alert the CountID?

Note: This is in an ASP.Net project and I am using Visual Studio 2005 Note: This is an existing project and I am new to XSLT (though I have knowledge on javascript,xml, kendoui, html5, etc.)

REFERENCES

Javascript

    <SCRIPT LANGUAGE="javascript" DEFER="true">

        var myVar = "<xsl:value-of select="CountID"/>";
        <xsl:comment>
            function on_change()
            {
                alert(myVar);
            }
        </xsl:comment>

</SCRIPT>

Source XML

<ROOT>
    <Counts>
        <CountID>34rrgt56</CountID>
        <PlantCD>01</PlantCD>
        <CountType>PI</CountType>
        <StatusCD>OP</StatusCD>
        <EntryCompleteIND>N</EntryCompleteIND>
        <StartedBy>Lijo C</StartedBy>
        <CreatedOnDate>05/09/2014 00:19:04</CreatedOnDate>
    </Counts>
</ROOT>

Note: This XML is passed to a custom control where it does some more additions. However for this question, this xml should be enough.

Complete XSL Stylesheet

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" indent="yes"/>
    <xsl:template match="/">

        <SCRIPT LANGUAGE="javascript" DEFER="true">

            var myVar = "<xsl:value-of select="CountID"/>";
            <xsl:comment>
                function on_change()
                {
                    alert(myVar);
                }
            </xsl:comment>

        </SCRIPT>


        <div>

            <TABLE border="0" cellPadding="0" cellSpacing="0" BGCOLOR="#E5DBE2" width="100%">
                <TR>
                    <TD CLASS="Heading3" ALIGN="LEFT" WIDTH="25%">
                        <xsl:value-of select="/ROOT/Labels/PhysicalInventoryIDText/." />
                    </TD>
                    <TD CLASS="Heading3" ALIGN="LEFT" WIDTH="20%">
                        <xsl:value-of select="/ROOT/Labels/DateTimeText/." />
                        <BR/>
                        <xsl:value-of select="ROOT/Labels/StartedText/." />
                    </TD>
                    <TD CLASS="Heading3" ALIGN="LEFT" WIDTH="15%"></TD>
                </TR>
            </TABLE>


            <TABLE style="display:none" name="emailTable"  id="emailTable" width="100%" BGCOLOR="#E5DBE2">
                <TR>
                    <TD width="25%" CLASS="Normal" colspan="1"  ALIGN="RIGHT">
                        <B>
                            <xsl:value-of select="/ROOT/Labels/EmailAddressText/." />
                        </B>
                    </TD>
                    <TD width="75%" ALIGN="LEFT">
                        <img src="../Images/ArrowInvisible.gif" width="15" height="13" name="imgEmail1" />
                        <INPUT id="txtEmail1" name="txtEmail1" runat="server" width="100px" maxlength="100" Required="true" onfocus="document.forms[0].imgEmail1.src='../Images/ArrowVisibleDB.gif';" onblur="document.forms[0].imgEmail1.src='../Images/ArrowInvisible.gif';" />
                    </TD>
                </TR>
                <TR>
                    <TD width="25%" CLASS="Normal" colspan="1" ALIGN="RIGHT">
                        <B>
                            <xsl:value-of select="/ROOT/Labels/EmailAddressText/." />
                        </B>
                    </TD>
                    <TD width="75%" ALIGN="LEFT">
                        <img src="../Images/ArrowInvisible.gif" width="15" height="13" name="imgEmail2" />
                        <INPUT id="txtEmail2" name="txtEmail2" runat="server" width="100px" maxlength="100" Required="true" onfocus="document.forms[0].imgEmail2.src='../Images/ArrowVisibleDB.gif';" onblur="document.forms[0].imgEmail2.src='../Images/ArrowInvisible.gif';" />
                    </TD>
                </TR>
            </TABLE>

            <TABLE border="0" cellPadding="0" cellSpacing="0" BGCOLOR="#E5DBE2" width="100%">
                <xsl:for-each select="ROOT/Counts">
                    <TR>
                        <TD CLASS="Normal" ALIGN="LEFT" width="25%">
                            <xsl:value-of select="CountID"/>
                        </TD>


                        <TD CLASS="Normal" ALIGN="LEFT" width="20%" style="font-size:12">
                            <xsl:value-of select="CreatedOnDate"/>
                        </TD>

                        <TD ALIGN="RIGHT" width="15%">
                            <Input type="button">
                                <xsl:attribute name="id">
                                    <xsl:value-of select="CountID"/>
                                </xsl:attribute>
                                <xsl:attribute name="name">
                                    <xsl:value-of select="CountID"/>
                                </xsl:attribute>

                                <xsl:attribute name="onclick">
                                    <xsl:text>on_change()</xsl:text>
                                </xsl:attribute>

                                <xsl:attribute name="value">Conclude</xsl:attribute>
                            </Input>
                        </TD>

                    </TR>
                    <xsl:if test="LastError!=''">
                        <TR>
                            <TD COLSPAN="3" CLASS="Normal" ALIGN="LEFT" width="100%">
                                Last Error:  <xsl:value-of select="LastError"/>
                            </TD>
                        </TR>
                    </xsl:if>
                    <TR style="display:none">
                        <xsl:attribute name="id">
                            row<xsl:value-of select="CountID" />
                        </xsl:attribute>
                        <TD class="NormalError" colspan="4">
                            <xsl:value-of select="/ROOT/Labels/PIConcludeWarning/." />
                            <Input type="button" >
                                <xsl:attribute name="value">
                                    <xsl:value-of select="/ROOT/Labels/YesText/." />
                                </xsl:attribute>
                                <xsl:attribute name="onclick">
                                    submitForm(this,this.form,'<xsl:value-of select="CountID"/>')
                                </xsl:attribute>
                            </Input>
                            <xsl:text disable-output-escaping="yes">&#160;</xsl:text>
                            <Input type="button" >
                                <xsl:attribute name="value">
                                    <xsl:value-of select="/ROOT/Labels/CancelText/." />
                                </xsl:attribute>
                                <xsl:attribute name="onclick">
                                    window.row<xsl:value-of select="CountID" />.style['display'] = 'none';window.emailTable.style['display'] = 'none';
                                </xsl:attribute>
                            </Input>
                        </TD>
                    </TR>

                    <TR HEIGHT="1">
                        <TD BGCOLOR="#FFFFFF" COLSPAN="6" height="1">
                            <NOBR/>
                        </TD>
                    </TR>
                </xsl:for-each>
            </TABLE>
        </div>
    </xsl:template>
</xsl:stylesheet>

You need to show your input XML, unless it has a root element named CountID the code doing var myVar = "<xsl:value-of select="CountID"/>"; does nothing but assign an empty string. And your other expressions like <xsl:value-of select="/ROOT/Labels/PhysicalInventoryIDText/." /> suggest the root element is named ROOT. — Martin Honnen
– Martin Honnen, Commented May 11, 2014 at 8:31
@MartinHonnen I copied that line of code from existing code as you can see in <Input type="button"><xsl:attribute name="id"><xsl:value-of select="CountID"/></xsl:attribute> — LCJ
– LCJ, Commented May 11, 2014 at 15:14
Well if you have a template matching / then the <xsl:value-of select="CountID"/> selects a root element named CountID. If there is no such element you output an empty string. So you need to make sure you use a path selecting the element at its nesting level, for instance <xsl:value-of select="//CountID"/> would select the first CountID element at any level in the input or select="/ROOT/CountID" would select a child element named CountID of the root element named ROOT. — Martin Honnen
– Martin Honnen, Commented May 11, 2014 at 16:26
@MartinHonnen Thanks When I used select="//CountID"/>" it is working. But I think that would give me wrong result if I have more than one row (though I have one row in my current example)? Do you have any alternative suggestions that will work correctly even when there are multiple rows? — LCJ
– LCJ, Commented May 11, 2014 at 17:02

Martin Honnen · Accepted Answer · 2014-05-11 17:28:25Z

The right approach in terms of XSLT coding in my view is to write templates based XSLT code but as you have a single template doing it all start by replacing

                        <Input type="button">
                            <xsl:attribute name="id">
                                <xsl:value-of select="CountID"/>
                            </xsl:attribute>
                            <xsl:attribute name="name">
                                <xsl:value-of select="CountID"/>
                            </xsl:attribute>

                            <xsl:attribute name="onclick">
                                <xsl:text>on_change()</xsl:text>
                            </xsl:attribute>

                            <xsl:attribute name="value">Conclude</xsl:attribute>
                        </Input>

with

<input type="button" id="{CountID}" name="{CountID}" onclick="on_change(this.id);" value="Conclude"/>

then make the Javascript function take a parameter so instead of

    var myVar = "<xsl:value-of select="CountID"/>";
    <xsl:comment>
        function on_change()
        {
            alert(myVar);
        }
    </xsl:comment>

simply use

<script type="text/javascript">
function on_change(id) {
  alert(id);
}
</script>

That is all that is needed.

Collectives™ on Stack Overflow

Row value is not available in javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related