sharing a server-side variable with client-side

pigtail · #1 (**permalink**) April 1st, 2004, 01:10 AM

I have a hard time confirming if I CAN NOT have both server-side JavaScript and client-side JavaScript in the same html file. Does anyone know if I can have them in the same html file and if so, can my server-side Javascript shares a string variables with the client-side Javascript? How long can a string variable be?

I have written an ASP file that accesses databases and displayed data in a table format on the client’s browser. I tried to pass the constructed table back to the client so that the client-side Javascript section can use the innerHTML function to replace the entire table on the client’s browser without having the infamous flickering effect. I am having a hard time sharing my server-side variable which has the entire table with the client’s Javascript in the same file. Am I correct that the client-side Javascript can not retrieve server-side Session object, server-side Javascript variables and the Cookies for the session?

Imar · #2 (**permalink**) April 1st, 2004, 03:36 AM

Hi there,

That's a lot of questions in one question... Let me try to tackle them all.

First of all, you *can* share variables between server side and client side code, but not directly. It's important to understand how it works under the hood if you want to share the values of these two kind of variables.
A Server side variable exists on the server, while a JavaScript variable lives on the client. This means that you cannot directly alter one variable from the other location. However, you can use the standard Web mechanisms like Response and POST to send the values of those variables from the server to the client and back.

Let me clarify this with an example. The following piece of code will alert the value of a Session variable:

Code:

<%
  Session("MyTest") = Now() ' store date and time in session var
%>
<script type="text/javascript">
  var whatTimeIsIt = '<%=Session("MyTest")%>';
  alert(whatTimeIsIt);
</script>

This is a trivial, but important example. What happens is that when the page loads at the server, the current date and time is stored in a Session variable. Then the page continues and reaches the client side JavaScript block which it will send to the browser. However, it also encounters a server side code block (<%= and %>) which injects the value of the session variable into the client side code.

If you look at the source of the page in the browser, you'll see something like this:

Code:

<script type="text/javascript">
  var whatTimeIsIt = '4/1/2004 9:32:06 AM';
</script>

So, as you can see, you can pass the value of the session variable into a local variable.

The string in JavaScript can be (AFAIK) virtually endless. I am not aware of any limitation. However, you should be aware of some encoding issues, for example::

Code:

<%
  Session("MyTest") = "A variable's value"
%>
<script type="text/javascript">
  var whatValue = '<%=Session("MyTest")%>';
</script>

This will cause a problem because the MyTest variable contains an apostrophe. The code in the browser will end up like this:

var whatValue = 'A variable's value';

As you can see, the value is cut of after the word variable, as the ' is seen as the end of the string.
Therefor it's important to escape any output you're trying to send to the browser. You can use Escaping methods or replace the illegal characters yourself.

If you need to send the client side value back to the server, you'll need to add it to a form somehow. How you do this is up to you: you can write out the server side variables to hidden or visible fields, allow the user to change them (or not), have the client recalculate them, whatever your application requires. At the end, the variables must be added to the form, and submitted back to the server. There, the same principle applies again, but in reverse:

Code:

<%
  ' Assume form is submitted
  Session("MyTest") = Request.Form("txtHiddenMyTest")
%>

This saves the value of the hidden form field back in the server side session variable.

If you want, you can access cookies from the client as well. There are widely available JavaScript libraries / functions that allow you to work with cookies from within client side JavaScript.

I think this answers all your question you asked here. If not, let me know.

HtH,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

pigtail · #3 (**permalink**) April 1st, 2004, 02:27 PM

You are wonderful!!!! All I was missing was the single quote around the Session variable in my client-side Javascript. Thanks A LOT!!! You have made my day!!

Imar · #4 (**permalink**) April 1st, 2004, 02:38 PM

You're welcome. Glad it's working, although I may have given you a bit verbose answer for just a single quote.... ;)

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

binujz · #5 (**permalink**) October 26th, 2004, 07:41 AM

Hi Imar, its great! but how can i do viceversa?
means to store javascript variable values in to a server variable without posting? eg:
if(confirm("Are u sure to delete"))
{
<% some asp code%>
}
else
{
<%again some asp code%>
}

is it possible? if yes how? can u help me?

Quote:

quote:Originally posted by Imar
Hi there,

That's a lot of questions in one question... Let me try to tackle them all.

First of all, you *can* share variables between server side and client side code, but not directly. It's important to understand how it works under the hood if you want to share the values of these two kind of variables.
A Server side variable exists on the server, while a JavaScript variable lives on the client. This means that you cannot directly alter one variable from the other location. However, you can use the standard Web mechanisms like Response and POST to send the values of those variables from the server to the client and back.

Let me clarify this with an example. The following piece of code will alert the value of a Session variable:

Code:

<%
  Session("MyTest") = Now() ' store date and time in session var
%>
<script type="text/javascript">
  var whatTimeIsIt = '<%=Session("MyTest")%>';
  alert(whatTimeIsIt);
</script>

This is a trivial, but important example. What happens is that when the page loads at the server, the current date and time is stored in a Session variable. Then the page continues and reaches the client side JavaScript block which it will send to the browser. However, it also encounters a server side code block (<%= and %>) which injects the value of the session variable into the client side code.

If you look at the source of the page in the browser, you'll see something like this:

Code:

<script type="text/javascript">
  var whatTimeIsIt = '4/1/2004 9:32:06 AM';
</script>

So, as you can see, you can pass the value of the session variable into a local variable.

The string in JavaScript can be (AFAIK) virtually endless. I am not aware of any limitation. However, you should be aware of some encoding issues, for example::

Code:

<%
  Session("MyTest") = "A variable's value"
%>
<script type="text/javascript">
  var whatValue = '<%=Session("MyTest")%>';
</script>

This will cause a problem because the MyTest variable contains an apostrophe. The code in the browser will end up like this:

var whatValue = 'A variable's value';

As you can see, the value is cut of after the word variable, as the ' is seen as the end of the string.
Therefor it's important to escape any output you're trying to send to the browser. You can use Escaping methods or replace the illegal characters yourself.

If you need to send the client side value back to the server, you'll need to add it to a form somehow. How you do this is up to you: you can write out the server side variables to hidden or visible fields, allow the user to change them (or not), have the client recalculate them, whatever your application requires. At the end, the variables must be added to the form, and submitted back to the server. There, the same principle applies again, but in reverse:

Code:

<%
  ' Assume form is submitted
  Session("MyTest") = Request.Form("txtHiddenMyTest")
%>

This saves the value of the hidden form field back in the server side session variable.

If you want, you can access cookies from the client as well. There are widely available JavaScript libraries / functions that allow you to work with cookies from within client side JavaScript.

I think this answers all your question you asked here. If not, let me know.

HtH,

Imar

---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

joefawcett · #6 (**permalink**) October 26th, 2004, 08:13 AM

You can't send client side data to the server without initiaiting an HTML request. There are a number of ways of doing this:

A tradional web form using "get" or "post"
Using msxml2.xmlhttp class or Mozilla equivalent, this may only be suitable in a trusted site/local intranet scenario
If you don't need any data returned and can use "get" method (data in querystring) then use
Code:
```
var sUrl = "myUrl/dbPage.asp?name=Joe&Age=42";
```
Code:
```
var oImg = new Image();
oImg.src = sUrl;
```
This will send the data to the asp page as if text elements named "Name" and "Age" contained "Joe" and 42.

--

Joe

vinod_yadav1919 · #7 (**permalink**) November 4th, 2004, 02:01 AM

Hii Pigtail
I have another approach to sharing a server-side variable with client-side

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
function NextQuotation() {

var obj = new ActiveXObject( "Microsoft.XMLHTTP" );
var url = "http://myurl/GetQuotation.asp"
obj.open( "POST",url, false );
obj.send();
nextquotation=obj.responseText
alert(nextquotation);
}
</SCRIPT>
<form name="test">
<input type="text" name="quotation_id" >
<input type=button name="getQuote" onclick="NextQuotation()">
</form>

And my "GetQuotation.asp" ASP page is like
<% response.write session("counter") %>

Since u want to get session variables on the client side variable u can get through
nextquotation in javascript function (i.e nextquotation=obj.responseText)

Hope ,It will help to find the solution.

Cheers :)

vinod

Need to download code?

Navigation