Page 1 of 1

Passing JavaScript variables to PHP

Posted: Sat Jan 22, 2011 9:48 am
by db579
Hi, I have a JavaScript code that sets the variable 'arrow' whenever one of the side arrows is pressed like so:

Code: Select all


<script type="text/javascript">

window.document.onkeyup = getKey; //set event handler

function getKey(e) {
  // Store value of key pressed (cross-browser)
  var key = e ? e.which : window.event.keyCode;

if (key == 39){
var arrow = "right";
}
else if (key == 37){
var arrow = "left";
}
alert(arrow);

}
</script>

and I have a PHP script that displays a photo gallery. The photos are stored in an array and called using the $keyid variable. I have a next and previous button which increments the keyid so that the next picture is selected and I was hoping to be able to add the same functionality for when the keyboard arrows are pressed using the JavaScript code (I know that part of the page will need to be reloaded but that's fine). Everything works at the moment but I can't work out how to pass the JavaScript variable into the PHP function without using GET or POST in some way. This is my PHP:

Code: Select all

<?php
function displayPhotos(){
	global $columns,$dir,$album, $max_height, $max_width;

	generateThumbnails();
	$act = 0;
	$keyid = (isset($_GET['keyid']) ? $_GET['keyid']:'0');

	$Picturecount = (count(glob("" . $dir . "*.jpg")))/2;
	
	$thumb_selected = (isset($_GET['thumb']) ? $_GET['thumb']:'');

	$picture_array = glob("$dir*");

	if ($thumb_selected !=""){
				//Process file name
			
				$dirName  = substr($thumb_selected,0,strpos($thumb_selected,basename($thumb_selected)));
				
	      			$thumbName = basename($thumb_selected);
				
				$thumbFile = $dirName.$thumbName;

				$selected = str_replace('_th.jpg','.jpg',$thumbFile);

        foreach ($picture_array as $search){
	$keyid = array_search($selected,$picture_array);
	$large = $picture_array[$keyid];
	}
	}

	else{	
	if($keyid > (2*$Picturecount-1)){
	$keyid = ($keyid - (2*$Picturecount));
	}
	if($keyid < 0){
	$keyid = (2*$Picturecount+$keyid);
	}

	$large = $picture_array[$keyid];
	}

	$picturenumber = ($keyid/2)+1;

	echo "<table border='0' width='100%'> 
	<tr align='right'><td align='left' colspan='2'>$picturenumber of $Picturecount</td></tr>

        <tr><td><a href='?album=$album&keyid=" . ($keyid-2) . "'><img src='/gallery/icons/arrow-blue-rounded-left.jpg' alt='Previous'></a></td>";

	list($width, $height) = getimagesize($large);

	if($width > '550'){
	imagejpeg(resizeImage($large,$max_width,$max_height),$large,100);
	echo "
	<td colspan='3' height='300' width='550' align='center'><a href='?album=$album&keyid=" . ($keyid+2) . "'><img src='$large' alt=''></a></td>";
	}

	else if($height > '300' && $width < '550'){
	echo "
	<td colspan='3' height='$height' width='550' align='center'><a href='?album=$album&keyid=" . ($keyid+2) . "'><img src='$large' alt=''></a></td>";
	}
	else if($height > '300' && $width = '550'){
	echo "
	<td colspan='3' height='$height' width='550' align='center'><a href='?album=$album&keyid=" . ($keyid+2) . "'><img src='$large' alt=''></a></td>";
	}

	else{
	echo "
	<td colspan='3' height='300' width='550' align='center'><a href='?album=$album&keyid=" . ($keyid+2) . "'><img src='$large' alt=''></a></td>";
	}
	
	echo "<td><a href='?album=$album&keyid=" . ($keyid+2) . "'><img src='/gallery/icons/arrow-blue-rounded-right.jpg' alt='Next'></a></td></tr><tr><td>&nbsp;</td></tr><tr><td>&nbsp;</td></tr></table><table border='0' align='center' width='90%'>";
?>
	
Thanks very much for any help!

Re: Passing JavaScript variables to PHP

Posted: Sat Jan 22, 2011 10:02 am
by Neilos
Why don't you want to use POST?

Re: Passing JavaScript variables to PHP

Posted: Sat Jan 22, 2011 10:05 am
by Neilos
However, some AJAX script would make this a much better user experience rather than reloading.
db579 wrote:I know that part of the page will need to be reloaded
Well, all of it will need to be reloaded, unless it's in an iframe I suppose.

Re: Passing JavaScript variables to PHP

Posted: Sat Jan 22, 2011 10:09 am
by db579
Sorry this might not have been very clear, the page uses quite a lot of PHP includes which is why I didn't want to use post/why only that part of the page would be reloaded

Re: Passing JavaScript variables to PHP

Posted: Sat Jan 22, 2011 10:55 am
by Neilos
Ok, well as always there is 1001 ways to do what you want but the problem is finding the best one for you.

The problem with going from JavaScript to php is that one runs client side and one runs server side, so, in my opinion, going between the two is a remarkably inefficient way of accomplishing things.

If you don't want to use POST or GET then what I would do is dump all the possible photos in an album to the browser and use JavaScript to display them. This doesn't just mean dumping all the images as, obviously, this would create a large amount of unneeded overhead, but maybe some unique identifier that can be stored in an array, then use JavaScript to display the image based on the identifier.

Re: Passing JavaScript variables to PHP

Posted: Sat Jan 22, 2011 11:01 am
by JureVI
Since PHP is executed on the server and JavaScript on the client side, you have to send data from client to the server somehow, either with GET or with POST, so it can be processed by PHP. That could be done with AJAX.
Your code is not well designed, you should use MVC (your code contains parts from both, a controller and a view, but should actually be separated). You should separate the code, put the logic in controllers and the HTML part in a view. This way you could make an AJAX request from JS to the URL (with the variable value you need in PHP), process the request in controller and return HTML, which you would use to update only a part of a page.

Re: Passing JavaScript variables to PHP

Posted: Sat Jan 22, 2011 11:09 am
by db579
Yeah my problem is I don't know a whole lot of javascript/ajax so was trying to keep this in php as much as possible (but as far as I'm aware there is no way to trigger php functions using key presses directly?). Is there an easy way to do this with ajax? I'm not really sure what is meant with separating the code into controllers and views?

Re: Passing JavaScript variables to PHP

Posted: Sat Jan 22, 2011 11:38 am
by JureVI
db579 wrote:Yeah my problem is I don't know a whole lot of javascript/ajax so was trying to keep this in php as much as possible (but as far as I'm aware there is no way to trigger php functions using key presses directly?). Is there an easy way to do this with ajax? I'm not really sure what is meant with separating the code into controllers and views?
No, there's no direct way, you have to make an HTTP request (GET or POST) to the server.
For JavaScript I use jQuery library, which also provides functionality to make AJAX requests. You could make an AJAX request to the URL, which would output the HTML for the next page of photos, and use this HTML to replace currently displayed photos.
It's difficult to fully answer to your questions, but I hope this will give you some ideas. For the MVC (model-view-controller), try to google it.

Re: Passing JavaScript variables to PHP

Posted: Sat Jan 22, 2011 12:07 pm
by Neilos
I don't think that php is the best way to accomplish what you want. AJAX would be best, but you may find some people who don't have JavaScript enabled, this may cause problems. Perl anyone? lol

There are tons of AJAX album viewer tutorials for you to get your teeth into.
db579 wrote:Yeah my problem is I don't know a whole lot of javascript/ajax
What better reason to try some out then?