Set an asp:HiddenField value from codebehind and access in javascript function

Question

I'm trying to setup a countdown timer for an asp:Timer which will refresh the page upon finishing. What I'm doing is setting the timer interval and a hidden value when it initializes, and then calling a javascript function which starts the countdown timer using the hiddenfield's information.

The interval gets set, and the hidden field value gets set, but after trying various things, the results I get are a problem where the hiddenfield value is uninitialized when the javascript runs. It's uninitialized when I try to call the function directly on document load as well.

Here is the code I'm currently using.

codebehind

DateTime refreshTime;
protected void refreshHidden_Init(object sender, EventArgs e)
{
    refreshTime = DateTime.Now.AddSeconds(60);
    refreshHidden.Value = refreshTime.ToString();
    int timeToFresh = (int)(refreshTime - DateTime.Now).TotalMilliseconds;
    refreshTimer.Interval = timeToFresh;
    refreshTimerJS();
}

protected void refreshTimerJS()
{
    StringBuilder script = new StringBuilder();
    script.Append("<script type=\"text/javascript\">");
    script.Append("var dt='");
    script.Append(refreshTime.ToString());
    script.Append("';");
    script.Append("</script>");
    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "DateVars", script.ToString());
}

the page

<div id="autopriseUpdate" class="content">
    <asp:Timer runat="server" ID="refreshTimer" Interval="600000" OnTick="refreshTimer_Tick"></asp:Timer>
    <asp:Label runat="server" ID="refreshLabel" Text="1m 0s"></asp:Label>
    <asp:HiddenField runat="server" ID="refreshHidden" OnInit="refreshHidden_Init"/>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.min.js"></script>
<script type="text/javascript" src="js/refresh.js"></script>

javascript

$(document).ready(function () {
    refreshJS();
});

function refreshJS(){
    var dt = new Date($('#refreshHidden').value);
    $('#refreshLabel').countdown(dt).on('update.countdown', function (event)
    {
        $(this).html(event.strftime('%M:%S'));
    });
}

The hiddenfield value is set and the asp:Timer interval counts down and refreshes right on the dot, but the countdown timer doesn't start up. My best guess is that there's something I need to fix in the order things happen, but I haven't got a clue.

I can't just hardcode the countdown value because I'm going to make the refreshTime variable, so the user can choose how many minutes are between page refreshes.

If anybody has an idea for how to get my javascript working or how to get the DateTime value from codebehind some other way and utilize it, I would really appreciate the help!

Answer 1

As an alternative to Mike's answer you could also set ClientIDMode to static and your jQuery will work as is. (Assuming you're using .NET 4.0 or above)

<asp:HiddenField runat="server" ClientIDMode="Static" ID="refreshHidden" OnInit="refreshHidden_Init"/>

Answer 2

Nope !

Your JavaScript can't access the value using:

var dt = new Date($('#refreshHidden').value);

It's called refreshHidden in the ASP.Net world, but when the page is rendered, it'll have a different name.

Here's what your code should look like:

var hiddenField = $("#<%= refreshHidden.ClientID %>").val();
var dt = new Date(hiddenField);