Go Back   CodingForums.com > :: Client side development > JavaScript programming
Reload this Page Pass PHP variable to JavaScript function

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 09-08-2009, 08:56 PM   PM User | #1
pindi
New Coder

 
Join Date: Sep 2009
Posts: 16
Thanks: 3
Thanked 0 Times in 0 Posts
pindi is an unknown quantity at this point
Unhappy Pass PHP variable to JavaScript function
Here's something that I tested without the PHP and it worked ok. Now that I've introduced the PHP to the document it doesn't work.

The PHP variable is not passing to Javascript properly. By use of some cleverly placed alert boxes, I figured out that the only thing that is getting passed forward is something called : "object HTML ImageElement"

Specifically, I assign the element ID the unique ID number of the record in the SQL database. The problem isn't with the ID numbers themselves: They are alphanumeric and unique.

I think it boils down to one of two lines of code. Either this isn't working (about line 12)

Code:
function expander(RecordID){
or perhaps it is when I am calling the function (about line 66):

Code:
echo "<img id='".$row['IDNumber']."' src=".$row['ImagePath']." width='5%' onMouseOver='expander(".$row['IDNumber'].");' onMouseOut='shrinker(".$row['IDNumber'].");'>";}
The PHP works (I can get the images to appear, so the connection to SQL and such isn't a problem). I am sure most of the JavaScript is good, too, as I said I had it all working prior to dropping in the PHP.

Since I am not going from JavaScript to PHP I don't think I need AJAX. I just need the PHP to pass to JavaScript.

Any ideas?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
<script type = "text/javascript" language="javascript">
//<![CDATA[
var maxheight = 150;

var countShrink = 1;
function expander(RecordID){	
	var countGrow = 1;
		var pic = document.getElementById(RecordID);
		if(pic){
			var imageh = pic.height;
			var imagew = pic.width;

	if(imageh<100){
	countGrow++;
	imageh = imageh*1.2;
	imagew = imagew*1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){expander(RecordID);},2);}
	}
		else
			{alert("error on");}


}

function shrinker(RecordID){
			var pic = document.getElementById(RecordID);
		if(pic){var counter = 1
			var imageh = pic.height;
			var imagew = pic.width;

	if(imageh>20){
	imageh = imageh/1.2;
	imagew = imagew/1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){shrinker(RecordID);},3);}
	}
		else
			{alert("error off");}

	}
	
//]]>
</script>
</head>
<body>
<?php
include('menuSub.html');
require_once('connect.php');
$idnum = 'phmdv06tbu';
//$q="SELECT * FROM art WHERE IDNumber = '".$idnum."'";
$q="SELECT * FROM art ORDER BY IDNumber LIMIT 4";
$r = @mysqli_query ($dbc, $q);

echo "<div class='bodyContent'><div class='imageContent'>";
if($r){
	while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)){
echo "<img id='".$row['IDNumber']."' src=".$row['ImagePath']." width='5%' onMouseOver='expander(".$row['IDNumber'].");' onMouseOut='shrinker(".$row['IDNumber'].");'>";}
}
else{
echo '<div class="bodyContent"> Error<div>';
}
echo "</div></div>";
mysqli_close($dbc); ?>
</body>
</html>
pindi is offline   Reply With Quote
Old 09-09-2009, 05:07 AM   PM User | #2
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,172
Thanks: 59
Thanked 3,993 Times in 3,962 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
View the generated HTML in the browser (right click and then choose "View source..." or equivalent) and show us what the PHP is plopping in there.

You could probably improve your chances for success by *NOT* using echo to create the HTML. Thus:
Code:
...
    while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC))
    {
?>
<img id="<?=$row['IDNumber']?>" src="<?=$row['ImagePath']?>" width="5%"
      onMouseOver="expander(<?=$row['IDNumber']?>);"
      onMouseOut="shrinker(<?=$row['IDNumber']?>);">
<?php
    }
...
But I don't see anything obvious in the code as you have it, so DEBUG time. Doing a VIEW==>>SOURCE is almost always your best debug tool.



}
Old Pedant is offline   Reply With Quote
Old 09-09-2009, 03:08 PM   PM User | #3
pindi
New Coder

 
Join Date: Sep 2009
Posts: 16
Thanks: 3
Thanked 0 Times in 0 Posts
pindi is an unknown quantity at this point
Hi Old Pedant thanks for getting back to me so quickly. I'll give your suggestion a whirl just to cover my bases.

Here is the cut-and-paste of a test in the meantime. I've tried it with/without the brackets.

Using latest version of IE:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
<script type = "text/javascript" language="javascript"> 
//<![CDATA[
var maxheight = 150;
 
var countShrink = 1;
function expander(RecordID){	
	alert(RecordID);
	var countGrow = 1;
		var pic = document.getElementById(RecordID);
		if(pic){
			var imageh = pic.height;
			var imagew = pic.width;
 
	if(imageh<100){
	countGrow++;
	imageh = imageh*1.2;
	imagew = imagew*1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){expander(RecordID);},2);}
	}
		else
			{alert("error on");}
 
 
}
 
function shrinker(RecordID){
			var pic = document.getElementById(RecordID);
		if(pic){var counter = 1
			var imageh = pic.height;
			var imagew = pic.width;
 
	if(imageh>20){
	imageh = imageh/1.2;
	imagew = imagew/1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){shrinker(RecordID);},3);}
	}
		else
			{alert("error off");}
 
	}
	
//]]>
</script>
</head>
<body>
 
<script type="text/javascript"> 
//<![CDATA[
window.onload=starter;
function starter(){
	collapseMenu();
//	SetUpAnimation();
		}
 
function SetUpAnimation(){
 
	if (document.querySelectorAll)
		{
		labels = document.querySelectorAll('div.label');
			}
		else if (document.getElementsByClassName)
			{
		labels = document.getElementsByClassName('label');
		}
//loops through the labels
	if (labels){
				for (var i=1; i <= labels.length; i++)
					{	
						SlideIn(i);
					}
				}
}
	var endPos = 100;
	var currentPos = -150;
	var delayT = 1
	
function SlideIn(label_id_no){
	var label_id_fixed = label_id_no;
 
	var label_id_name = "label" + label_id_fixed;
	if (currentPos<endPos){
	currentPos +=1
	if (currentPos > 0) {delayT +=1;}
//	Math.round(delayT)
		document.getElementById(label_id_name).style.left = currentPos + "px";
		var timer = window.setTimeout(function(){SlideIn(label_id_no);}, delayT);
		
		
}
 
//need this otherwise the little blocks are off each other by 1 pixel
if (currentPos==endPos){
		document.getElementById(label_id_name).style.left = currentPos + "px";
		
		}
}
 
function collapseMenu(){
	var elems = null;
	var labels = null;
	if (document.querySelectorAll)
		{
		elems = document.querySelectorAll('div.elements');
		labels = document.querySelectorAll('div.label');
}
		else if (document.getElementsByClassName)
			{			
		elems = document.getElementsByClassName('elements');
		labels = document.getElementsByClassName('label');
			}
if (elems){
				for (var i=0; i < elems.length; i++)
				{
				elems[i].style.display="none";
				}
			for (var i=0; i < labels.length; i++)
				{
			labels[i].onclick=showBlock;
				}
		}
}
 
function showBlock(evnt){
	var theEvent = evnt ? evnt : window.event;
	var theSrc = theEvent.target ? theEvent.target: theEvent.srcElement;
	var itemId = "elements" + theSrc.id.substr(5,1);
	var item = document.getElementById(itemId);
	if (item.style.display=='none'){
		item.style.display='block';
	}else{
		item.style.display='none';
	}
}
//]]>
</script>
</head>
<body><div class="label" id="label1">home</div>
<div class="label" id="label2">portfolios</div>
<div class="elements" id="elements2">
<p>metallic c-prints</p><br />
<p>product photography</p><br />
<p>faces<br />
</div>
<div class="label" id="label3">about me</div>
<div class="elements" id="elements3">
<p>biography</p><br />
<p>c.v.</p><br />
<p>contact</p><br />
</div>
</body>
<div class='bodyContent'><div class='imageContent'><img id='paaex05tad' src=images/ArcticDream.jpg width='5%' onMouseOver='expander(paaex05tad);' onMouseOut='shrinker(paaex05tad);'><img id='paanu02tpp' src=images/PortraitOfP.jpg width='5%' onMouseOver='expander(paanu02tpp);' onMouseOut='shrinker(paanu02tpp);'><img id='paapo00trb' src=images/RedBanting.jpg width='5%' onMouseOver='expander(paapo00trb);' onMouseOut='shrinker(paapo00trb);'><img id='paapo02tbb' src=images/BlueBanting.jpg width='5%' onMouseOver='expander(paapo02tbb);' onMouseOut='shrinker(paapo02tbb);'></div></div></body>
</html>
Last edited by pindi; 09-09-2009 at 03:13 PM..
pindi is offline   Reply With Quote
Old 09-09-2009, 03:14 PM   PM User | #4
pindi
New Coder

 
Join Date: Sep 2009
Posts: 16
Thanks: 3
Thanked 0 Times in 0 Posts
pindi is an unknown quantity at this point
Hi, just as a quick note, I made the change (not using echo and closing off the PHP brackets etc) and it does the same thing. Anyway, I'll leave it as you suggested because you're right: It might eliminate unforseen problems either now or down the road.
Thanks and just thought you should know.
jpindi
pindi is offline   Reply With Quote
Old 09-09-2009, 04:42 PM   PM User | #5
pindi
New Coder

 
Join Date: Sep 2009
Posts: 16
Thanks: 3
Thanked 0 Times in 0 Posts
pindi is an unknown quantity at this point
Ok I got it fixed. The problem was it didn't like what I was doing with the quotation marks for the onMouseOver and onMouseOut events.

I added single quotation marks in the function brackets and voila all ok. I have to tweak what the JavaScript actually does, but at least this part is squared away.

Here is the code

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
<script type = "text/javascript" language="javascript">
//<![CDATA[
var maxheight = 150;

var countShrink = 1;
function expander(RecordID){	

	var countGrow = 1;
		var pic = document.getElementById(RecordID);
		if(pic){
			var imageh = pic.height;
			var imagew = pic.width;

	if(imageh<100){
	countGrow++;
	imageh = imageh*1.2;
	imagew = imagew*1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){expander(RecordID);},2);}
	}
		else
			{alert("error on");}


}

function shrinker(RecordID){
			var pic = document.getElementById(RecordID);
		if(pic){var counter = 1
			var imageh = pic.height;
			var imagew = pic.width;

	if(imageh>20){
	imageh = imageh/1.2;
	imagew = imagew/1.2;
	pic.style.height = imageh + "px";
	pic.style.width = imagew + "px";
	var timer = window.setTimeout(function(){shrinker(RecordID);},3);}
	}
		else
			{alert("error off");}

	}
	
//]]>
</script>
</head>
<body>
<?php
include('menuSub.html');
require_once('connect.php');
$idnum = 'phmdv06tbu';
//$q="SELECT * FROM art WHERE IDNumber = '".$idnum."'";
$q="SELECT * FROM art ORDER BY IDNumber LIMIT 4";
$r = @mysqli_query ($dbc, $q);

echo "<div class='bodyContent'><div class='imageContent'>";
if($r){
	while ($row = mysqli_fetch_array($r,MYSQLI_ASSOC)){
?>
<img id= "<?=$row['IDNumber']?>" src="<?=$row['ImagePath']?>" width="5%" onMouseOver="expander('<?=$row['IDNumber']?>');" onMouseOut="shrinker('<?=$row['IDNumber']?>');">
<?php
	}
}

else{
echo '<div class="bodyContent"> Error<div>';
}
echo "</div></div>";
mysqli_close($dbc); ?>
</body>
</html>
pindi is offline   Reply With Quote
Old 09-09-2009, 08:57 PM   PM User | #6
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,172
Thanks: 59
Thanked 3,993 Times in 3,962 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
DOH on me. I should have noticed the missing apostrophes in my own code.

Sorry.
Old Pedant is offline   Reply With Quote
Reply

Bookmarks

Tags
function, javascript, pass, php, variable

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 09:59 AM.
Advertisement
Log in to turn off these ads.