javascript ASP.NET hiddenfield get value from code behind

Question

I am trying to integrate my codes to Google Chart API. I want to manually set google chart title and axis column names from code behind. I tried below code but doesn't work. Any suggestions?

ASPX file

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { "packages": ["corechart"] });
        function drawProgrammingChart() {
            var data = new google.visualization.DataTable(operationdetails, 0.5);
            var chart = new google.visualization.LineChart(document.getElementById("divprog"));
            **var xAxis = document.getElementById("txtXAxisName");**
            **console.log(xAxis);**
            var yAxis = document.getElementById("txtYAxisName");
            chart.draw(data, {
                title: "Visualization Satisfaction", hAxis: { title: "Programming method" }, vAxis: { title: "Units" }
            });
        }
        google.setOnLoadCallback(drawProgrammingChart);
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div id="divprog" style="width: 750px; height: 350px;">
        </div>
    <asp:HiddenField ID="txtXAxisName" runat="server" />
    <asp:HiddenField ID="txtYAxisName" runat="server" />
</asp:Content>

In code behind i want manually to set hidden field value.

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = generateDataTable();
                **txtXAxisName.Value = "Days";**
                txtYAxisName.Value = "Duration";
                LoadChart(dt, "operationdetails");    
            }

        }
private void LoadChart(DataTable table, string jsName)
        {
            Page.ClientScript.RegisterStartupScript(
                this.GetType(),
                jsName, string.Format("var {0} = {1};", jsName, new Bortosky.Google.Visualization.GoogleDataTable(table).GetJson()), true);
        }

When getting element txtAxisName, it gets null.

score 0 · Answer 1 · answered Nov 18 '12 at 17:20

0

You could try the following:

var yAxis = document.getElementById('<%# txtYAxisName.ClientID %>');

answered Nov 18 '12 at 17:20

SpruceMoose

9,737
4
39
53

tried but XAxis is still null. var xAxis = document.getElementById('<%# txtXAxisName.ClientID %>'); console.log("XAxis:"+xAxis); – NeoMatrix Nov 18 '12 at 17:25
if you view the rendered page source can you see that the client id is being spat out? If not what do you see? – SpruceMoose Nov 18 '12 at 17:32
If you use databinding syntax as in this answer (<%# ...), then you need to call Page.DataBind() in your codebehind. – Joe Nov 18 '12 at 17:59

score 0 · Answer 2 · answered Nov 18 '12 at 17:53

First to get the rendered id of a control you need to use the <%=txtYAxisName.ClientID%>, and this on your code will be as:

var xAxis = document.getElementById("<%=txtXAxisName.ClientID%>");

but to actually get the value of it you need to use the .value property.

var xAxis = document.getElementById("<%=txtXAxisName.ClientID%>").value;

But if you not actually need to change, nether use on post back this hidden field you can direct write the code as:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { "packages": ["corechart"] });
        function drawProgrammingChart() {
            var data = new google.visualization.DataTable(operationdetails, 0.5);
            var chart = new google.visualization.LineChart(document.getElementById("divprog"));
            var xAxis = <asp:Literal runat="server" id="txtXAxisName" EnableViewState="False" />
            var yAxis = <asp:Literal runat="server" id="txtYAxisName" EnableViewState="False" />
            chart.draw(data, {
                title: "Visualization Satisfaction", hAxis: { title: "Programming method" }, vAxis: { title: "Units" }
            });
        }
        google.setOnLoadCallback(drawProgrammingChart);
    </script>
</asp:Content>

and on code behind just

txtXAxisName.Text = "\"Days\";";
txtYAxisName.Text = "\"Duration\";";

and actually direct render the values on the page, inside the script.

score 0 · Answer 3 · answered Oct 08 '14 at 20:48

0

var yAxis = document.getElementById('<%# txtYAxisName.ClientID %>');

answered Oct 08 '14 at 20:48

Ruben Rivero

303
2
8

2

A little explanation would be nice! – gsamaras Oct 08 '14 at 22:57

score -1 · Accepted Answer · answered Nov 18 '12 at 18:37

As Cal279 indicated, i view the source code of the page rendered and see below:

<input type="hidden" name="ctl00$MainContent$txtXAxisName" id="MainContent_txtXAxisName" value="Days" />

Then i tried below and it worked. Thanks to Cal279 :)

var xAxis = document.getElementById("MainContent_txtXAxisName");

javascript ASP.NET hiddenfield get value from code behind

4 Answers4