Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,963
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    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.



    }

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Sep 2009
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #5
    New Coder
    Join Date
    Sep 2009
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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>

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,963
    Thanks
    79
    Thanked 4,426 Times in 4,391 Posts
    DOH on me. I should have noticed the missing apostrophes in my own code.

    Sorry.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •