Pass PHP variable to a JavaScript function

[jfarny]

Hello,

I am currently developing a review site that requires displaying video reviews. I have created a PHP page that successfully retrieves all records from my video database called reviews.php. I have also created a page that a user gets redirected to when he/she selects a video entitled watch.php.

The problem I'm having is that my PHP query result that I store as a variable does not seem to work as a parameter for my JavaScript redirect function, which is defined at the top of reviews.php. I have provided 2 section of code, the first being my reviews.php page and the second being my watch.php page.

I have included both pages in their entirety in case my problem lies elsewhere but lines of interest are on the reviews.php script: lines 7-23 and 175-183 and the watch.php script lines 45-55.

reviews.php: 7-23 and 175-183

<?php
//You must start the session before information is sent to the browser!
session_start();
include('layouts/header.php');	
?>	

<script language="JavaScript">
<!-- //JavaScript cloak

function getVideo($video) {
	
	<?php
		//$video = "http://localhost/~jfarny/gamePlay/0_introCredits.flv";
		$_SESSION['currentVideo'] = $video;
	?>
	
	//Set the url
	var url = "http://localhost/~jfarny/watch.php"
	window.location = url;
}  

//-->
</script>

	<div id="outer">

		<div id="mainWrapper">
		
			<div id="home"><a href="index.php"></a></div>
		
			<ul class="mainNav">
				<li><a class="current" href="reviews.php" onMouseOver="setMenu('subNav')" onMouseOut="clearMenu('subNav')">Reviews ↪</a></li>
				<li><a href="forums.php">Forums</a></li>
				<li><a href="blogs/">Blogs</a></li>
				<li><a href="about.php">About</a></li>
			</ul>
			
			<div id="subNav" onMouseOver="setMenu('subNav')" onMouseOut="clearMenu('subNav')">
				
				<ul>
					<li><a href="allReviews.php">All</a></li>
					<li><a href="ps3Reviews.php">Playstation 3</a></li>
					<li><a href="xboxReviews.php">Xbox 360</a></li>
					<li><a href=pcReviews.php">Windows PC</a></li>
				</ul>
				
			</div> <!-- subNav -->
			
			<div class="searchBar">
			<p>searchBar</p>
			</div> <!-- searchBar -->
			
		</div> <!-- mainWrapper -->
			
		<div id="contentWrapper">
			
			<div class="mainContent">
				
				<div class="breadCrumbs">
				<p>Reviews &rarr;</p>
				</div> <!-- breadCrumbs -->
				
				<!--<form action="results.php" method="post">
					<p>Select a platform</p>
					<select name="searchtype">
						<option value="All">All</option>
						<option value="ps3">Playstation 3</option>
						<option value="xbox360">Xbox 360</option>
						<option value="pc">PC</option>
					</select>
					<br/>
				
				</form>-->
				
				<?php
				
					require_once ("../dbConnect.php");
					
					// Number of records to display per page:
					$display = 5;
					
					// Determine the number of pages to show
					if (isset($_GET['p']) && is_numeric($_GET['p'])) {
						
						// If its already been determined...
						$pages = $_GET['p'];
						
					} else {
					
						// If it hasn't...
						$q = "SELECT COUNT(vId) FROM videos";
						$r = @mysqli_query ($dbc, $q);
						
						$row = @mysqli_fetch_array ($r, MYSQLI_NUM);
						$records = $row[0];
						
					
					
						// Calculate the number of pages...
						if ($records > $display) {
						
							// If the number of videos is too great to display on one page
							$pages = ceil( $records/$display );
						
						} else {
					
							$pages = 1;
					
						}
					
					}  // End of the pages conditional
					
					// Determine where in the database to start displaying results
					if(isset($_GET['s']) && is_numeric($_GET['s'])) {
						$start = $_GET['s'];
					} else {
						$start = 0;
					}
					
					// Define the sorting variable
					$sort = (isset($_GET['sort'])) ? $_GET['sort'] : 'phpDate';
					
					// Determine the sorting order
					switch ($sort) {
						
						case 'pt':
							$orderBy = 'platform ASC';
							break;
							
						case 'mp':
							$orderBy = 'maxPrice DESC';
							break;
							
						case 'sc':
							$orderBy = 'score ASC';
							break;
							
						case 'phpDate':
							$orderBy = 'phpDate ASC';
							break;
							
						default:
							$orderBy = 'phpDate ASC';
							$sort = 'phpDate';
							break;
					}
					
					// Make the Query
					$q = "SELECT score, pic, title, platform, videoUrl, maxPrice, description, DATE_FORMAT(dateAdded, '%D %M %Y') AS phpDate FROM videos ORDER BY $orderBy LIMIT $start, $display";
					$r = @mysqli_query ($dbc, $q);
					
					// Table Header
					
					echo '<table align="left" cellspacing ="0" cellpadding="0" width="619px" style="table-layout:fixed">
					<col width=100px>
					<tr class="reviewsHeader">
						<td align="left"><p class="p4"></p></td>
						<td align="left"><p class="p4"></p></td>
						<td align="center"><p class="trHeaderLink"><a href="reviews.php?sort=pt">Platform</a></p></td>
						<td align="center"><p class="trHeaderLink"><a href="reviews.php?sort=mp">Price</a></p></td>
						<td align="center"><p class="trHeaderLink"><a href="reviews.php?sort=sc">Score</a></p></td>
						<td align="center"><p class="trHeaderLink"><a href="reviews.php?sort=phpdte">Date Added</a></p></td>
					</tr>
					';
					
					// Fetch and print all the records
					
					// Set the initial background color
					$background = '#eeeeee';
					
					while ($row = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
						
						$background = ($background == '#eeeeee' ? '#ffffff' : '#eeeeee');
					
						echo '<tr class="reviews" bgcolor="' .$background. '">
							<td align="left"><img src=' . $row['pic'] . ' alt="VIDEO PIC" /></td>
							<td align="left"><p class="titleLink"><a href=javascript:getVideo('. $row['videoUrl'] . ')>' . $row['title'] . '</a></p></td>
							<td align="center"><p>' . $row['platform'] . '</p></td>
							<td align="center"><p>$' . $row['maxPrice'] . '</p></td>
							<td align="center"><p>' . $row['score'] . '</p></td>
							<td align="center"><p>' . $row['phpDate'] . '</p></td>
						</tr>
						';
					
					} // End of while loop
					
					echo '</table>';
					
					mysqli_free_result ($r);
					mysqli_close($dbc);
					
					
					// Make links to other pages if necessary
					if ($pages > 1) {
					
						// Add some spacing and start a paragraph:
						echo '<br /> <p class="p3">';
						
						// Determine what page the script is on:
						$currentPage = ($start/$display) + 1;
						
						// If not the first page, make a previous button:
						if ($currentPage != 1) {
							echo '<a href="reviews.php?s=' . ($start - $display) . '&p=' . $pages . '$sort=' . $sort . '">Previous</a> ';
						}
						
						// Make all the numbered pages:
						
						for ($i = 1; $i <= $pages; $i++) {

							if ($i != $currentPage) {
						 		echo '<a href="reviews.php?s=' . (($display * ( $i-1))) . '&p=' . $pages . '$sort=' . $sort . '">' . $i . '</a> ';
							} else {
								echo $i . ' ';
							}
							
						} // End of FOR Loop
						
						// If it's not the last page make a next button:
						 if ($currentPage != $pages) {
						 	echo '<a href="reviews.php?s=' . ($start + $display) . '&p=' . $pages . '$sort=' . $sort . '">Next</a>';
						 }
						 
						 echo '</p>'; // Close the paragraph
												
					} // End of Links section
					
				?>
				
				<div class="breadCrumbs">
				<p>Reviews &rarr;</p>
				</div> <!-- breadCrumbs -->
			
				
			</div> <!-- mainContent -->

		</div> <!-- contentWrapper -->
		
<?php include('layouts/footer.php')?>

watch.php: 45-55

<?php
//You must start the session before information is sent to the browser!
session_start();
include('layouts/header.php');	
?>		

	<div id="outer">
		
		<div id="mainWrapper">
		
			<div id="home"><a href="index.php"></a></div>
			
			<ul class="mainNav">
				<li><a class="current" href="reviews.php" onMouseOver="setMenu('subNav')" onMouseOut="clearMenu('subNav')">Reviews ↪</a></li>
				<li><a href="forums.php">Forums</a></li>
				<li><a href="blogs/">Blogs</a></li>
				<li><a href="about.php">About</a></li>
			</ul>
			
			<div id="subNav" onMouseOver="setMenu('subNav')" onMouseOut="clearMenu('subNav')">
				
				<ul>
					<li><a href="allReviews.php">All</a></li>
					<li><a href="ps3Reviews.php">Playstation 3</a></li>
					<li><a href="xboxReviews.php">Xbox 360</a></li>
					<li><a href=pcReviews.php">Windows PC</a></li>
				</ul>
				
			</div> <!-- subNav -->
			
			<div class="searchBar">
			<p>searchBar</p>
			</div> <!-- searchBar -->
			
		</div> <!-- mainWrapper -->
			
		<div id="contentWrapper">
			
			<div class="mainContent">
				
				<div class="breadCrumbs">
				<p>Reviews &rarr; Watch &rarr;</p>
				</div> <!-- breadCrumbs -->

				<div class="videoPlayer">
					
					<?php
						$video = $_SESSION['currentVideo'];
						echo $video;
					
						echo '<a href= "' . $_SESSION['currentVideo'] . '"  
			 			style="display:block; width:619px; height:350px"  
			 			id="player"> 
						</a>';
					?>
					
				</div> <!-- videoPlayer -->
				
				<script>
					flowplayer("player", "flowplayer-3.2.2.swf");
				</script>
				
			</div> <!-- mainContent -->

		</div> <!-- contentWrapper -->
		
<?php include('layouts/footer.php')?>

Thanks in advance for any advice/solutions!

[cpu278]

Not sure I fully understand, but you are trying to store the video into a session variable using PHP. PHP only executes in server side, but you are trying to store it using Javascript. Try storing the session variable in lines 7-23 using Javascript instead.

[jfarny]

Not sure I fully understand, but you are trying to store the video into a session variable using PHP. PHP only executes in server side, but you are trying to store it using Javascript. Try storing the session variable in lines 7-23 using Javascript instead.

Sorry, I will try to be more specific. I have a video database that contains a table with a column for storing video urls that point to where I have my videos stored on the server. What I am trying to do with my getVideo($video) function is take a sql result (stored as a PHP variable) and pass it in as the $video parameter for my JavaScript function.

I have changed my code for lines 7-23 on the review.php script to look like this:

function getVideo($video) {
		
		//$video = "http://localhost/~jfarny/gamePlay/0_introCredits.flv";
		$_SESSION['currentVideo'] = $video;
	
	//Set the url
	var url = "http://localhost/~jfarny/watch.php"
	window.location = url;
}

I have removed the PHP from inside my JavaScript function and attempt to use JavaScript to store a session variable with the value of the $video parameter passed in from the PHP sql result variable.

If this isn't what you meant, please elaborate on your reply. Either way, the section of code I posted above did not work and I get the same problem. To be more specific, when I try to click on the link that calls the function I stay on the reviews.php page and do not get redirected.

[diafol]

function getVideo($video) {
 
	<?php
		//$video = "http://localhost/~jfarny/gamePlay/0_introCredits.flv";
		$_SESSION['currentVideo'] = $video;
	?>
 
	//Set the url
	var url = "http://localhost/~jfarny/watch.php"
	window.location = url;
}

There is nothing to be gained by putting this php statement into a js function.
Here's the thing:

php is finished by the time it leaves the server. That is, once the page reaches your browser it's pure html and javascript. The server doesn't acknowledge js as it's client-side (browser stuff).

The only time you'd mix js and php is if you want to place a php-derived value into js. You can't run any php from js. For this you need Ajax.

Okay, let's run through it:

getVideo($video)

You've placed a php-type parameter into the function - bad move. The '$' sign is used for specific purposes in JS - especially JS frameworks like jQuery and Prototype - don't use it! Use the syntax below:

getVideo(video)

As mentioned:

$_SESSION['currentVideo'] = $video;

Cannot process $video as it $video doesn't exist on the server - remember php is done and dusted BEFORE js is run.

Here's what I suggest - forget the JS - just use php:

echo '...

<td align="left"><p class="titleLink"><a href="watch.php?v=' . $row['id'] . '">' . $row['title'] . '</a></p></td> 

...';

Your videos table must have an id (usually an autoincrement/primary key field), right? So use this as the identifier passed to the watch.php page.

Then at the head of the watch.php page:

if(isset($_GET['v'])){
   $id = $_GET['v'];
   ...do rest of DB pulling for video...
}

You don't even need sessions for this bit.

[Schoorsteen]

<script type="text/javascript">
function getVideo(video) {
  
	//Set the url
	var url = "http://localhost/~jfarny/watch.php"
	window.location = url;
}
	<?php
		//$video = "http://localhost/~jfarny/gamePlay/0_introCredits.flv";
		$_SESSION['currentVideo'] = $video;
	?>
getVideo(<?php echo $_SESSION['currentVideo']; ?>);
</script>

This way you run the javascript function with the value the session contains. Perhaps this is what you are looking for? However, the suggestion ardav made is prolly better anyway.

[jfarny]

function getVideo($video) {
 
	<?php
		//$video = "http://localhost/~jfarny/gamePlay/0_introCredits.flv";
		$_SESSION['currentVideo'] = $video;
	?>
 
	//Set the url
	var url = "http://localhost/~jfarny/watch.php"
	window.location = url;
}

There is nothing to be gained by putting this php statement into a js function.
Here's the thing:

php is finished by the time it leaves the server. That is, once the page reaches your browser it's pure html and javascript. The server doesn't acknowledge js as it's client-side (browser stuff).

The only time you'd mix js and php is if you want to place a php-derived value into js. You can't run any php from js. For this you need Ajax.

Okay, let's run through it:

getVideo($video)

You've placed a php-type parameter into the function - bad move. The '$' sign is used for specific purposes in JS - especially JS frameworks like jQuery and Prototype - don't use it! Use the syntax below:

getVideo(video)

As mentioned:

$_SESSION['currentVideo'] = $video;

Cannot process $video as it $video doesn't exist on the server - remember php is done and dusted BEFORE js is run.

Here's what I suggest - forget the JS - just use php:

echo '...

<td align="left"><p class="titleLink"><a href="watch.php?v=' . $row['id'] . '">' . $row['title'] . '</a></p></td> 

...';

Your videos table must have an id (usually an autoincrement/primary key field), right? So use this as the identifier passed to the watch.php page.

Then at the head of the watch.php page:

if(isset($_GET['v'])){
   $id = $_GET['v'];
   ...do rest of DB pulling for video...
}

You don't even need sessions for this bit.

Thank you very much for clearing up this issue for me Ardav. Your explanation was very detailed and concise. Best of all, my code now works!

I have included the functional code below:

reviews.php

<td align="left"><p class="titleLink"><a href="watch.php?v=' . $row['vId'] . '">' . $row['title'] . '</a></p></td>

watch.php

if (isset($_GET['v'])) {
							
							$vId = $_GET['v'];
							
							$q = "SELECT videoUrl FROM videos WHERE vId = $vId";
							$r = @mysqli_query ($dbc, $q);
							
							while ($video = mysqli_fetch_array($r, MYSQLI_ASSOC)) {
								$currentVideo = $video['videoUrl'];
							}
							
							echo '<a href=' . $currentVideo . ' style="display:block; width:619px; height:350px;" id="player"></a>';
							
							mysqli_free_result ($r);
							mysqli_close($dbc);
						}

Again, thanks to everyone for their advice. I appreciate it.