JavaScript and CF

calista · Jun 19, 2001

I'm trying to learn JavaScript to apply it to my CF pages. What I'm trying to do here is a simple image swap. It works fine except for one minor detail: The script executes BEFORE anything is clicked. Help anybody? Here it is in its entirety:

Code:

<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>

<HTML>
<HEAD>
	<TITLE>Image Swap Three</TITLE>
	<!--- Set Variables --->
<CFSET CurrentSquare = &quot;GreenSquare.gif&quot;>
<CFSET ImageOne = &quot;GreenSquare.gif&quot;>
<CFSET ImageTwo = &quot;RedCircle.gif&quot;>
<CFSET ImageThree = &quot;WhiteCircle.gif&quot;>
<CFSET Player = &quot;White&quot;>

	<SCRIPT LANGUAGE = &quot;JavaScript&quot;>
  	<!-- Hide from other browsers
    function SwapImage()
    {
      	<CFIF #CurrentSquare# EQ #ImageOne#>
			<CFIF #Player# EQ 'Red'>
				<CFSET CurrentSquare = &quot;#ImageTwo#&quot;>
			</CFIF>
			<CFIF #Player# EQ 'White'>
				<CFSET CurrentSquare = &quot;#ImageThree#&quot;>
			</CFIF>
	  	<CFELSE>
			alert(&quot;There has been an error!&quot;)
		</CFIF>
    }
  	// Stop Hididng from other Browsers  -->
  	</SCRIPT>
</HEAD>
	
<BODY>

<CFOUTPUT>
<FORM ACTION=&quot;#CGI.SCRIPT_NAME#&quot; METHOD=&quot;post&quot; ENCTYPE=&quot;multipart/form-data&quot;>
	<INPUT TYPE=&quot;Image&quot; NAME=&quot;Square1_1&quot; SRC=&quot;#CurrentSquare#&quot; ONCLICK=&quot;SwapImage()&quot;>
</FORM>
</CFOUTPUT>

</BODY>
</HTML>

Calista :-X
Jedi Knight,
Champion of the Force

GunJack · Jun 19, 2001

Hey Calista,

All of your cf coding will be executed on the server so the browser will basically see this JS function:

<SCRIPT LANGUAGE = "JavaScript">
<!-- Hide from other browsers
function SwapImage()
{alert("There has been an error!&quot

}
// Stop Hididng from other Browsers -->
</SCRIPT>

.......

<INPUT TYPE="Image" NAME="Square1_1"
SRC="RedCircle.gif" ONCLICK="SwapImage()">

The way I see it, it looks like your page will load with the RedCircle.gif image and never show any of the other ones. It seems like your trying to mix server side CF with client side JS which doesn't work the way you might think. Am I missing something?

Take care,
GJ

tleish · Jun 19, 2001

Yes, you might be looking for more of a javascript solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Image Swap Three</TITLE>

<CFSET CurrentSquare = "GreenSquare.gif">

<SCRIPT LANGUAGE = "JavaScript">
<!-- Hide from other browsers

Code:

function MM_findObj(n, d) { //v3.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf(&quot;?&quot;))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}

var ImageOne = "GreenSquare.gif";
var ImageTwo = "RedCircle.gif";
var ImageThree = "WhiteCircle.gif";
var Player = "White";

function SwapImage(object)
{
absPath = object.src;
CurrentSquare = absPath.substring(absPath.lastIndexOf("/&quot

+1,absPath.length)

if(CurrentSquare == ImageOne){
if(Player == 'Red')
object.src = ImageTwo;
else if(Player == 'White')
object.src = ImageThree;
else
alert("There has been an error!&quot

;
}
}
// Stop Hididng from other Browsers -->
</SCRIPT>

</HEAD>

<BODY>

<CFOUTPUT>
<FORM ACTION="#CGI.SCRIPT_NAME#" METHOD="post" ENCTYPE="multipart/form-data">
<INPUT TYPE="Image" NAME="Square1_1" SRC="#CurrentSquare#" ONCLICK="SwapImage(MM_findObj('Square1_1'))">
</FORM>
</CFOUTPUT>

</BODY>
</HTML>

- tleish

khazmir · Jun 20, 2001

You cannot use ColdFusion statements in your JavaScript. I don't know if this code has works, but I think it may point you in the right direction. Also, I'm realtively new to programming but is "image" a form input type?

Anyway, hope this helps.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Image Swap Three</TITLE>

<CFSET CurrentSquare = "GreenSquare.gif">
<CFSET ImageOne = "GreenSquare.gif">
<CFSET ImageTwo = "RedCircle.gif">
<CFSET ImageThree = "WhiteCircle.gif">
<CFSET Player = "White">

<SCRIPT LANGUAGE = "JavaScript">


function SwapImage()
{
var OldSqure;
var Player;

{
if (OldSquare == "ImageOne" && Player == "red&quot

{
CurrentSquare = "#ImageTwo#"
form.Square1_1.value = CurrentSquare
}
if (OldSquare == "ImageOne" && Player == "white&quot

{
CurrentSquare = "#ImageThree#"
form.Square1_1.value = CurrentSquare
}

return false;
alert("There has been an error!&quot

}

// Stop Hididng from other Browsers -->
</SCRIPT>
</HEAD>

<BODY>

<CFOUTPUT>
<FORM ACTION="#CGI.SCRIPT_NAME#" METHOD="post" ENCTYPE="multipart/form-data" ONSUBMIT="SwapImage(#CurrentSquare#,#Player#)>
<INPUT TYPE="Image" NAME="Square1_1" SRC="#CurrentSquare#">
</FORM>
</CFOUTPUT>

</BODY>
</HTML>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

JavaScript and CF

calista

Programmer

GunJack

ISP

tleish

Programmer

khazmir

Programmer

Similar threads

Part and Inventory Search

Sponsor