Passing value from code-behind to Javascript

Question

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.

Does the hidden field contain the value if you view the source? — Adam Roderick, Apr 13 '11 at 22:18
filesPercentage is likely not going to be id of the control once it is rendered. — O.O, Apr 13 '11 at 22:21

score 3 · Answer 1 · answered Apr 13 '11 at 22:21

3

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

answered Apr 13 '11 at 22:21

Aristos

66,005
16
114
150

MikeM · Accepted Answer · 2011-04-13T22:29:01.323

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/

edited Apr 13 '11 at 22:29

answered Apr 13 '11 at 22:21

MikeM

27,227
4
64
80

Good job on solving my first problem and anticipating the next problem I would have run into. This worked perfectly. – Laplace Apr 13 '11 at 22:35

score 1 · Answer 3 · answered Apr 13 '11 at 22:21

1

Try this

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

answered Apr 13 '11 at 22:21

SyntaxGoonoo

900
8
10

score 0 · Answer 4 · answered Apr 13 '11 at 22:20

.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();

score 0 · Answer 5 · answered Apr 13 '11 at 22:23

0

This is a bit cleaner IMHO :-)

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

answered Apr 13 '11 at 22:23

SavoryBytes

35,571
4
52
61

Passing value from code-behind to Javascript

5 Answers5

Linked