Passing value from code-behind to Javascript

I am using a jQueryUI ProgressBar to show users how much allowed file storage they have used. The percentage is calculated in code-behind and should be passed to Javascript.

Aspx Code

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <script type="text/javascript">
            $(function () {
                var pct = document.getElementById("filesPercentage").value;
                $("#progressbar").progressbar({
                    value: pct
                });
            });
        </script>
    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
      ...
     <input type="hidden" runat="server" id="filesPercentage" />                      
     <div id="progressbar"></div>         
      ...
    </asp:Content>

Code Behind

protected void Page_Load(object sender, EventArgs e)
{
   filesPercentage.Value = "85";
}

It seems like it can’t get the percentage number from the hidden field. Any help would be appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You need to get the rendered id of your hidden input

var pct = document.getElementById("<%=filesPercentage.ClientID%>").value;

and from the moment that you run the input on server its better to use the asp:HiddenField and not the input

Method 2

since your hidden field is a server control it could be that the ID is getting generated to something other than filesPercentage (probably something like ctl00_ctl00_filesPercentage)

• You may need to apply the generated client ID to your javascript document.getElementById("<%=filesPercentage.ClientID%>").value;
• Or use another way of selecting the hidden value, such as $('[hidden's parent element] input[type="hidden"]').val()

additionally, it looks like progressbar value is expecting a number, so you may need to do value: pct * 1 or value: parseInt(pct)

http://jsfiddle.net/pxfunc/QyZSs/

Method 3

Try this

var pct = document.getElementById("<%=filesPercentage.ClientID %>").value;

Method 4

.net will modify the id you give a control to ensure it is unique, so you are not accessing it with the correct id. If you give the hidden field a unique class name, you can access the value that way:

<input type="hidden" runat="server" id="filesPercentage" class="hiddenClass" /> 
var pct = $('.hiddenClass').val();

Method 5

This is a bit cleaner IMHO 🙂

$("#progressbar").progressbar({
  value: $("#<%=filesPercentage.ClientID%>").val()
});

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0