Develop Reference

Accessing a dynamic variable in javascript from Server Side using c#

I'm trying to access a variable in Javascript from the server side (c#). I've declared this variable as public from the server side:
public string elementSliderAppend;
and accessing in javascript using:
<%=elementSliderAppend %>
So far so good, however the variable doesn't seem to be updated after the update panel refresh in my aspx page.
The variable changes all okay in the backend but the change is not happening in Javascript.
I have placed the accessing of the variable inside the update panel so it should refresh but it doesn't.
below is the code from the aspx page
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="10000">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:Asyncpostbacktrigger controlid="Timer1"> </asp:Asyncpostbacktrigger>
</Triggers>
<ContentTemplate>
<div id="flexViewer" class="flexslider">
</div>
<script type="text/javascript">
function getImgHtml() {
return <%=elementSliderAppend %>;
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
Calling the variable from the below code (also on the aspx page)
function pageLoad(sender, args) {
$("#flexViewer").html("<ul class=slides>" + getImgHtml() + "</ul>");
flexSliderRUN();
}
NEW CODE
I've now inserted the below code inside the updatepanel above
<asp:HiddenField ID="hiddimgHtml" runat="server" />
Im setting the hidden field value from code behind using
hiddimgHtml.value= elementSliderAppend;
using the below in my javascript file to access the value
var value = $("#hiddimgHtml").val();
alert(value);
$("#flexViewer").html("<ul class=slides>" + value + "</ul>");
However on the refresh im getting a very nasty looking error
POST http://:1562/FridayViewer.aspx 500 (Internal Server Error)
ScriptResource.axd?d=xz1-gVxgQeQi9AUxmqDjtx8455SyoL-b2LZdBEiJTo8-XZn2n4ZRBb…NYDXi9xlT_-BAcGHV0ZqGBzbItBzEvsjInrEIWh3G93x0XMte0bSN00lh0&t=6119e399:6073
XHR finished loading: "http://:1562/FridayViewer.aspx". ScriptResource.axd?d=xz1-gVxgQeQi9AUxmqDjtx8455SyoL-b2LZdBEiJTo8-XZn2n4ZRBb…NYDXi9xlT_-BAcGHV0ZqGBzbItBzEvsjInrEIWh3G93x0XMte0bSN00lh0&t=6119e399:6073
Uncaught Sys.WebForms.PageRequestManagerServerErrorException: Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 500 ScriptResource.axd?d=xz1-gVxgQeQi9AUxmqDjtx8455SyoL-b2LZdBEiJTo8-XZn2n4ZRBb…RNYDXi9xlT_-BAcGHV0ZqGBzbItBzEvsjInrEIWh3G93x0XMte0bSN00lh0&t=6119e399:237

<%= %> is an equivalent of Response.Write which is not intended to work with AJAX (which what UpdatePanel is). If you need to display something in an UpdatePanel - assign it to a property of a control (it could be some standard ASP.NET Control like Label and its Text property or even a SPAN with runat="server" and its innerHTML property)

you can also use hidden field.
Steps
1) set value of hidden field
2) get the value of hidden field using java script or jQuery

Thanks for everyones answers they all help resolve the issue
Im using the hidden control and setting its value from code behind
The reason for the error on postback seemed to be the length of string that was assigned to the hidden field which caused the issues. To resolve I blanked the value in javascript before postback

Issue Related to Hidden Field in asp.net

I have an asp.net application. i have added Hidden field on Master Page..
<asp:HiddenField runat="server" ID="hiddenCriteria" Value="abcd"/>
When I try to get the value of Hidden field from Javascript :
alert(document.getElementById("ct100_hiddenCriteria").value);
I get the following value :
How to get real stored value ?

var labelID = '<%= hiddenCriteria.ClientID %>';
alert(labelID);

Try setting ClientIDMode to Static and it will output the ID of the control as hiddenCriteria
Makes it more JavaScript friendly.

You can use client id in the javascript function as follows
alert(document.getElementById('<%= hiddenCriteria.ClientID %>').value);
Or you can take benifit of ClientIDode to static as follow
<asp:HiddenField runat="server" ClientIDMode="Static" ID="hiddenCriteria"
Value="abcd"/>
and simply
alert(document.getElementById("hiddenCriteria").value);
For further reading
http://www.codeproject.com/Articles/34151/ASP-NET-4-0-Client-ID-Feature

Get Value Of Control In Code-Behind

When I call <%= this.HiddenField.Value %> the value of HiddenField control in this case remains the same state (5) ? But when I call it with console.log(document.getElementById('<%= this.HiddenField.ClientID %>').value); this return the changed state in this case "active", why? How I can get the changed value in code behind (I want <%= this.HiddenField.Value %> to return "active"(the changed value)) ?
code:
<script>
$(function () {
document.getElementById('<%= this.HiddenField.ClientID %>').value = "active";
console.log(document.getElementById('<%= this.HiddenField.ClientID %>').value); // this return te changed value "active"
console.log('<%= this.HiddenField.Value %>') //this again is 5 not "active"
});
</script>
<asp:HiddenField ID="HiddenField" runat="server" Value="5" />

You are confusing server side and client side code and when they run.
Server side code runs first. This is what's in the <%=%> blocks. In it, when using this.HiddenField.Value, it will output the server side value of the control, before it has been changed client side. this.HiddenField.ClientID will output the control ID as output by the server so you can get it from client side code.
When the page first loads, the <%=%> sections will be replaced with the server side values.
This would look like (in the browser once the page loads do - view source to see what was actually rendered to the browser):
<script>
$(function () {
document.getElementById('someId').value = "active";
console.log(document.getElementById('someId').value); // this return te changed value "active"
console.log('5') //this again is 5 not "active"
});
</script>
<input type="HiddenField" ID="someId" Value="5" />
Then, and only then, will client side code run, with the results you have seen.

In the following line
console.log('<%= this.HiddenField.Value %>')
<%= this.HiddenField.Value %> is evaluated at server so in the browser its
console.log('5')
because that's the value of the expression.

<%= whatever %> evaluates whatever when the page is rendered on the server.
If you look at the HTML sent to your client, you will find something like
$(function () {
document.getElementById('blahblah_HiddenField').value = "active";
console.log(document.getElementById('blahblah_HiddenField').value);
console.log('5')
});
The 5 is rendered by the server - there's nothing on the client's end linking that 5 to the value in the hidden field, so it doesn't get updated when the hidden field's value changes.

It happens because the asp.net control shows the "server" value, that is 5. With javascript you are modifing the dom on the client side, the asp.net control value doesn't change until you post the page.

Or you can use ClientIDMode
<asp:HiddenField ID="HiddenField1" runat="server" ClientIDMode="Static" />
Set and Get;
in jquery
$('#HiddenField1').val('active');
console.log($('#HiddenField1').val());
in javascript
document.getElementById('HiddenField1').value = 'active';
console.log(document.getElementById('HiddenField1').value);

Pass Javascript Variable To C# Code Behind

How to get value from javascript to C# code behind ? I have an idea with the code below. In javascript code I want to assign the value of "HiddenField" Control with string value and then I want to take this value from "HiddenField" in code behind. But with this code I cannot do it. Can you tell me how to make it ?
<script>
$(function () {
document.getElementById('HiddenField').value = "active";
console.log(<%= this.HiddenField.Value %>)
});
</script>
<asp:HiddenField ID="HiddenField" runat="server" Value="5" Visible="true" />

you need to use ClientID property of control to get actual element ID in DOM.
<script>
$(function () {
document.getElementById('<%= HiddenField.ClientID%>').value = "active";
console.log(document.getElementById('<%= HiddenField.ClientID%>').value)
});
</script>
<asp:HiddenField ID="HiddenField" runat="server" Value="5" Visible="true" />

Use the Control ID for HTML markup that is generated by ASP.NET.
document.getElementById('<%= HiddenField.ClientID%>').value = "active";
When a Web server control is rendered as an HTML element, the id
attribute of the HTML element is set to the value of the ClientID
property. The ClientID value is often used to access the HTML element
in client script by using the document.getElementById method.

Then send the Hidden value through the javascript function as a variable while calling the controller
Surely works,
Cheers
Phani*

you may take a look at mshtml
As far as I know you call with this C# functions from your javascript code ;-)

Div onload function and embedding server code c#

I am trying to call c# properties in .aspx page, where myfunc is jquery function.
this function take parameters which i am passing through c# public properties. and I want to call this function as soon as div is rendered.previously i have done this on prerender event in ascx control. wha is exact ssyntax for below code and calling jquery function from here is valid?
<div class ="v" onload ="Javascript:myfunc('<%= this.articleID %> '
,'" +<%=this.UserID %>+"','" +<%=this.EncryptedUserID %>" +','" +<%#
this.ItemIndex %>)">
thanks
Edited
Ok If i do like this way
<div class ="v" >
<script language ="javascript" >
JGetTotalVotes(<%= this.articleid %> ,<%
this.ThisEncryptedUserID %>,<% this.ItemIndex %>,'aaa');
</script>
I do not want server side hidden fields solutions and if i use hiden field ( non server html tag) then i still need to call <%%> to fetch value from server side to hiddent field

I see you are missing single quote after the last parameter if that is not the problem.
You can use hidden fields and call the function in javascript
Add this to your page
<asp:HiddenField runat="server" ID="hdnArticleId" ClientIDMode="Static" />
<asp:HiddenField runat="server" ID="hdnUserId" ClientIDMode="Static"/>
<asp:HiddenField runat="server" ID="hdnEncryptedUserID" ClientIDMode="Static"/>
<asp:HiddenField runat="server" ID="hdnItemIndex" ClientIDMode="Static"/>
bind those hiddenfields in Page_Load event remember to add ClientIDMode="Static" to set the id as you set not a generated one by asp.net to have the ability to use them in javascript
Add To your javascritp
function YourFunction(){
var ArticleId = document.getElementById("hdnArticleId").value;
var UserId= document.getElementById("hdnUserId").value;
var EncryptedUserID= document.getElementById("hdnEncryptedUserID").value;
var ItemIndex= document.getElementById("hdnItemIndex").value;
// your code goes here
}
and don't forget to call your javascript function in page onload

Div elements don't pull in external content, so they don't have load events.
If you want to run some JS after a div element has been parsed:
<div></div>
<script> foo(); </script>