PDA

View Full Version : ASP and Javascript conflict

OEscatel
04-23-2005, 02:56 AM
HI
I'm using a querry string to submitt information into an Asp page that has to load images into a page. The trouble that im having is that the functions that i'm using are written in javascript and the asp page is writen in vbscript.

Can some one help me and tell what I'm doing wrong?
Thanks
OEscatel

below is my code:

I'm also including the code to the page that sends the querry string to this one, please see atached text file "details.txt"


<%@ Language=VBScript %>
<%

Session("loggedin") = False

%>
<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<STYLE type=text/css>
A {
FONT-SIZE: 12px; COLOR: #d3d3d3; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #ff3333; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}
.style1 {color: #000000}
</STYLE>
<title>DD, Inc.</title>

<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var CarID= Request.QueryString("carid")
var dynimages=new Array()
dynimages[0]=["../images/inventory/" + CarID + ".jpg", ""]
dynimages[1]=["../images/inventory/" + CarID + "1.jpg", ""]
dynimages[2]=["../images/inventory/" + CarID + "2.jpg", ""]

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progidhttp://www.dynamicdrive.com/forums/...ies/biggrin.gifXImageTransform.Microsoft.GradientWipe(GradientSiz e=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>

<script language="javascript">
var fullWidth;

function init() {

// Get width of window, need to account for scrollbar width in Netscape.

fullWidth = getWindowWidth() - (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);

myNavBar1.resize(fullWidth);
myNavBar1.create();
myNavBar1.setzIndex(2);

//UNCOMMENT BELOW LINE TO MOVE MENU DOWN 50 pixels
myNavBar1.moveTo(0, 155);
preloadImages();
}
</script>
</head>
<body text= "Black" link=Black onload="init()" bgcolor=white vlink=Blue alink=Red>

<table width="709" height="138" border="0" cellPadding="0" cellSpacing="0">
<tr>
<td bgcolor="white" width="720" height="138"><a href="/new/default.asp"><img src="images/DD.jpg" alt="www.DD.com" width="709" height="138" hspace="0" vspace="0" border="0" align="left"></a></td>
</tr>
</table>
<br>

<table cellSpacing="1" cellPadding="1" width="100%" align="center" border="0">
<tr>
<td colspan="5"></td>
</tr>
<tr>-</tr>
<tr>
<td colspan="2">
<p><font face="Arial, Helvetica, sans-serif" size="2"> </font></p></td>
<td colspan="3" width="50%">
<p align="right"><font face="Arial, Helvetica, sans-serif" size="2">
<script LANGUAGE="JavaScript">
function initArray() {
for(i=0;i<initArray.arguments.length; i++)
this[i] = initArray.arguments[i];
}

var isnMonths=new initArray("January","February","March","April","May","June","July","August","September","October","November","December");
var isnDays= new initArray("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");

today=new Date();
hrs=today.getHours();
min=today.getMinutes();
sec=today.getSeconds();
clckh=""+((hrs>12)?hrs-12:hrs);
clckm=((min<10)?"0":"")+min;
clcks=((sec<10)?"0":"")+sec;
clck=(hrs>=12)?"p.m.":"a.m.";

var stnr="";
var ns="0123456789";
var a="";

function getFullYear(d) {
yr = d.getYear();
if (yr < 1000)
yr+=1900;
return yr;
}
document.write(isnDays[today.getDay()]+", "+isnMonths[today.getMonth()]+" "+today.getDate()+", "+getFullYear(today));
</script>
</font></p></td>
</tr>
</table>
<table width="100%" background="images/black.gif">
<tr>
<td></td>
<tr></tr>
</table>
<br>


<%
dim CarID

CarID= Request.QueryString("carid")


response.Write("<table width=400 height=300 border=0 align='center' cellpadding=1 cellspacing=0>")
response.Write("<tr>")

response.Write("<td><img src='images/inventory/" & carID & ".jpg' name ='mainimage' frameborder = 0 width =400 height=300 marginheight =0 marginwidth = 0 scrolling='no'></img></td>")
response.Write("</tr>")
response.Write("</table>")
response.Write("<p>&nbsp;</p>")
response.Write("<table width='800' height=100 border=0 align='center' cellpadding=1 cellspacing=0>")
response.Write(" <tr>")
response.Write("<td align='center'><a href='#' onMouseover='modifyimage(dynloadarea, 0)'><img name='Image1' src='images/inventory/" & carID & ".jpg' width=120 height=90 alt='Image'></td>")
response.Write("<td align='center'><a href='#' onMouseover='modifyimage(dynloadarea, 0)'><img name='Image1' src='images/inventory/" & carID & "1.jpg' width=120 height=90 alt='Image'></td>")
response.Write(" </tr>")
response.Write("</table>")
response.Write("<p>&nbsp;</p>")
response.Write("<p> <br>")

%>

<div align="center" id="dynloadarea" style="width:80px; height:225px"></div>

</p>
<table width="100%" background="images/black.gif">
<tr>
<td></td>
<tr></tr>
</table>
<br>
<p align="center">
<table width="100%" background="images/black.gif">
<TR>
<td>
<tr></tr>
<TR>
<td></TR>
</table>
<font color=black face="Arial, Helvetica, sans-serif" size="1"><p>
Copyright (C) 2005 DD, Inc.<br>
</body>
</HTML>
miranda
04-23-2005, 07:57 AM
Basically you need to move part of your asp code up the page. You are trying to include some server code in the javascript instead try it this way. I have highlited my changes so you can understand what i did. I eliminated the large block of response.write code and made it easier to read with small <%=CarID%>.

<%@ Language=VBScript %>
<%

Session("loggedin") = False '??? what purpose does this serve???
dim CarID
CarID= Request.QueryString("carid")%>
<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<STYLE type=text/css>
A {
FONT-SIZE: 12px; COLOR: #d3d3d3; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #ff3333; FONT-FAMILY: Arial, Helvetica, sans-serif; TEXT-DECORATION: underline
}
.style1 {color: #000000}
</STYLE>
<title>DD, Inc.</title>
<script language="javascript" type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var CarID= "<%=CarID%>"
var dynimages=new Array()
dynimages[0]=["../images/inventory/" + CarID + ".jpg", ""]
dynimages[1]=["../images/inventory/" + CarID + "1.jpg", ""]
dynimages[2]=["../images/inventory/" + CarID + "2.jpg", ""]

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progidhttp://www.dynamicdrive.com/forums/...ies/biggrin.gifXImageTransform.Microsoft.GradientWipe(GradientSiz e=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

var fullWidth;

function init() {

// Get width of window, need to account for scrollbar width in Netscape.

fullWidth = getWindowWidth() - (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);

myNavBar1.resize(fullWidth);
myNavBar1.create();
myNavBar1.setzIndex(2);

//UNCOMMENT BELOW LINE TO MOVE MENU DOWN 50 pixels
myNavBar1.moveTo(0, 155);
preloadImages();
}
</script>
</head>
<body text= "Black" link=Black onload="init()" bgcolor=white vlink=Blue alink=Red>

<table width="709" height="138" border="0" cellPadding="0" cellSpacing="0">
<tr>
<td bgcolor="white" width="720" height="138"><a href="/new/default.asp"><img src="images/DD.jpg" alt="www.DD.com" width="709" height="138" hspace="0" vspace="0" border="0" align="left"></a></td>
</tr>
</table>
<br>

<table cellSpacing="1" cellPadding="1" width="100%" align="center" border="0">
<tr>
<td colspan="5"></td>
</tr>
<tr>-</tr>
<tr>
<td colspan="2">
<p><font face="Arial, Helvetica, sans-serif" size="2"> </font></p></td>
<td colspan="3" width="50%">
<p align="right"><font face="Arial, Helvetica, sans-serif" size="2">
<script LANGUAGE="JavaScript" type="text/javascript">
function initArray() {
for(i=0;i<initArray.arguments.length; i++)
this[i] = initArray.arguments[i];
}

var isnMonths=new initArray("January","February","March","April","May","June","July","August","September","October","November","December");
var isnDays= new initArray("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");

today=new Date();
hrs=today.getHours();
min=today.getMinutes();
sec=today.getSeconds();
clckh=""+((hrs>12)?hrs-12:hrs);
clckm=((min<10)?"0":"")+min;
clcks=((sec<10)?"0":"")+sec;
clck=(hrs>=12)?"p.m.":"a.m.";

var stnr="";
var ns="0123456789";
var a="";

function getFullYear(d) {
yr = d.getYear();
if (yr < 1000)
yr+=1900;
return yr;
}
document.write(isnDays[today.getDay()]+", "+isnMonths[today.getMonth()]+" "+today.getDate()+", "+getFullYear(today));
</script>
</font></p></td>
</tr>
</table>
<table width="100%" background="images/black.gif">
<tr>
<td></td>
<tr></tr>
</table>
<br>
<table width=400 height=300 border=0 align="center" cellpadding=1 cellspacing=0>
<tr>
<td><img src="images/inventory/ <%=carID%>.jpg" name ="mainimage" border=0 width=400 height=300 marginheight=0 marginwidth=0 scrolling="no"></img></td>
</tr>
</table>
<p>&nbsp;</p>
<table width="800" height=100 border=0 align="center" cellpadding=1 cellspacing=0>
<tr>
<td align="center"><a href="#" onMouseover="modifyimage(dynloadarea, 0)"><img name="Image1" src="images/inventory/<%=CarID%>.jpg" width=120 height=90 alt="Image"></td>
<td align="center"><a href="#" onMouseover="modifyimage(dynloadarea, 0)"><img name="Image1" src="images/inventory/<%=CarID%>1.jpg" width=120 height=90 alt="Image"></td>
</tr>
</table>
<p>&nbsp;</p>
<p> <br>
<div align="center" id="dynloadarea" style="width:80px; height:225px"></div>

</p>
<table width="100%" background="images/black.gif">
<tr>
<td></td>
<tr></tr>
</table>
<br>
<p align="center">
<table width="100%" background="images/black.gif">
<TR>
<td> </td>
<tr></tr>
<TR>
<td> </td> </TR>
</table>
<font color=black face="Arial, Helvetica, sans-serif" size="1"><p>
Copyright (C) 2005 DD, Inc.<br>
</body>
</HTML>
ghell
04-23-2005, 10:29 AM
im pretty sure you can take the querystring out in javascript using some property of the location object

.. location.question or something weird like that.. i havnt used it in years.. that would be the same as Request.Querystring without any collection element specified though .. im not sure if you can easily just get that querystring element straight into javascript but..

it seems the only asp you actually need on that page is to say.. if they arent logged in then show this:
miranda
04-23-2005, 05:46 PM
Once again it seems I had tunnel vision. Ghell is right, this can be done using javascript. What's funny is that I have a tutorial on my site that says how to do this. located here (http://www.dataconnective.net/samples/pass-a-variable.htm)

<script language="JavaScript" type="text/javascript">
var locate = window.location;
var text = locate.toString();
function getCarID(theStr){
i = theStr.indexOf("=");
return(theStr.substring(i+1,theStr.length));
}

//Specify image paths and optional link (set link to "" for no link):var

var CarID = getCarID(text);

dynimages=new Array()
dynimages[0]=["../images/inventory/" + CarID + ".jpg", ""]
dynimages[1]=["../images/inventory/" + CarID + "1.jpg", ""]
dynimages[2]=["../images/inventory/" + CarID + "2.jpg", ""]
//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progidhttp://www.dynamicdrive.com/forums/...ies/biggrin.gifXImageTransform.Microsoft.GradientWipe(GradientSiz e=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

var fullWidth;

function init() {

// Get width of window, need to account for scrollbar width in Netscape.

fullWidth = getWindowWidth() - (isMinNS4 && getWindowHeight() < getPageHeight() ? 16 : 0);

myNavBar1.resize(fullWidth);
myNavBar1.create();
myNavBar1.setzIndex(2);

//UNCOMMENT BELOW LINE TO MOVE MENU DOWN 50 pixels
myNavBar1.moveTo(0, 155);
preloadImages();
}
</script>
</head>
<body text= "Black" link=Black onload="init()" bgcolor=white vlink=Blue alink=Red>

<table width="709" height="138" border="0" cellPadding="0" cellSpacing="0">
<tr>
<td bgcolor="white" width="720" height="138"><a href="/new/default.asp"><img src="images/DD.jpg" alt="www.DD.com" width="709" height="138" hspace="0" vspace="0" border="0" align="left"></a></td>
</tr>
</table>
<br>

<table cellSpacing="1" cellPadding="1" width="100%" align="center" border="0">
<tr>
<td colspan="5"></td>
</tr>
<tr>-</tr>
<tr>
<td colspan="2">
<p><font face="Arial, Helvetica, sans-serif" size="2"> </font></p></td>
<td colspan="3" width="50%">
<p align="right"><font face="Arial, Helvetica, sans-serif" size="2">
<script LANGUAGE="JavaScript" type="text/javascript">
function initArray() {
for(i=0;i<initArray.arguments.length; i++)
this[i] = initArray.arguments[i];
}

var isnMonths=new initArray("January","February","March","April","May","June","July","August","September","October","November","December");
var isnDays= new initArray("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday");

today=new Date();
hrs=today.getHours();
min=today.getMinutes();
sec=today.getSeconds();
clckh=""+((hrs>12)?hrs-12:hrs);
clckm=((min<10)?"0":"")+min;
clcks=((sec<10)?"0":"")+sec;
clck=(hrs>=12)?"p.m.":"a.m.";

var stnr="";
var ns="0123456789";
var a="";

function getFullYear(d) {
yr = d.getYear();
if (yr < 1000)
yr+=1900;
return yr;
}
document.write(isnDays[today.getDay()]+", "+isnMonths[today.getMonth()]+" "+today.getDate()+", "+getFullYear(today));
</script>
</font></p></td>
</tr>
</table>
<table width="100%" background="images/black.gif">
<tr>
<td></td>
<tr></tr>
</table>
<br>
<table width=400 height=300 border=0 align="center" cellpadding=1 cellspacing=0>
<tr>
<td>
<script>document.write("<img src="images/inventory/'+CarID+'.jpg" name ="mainimage" border=0 width=400 height=300 marginheight=0 marginwidth=0 scrolling="no" />')</script> </td>
</tr>
</table>
OEscatel
04-25-2005, 02:22 AM
Problem resolved. :thumbsup:
I would like to thank all of you guys that contributed, and helpme resolve my issue.

thanks again
OEscatel