session variables and java script 1

[styleBunny]

Hi guys ad girls,

I have a js function in which i use some asp session variables, which are generated when the page is loaded.

if i declare the session variables, then have the js function below that (all in the head) it works fine, but when i put the js into an external js file, it stops working?

Could this be because the js is being executed before the creation of the asp variables? Maybe not, cos the js function is only called when the user inputs.

Its not a deal breaker, as i said it works fine when its all in one page, but in theory i should be able to have an external js file and asp variables working in harmony.

Cheers,
Paul.

 

[Tarwn]

It depends on how your writing the Javascript variables from ASP. I can guarantee that the client-side Javascript is not firing before the server-side ASP is done building the page, though (that actually takes some work).

If you have the ASP variables in your external javascript page, then they aren't going to get written ince that external page is a) not going to be processed as an ASP page and, b) external, so even if it was processed the variables would be processed independantly of anything you did on the first page, and, c) likely to be cached with the end user, so even if you processed it as ASP, only referenced session variables, etc, there is a good chance it will be cached by the end user and not reloaded.

On the other hand, if your including the original javascript file before you assign your ASP vales to the correct javascript variables, it is ery possible that the final result will be some javascript that runs without your variable values. basically you have to look at the order of operation for your javascript file. If it has several funcitons that are called around line 40 on the original page that require your ASP values, then you know yo need to write those values before line 40 so they will be processed ahead of time. if you have several lines in your external file thatare in not in functions, and your file include is on line 20, then you know you need to define those javascript variables before line 20 so they will be set before anything is executed in the include.

Sample code would be more helpful, as right now I'm just guessing at general situations that could lead to a question like yours, rather then actually answering your question

-T

 

[styleBunny]

Hi Tarwn,

Sorry for the delay here is the sample code. The general gist of it is, two list boxes in a form are populated from different javascript arrays, the data is dates. before a date is added from the array to the list box it is evaluated against the current date to see if that date has already passed. It is evaluated against a server date, rather than a local system date, thats where the session vars come in.


<!--#include file="header.asp"-->

<%

Session("x") = Day(Now)
Session("y") = Month(Now)
Session("z") = Year(Now)

Session("y") = Session("y") - 1

%>

<script>
// Function to handle dynamically altering the contents of the date List box
function handleChange(newDisplay)
{ var CourseSelect, DateSelect, NumEntries, i
CourseSelect = document.frm.Course
DateSelect = document.frm.Cdate
//document.write(newDisplay)
// Delete all entries in the date list box
for (i = DateSelect.length; i > 0; i--)
{
DateSelect.options[i-1] = null
}

// Add comment option to date List box
DateSelect.options[0] = new Option("-- Select Date --",0)

// If course 0 or 1 is selected add its dates to the date List box
if (newDisplay == 0 || newDisplay == 1)
{
NumEntries = arrCourse[0].length
var z = 1 //selects the option number for the select box, this is independent of the loop, as some options will have expired.
for (i = 1; i <= NumEntries; i++)
{
dtmCourse = new Date((arrCourse[0])[i-1])
var dtmNow = new Date(<%= Session("z") %>, <%= Session("y") %>, <%= Session("x") %>)

//display only the dates that have not yet occured.
if (dtmCourse >= dtmNow)
{
DateSelect.options[z] = new Option(dtmCourse.toString().substr(0,10) + " " + dtmCourse.toString().substr(28,34),("Option: " + (i) + " Date: " + dtmCourse.toString().substr(0,10) + " " + dtmCourse.toString().substr(28,34)))
z++
}

}
}
// If course 1 is selected add its dates to the date List box
if (newDisplay == 2 || newDisplay == 4)
{
NumEntries = arrCourse[1].length
var z = 1 //selects the option number for the select box, this is independent of the loop, as the loop moves i=i+2.
for (i = 1; i <= NumEntries; i=i+2)
{
dtmCourse = new Date((arrCourse[1])[i-1])
dtmCourse2 = new Date((arrCourse[1]))
var dtmNow = new Date(<%= Session("z") %>, <%= Session("y") %>, <%= Session("x") %>)

//display only the dates that have not yet occured.
if (dtmCourse >= dtmNow)
{
DateSelect.options[z] = new Option(dtmCourse.toString().substr(0,3) + dtmCourse.toString().substr(7,3) + " & " + dtmCourse2.toString().substr(0,3) + dtmCourse2.toString().substr(7,3) + dtmCourse2.toString().substr(3,4) + " " + dtmCourse2.toString().substr(28,34),("Option: " + (z + (arrCPR_lvl1.length+1)) + " Date: " + dtmCourse.toString().substr(0,3) + dtmCourse.toString().substr(7,3) + " & " + dtmCourse2.toString().substr(0,3) + dtmCourse2.toString().substr(7,3) + dtmCourse2.toString().substr(3,4) + " " + dtmCourse2.toString().substr(28,34)))
z++
}
}
}
// If course 3 is selected add its dates to the date List box
if (newDisplay == 3)
{
NumEntries = arrCourse[2].length
for (i = 1; i <= NumEntries; i++)
{
DateSelect.options = new Option((arrCourse[2])[i-1],("Not Applicable"))
}
}

if (newDisplay == 3)
{
DateSelect.selectedIndex = 1
}else{
DateSelect.selectedIndex = 0
}

}
</script>
<!-- This is the area Under the menu -->
<table width="165" cellpadding="12" cellspacing="0">
<tr>
<td>
<table width="100%" border="1" cellpadding="6" cellspacing="0" bordercolor="#8C8C8C">
<tr>
<td>
<p>

<h5>Make a Booking</h5>
<span class="text">
<a href="ctimes.asp">Book Semester 1, 2005 courses online.</a>
</span>

</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="bottom">
<table width="100%"cellpadding="6" cellspacing="0">
<tr>
<td>
<p style="text-align:center;">

<img src="images/NRTlogo.gif" width="120" height="101"><br><br>
<span class="train">
First Aid Management<br>
is a Nationally Recognised Training Organisation. RTO 20776, Part of the Australian Qualification Framework.</span>

</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="images/bg_mascot.jpg" width="160" height="146">
</td>
</tr>
</table>
</td>
<!-- This is the area is the content pane -->
<td width="519" height="100%" valign="top" background="none">

<p><br>

<h5>Online Booking Form</h5>
<br>
<span class="text">Fill out the form below to secure a place at one of First Aid Management and Training's courses. Take a moment to ensure that all your personal information is correct.</span>


<form name="frm" method="post" onsubmit="return validateForm(this);" action="cbookingConfirm.asp">

<table class="text" border="0" cellspacing="0" cellpadding="5">
<tr>
<td colspan="2"><h5>Booking Form</h5>
</td>
</tr>
<tr>
<td>First Name</td>
<td><input name="fname" type="text" size="35" maxlength="60" value="<% = session("fname") %>" ></td>
</tr>
<tr>
<td>Surname Name</td>
<td><input name="sname" type="text" size="35" maxlength="60" value="<% = session("sname") %>"></td>
</tr>
<tr>
<tr>
<td style="vertical-align:top;">Address</td>
<td><input name="address" type="text" size="35" maxlength="60" value="<% = session("address") %>"></td>
</tr>
<tr>
<td style="vertical-align:top;">Suburb</td>
<td><input name="suburb" type="text" size="35" maxlength="60" value="<% = session("suburb") %>"></td>
</tr>
<tr>
<td style="vertical-align:top;">State </td>
<td>
<select style="width:140px;" name="state">
<option value="VIC" selected>VIC</option>
<option value="TAS">TAS</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="ACT">ACT</option>
<option value="NSW">NSW</option>
<option value="NT">NT</option>
<option value="QLD">QLD</option>
</select>
</td>
</tr>
<tr>
<td style="vertical-align:top;">Post Code </td>
<td><input name="pcode" type="text" class="textArea" size="35" maxlength="4" value="<% = session("pcode") %>"></td>
</tr>
<tr>
<tr>
<td>Phone</td>
<td><input type="text" size="35" maxlength="15" name="phone" value="<% = session("phone") %>"></td>
</tr>
<td>e-mail</td>
<td><input type="text" size="35" maxlength="60" name="email" value="<% = session("senderEmail") %>"></td>
</tr>
<td colspan="2"><h5>Courses</h5></td>
</tr>
<tr>
<tr>
<td>Select a Course</td>
<td>
<select name="Course" onChange="handleChange(this[this.selectedIndex].value)">
<option value="-1">-- Select Course --
<option value="0">CPR $45.00
<option value="1">Level 1 $85.00
<option value="2">Level 2 update $145.00
<option value="3">Recognised Prior Learning (RPL) $95.00 + P/H $3.50
<option value="4">Full Course $165.00
</select>
</td>
</tr>
<tr>
<td>Date</td>
<td>
<select name="Cdate">
<option value="-1">-- Select Date --
<option>
<option>
<option>
<option>
</select>
<script type="text/javascript">
handleChange(-1)
</script>
</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr style="padding:4px 0px;">
<td>&nbsp;</td>
<td><input type="submit" name="btnSubmit" value="Continue"></td>
</tr>
</table>

</form>

</p>


</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10" bgcolor="#FFFFFF">

<!--#include file="footer.asp"-->

In this scenario, with the asp session variables and the js all in the same place, it works fine. When the js function is in an external file it wont work. do i need to add something to point to the variables in this line?

var dtmNow = new Date(<%= Session("z") %>, <%= Session("y") %>, <%= Session("x") %>)

Thanks for your help,
paul.

 

[trollacious]

You cannot include ASP in external JS files. These aren't loaded through the ASP server, so any ASP values declared in them aren't processed.

Lee

 

[styleBunny]

Hi Lee,

thanks for looking

So maybe, within the asp page i can assign the asp var to js vars then reference thoes js vars in the external js file. Though this would rely on the external js file being able to see the local js vars.

Could i pass them as part of the handleChange() function?

so have the asp page like:
<%

Session("x") = Day(Now)
Session("y") = Month(Now)
Session("z") = Year(Now)

Session("y") = Session("y") - 1

%>

<script>
var sx = (<%= Session("x") %>,
var sy = (<%= Session("y") %>,
var sz = (<%= Session("z") %>,
</script>

then in the form go:
onChange="handleChange(this[this.selectedIndex].value, sx, sy, sz)"

maybe?
p.

 

[styleBunny]

Hi guys,

Success! the idea i posted above does the trick.

Thanks guys
Paul.

 

[trollacious]

The method you used is one that I use when inserting ASP values into JS variables. You can also make the external JS file an include into the ASP page, but you have to put script tags into the file as if it were a regular script on the page. If you use it as an include, you can set JS variables to ASP values in the script itself, as well.

Lee