Php and javascript problem

PHP
1

Please help me with this. I have been trying for hours, with all permuations and I cannot see what is wrong with this code.

I have hardcoded values to the variables image_step and $slideshow_key but they are normally dynamically assigned ( this bit works ). The usage of image_step in the assignment of cur_image_desc is not working.

<script type=“text/javascript”>

var image_step = 3;

<?php $slideshow_key = ‘gallery’; ?>

var image_name = “image_<?php echo $slideshow_key . '”'; ?>;

var cur_image_desc = image_desc_<?php echo $slideshow_key . ‘_’; ?> + image_step;

document.getElementById(“<?php echo ‘p_id_’ . $slideshow_key; ?>”).innerHTML = cur_image_desc;

</script>

Thanks,

Steve

2

Nice to know it has a name, I just called it “Echoing Javascript code.”

3

so from what i see… you are… trying to tack a 3 on the end of a description. + is javascript’s string concatenation character when the left side of the binary is a string.

What precisely are you ACTUALLY trying to do?

4

PHP is used to process data in the server and output it to the browser. In your example you’re trying to use PHP as if it were JS. You need to use PHP to set up and output all the JS codes you’ll need. for example…


<script type="text/javascript"> 
<?php
$image_step = 3; 
$slideshow_key = 'gallery'; 
// PHP outputs the JS codes 
echo "var image_step = ".$image_step."; \
"; 
echo "var image_name = '".$slideshow_key."'; \
"; 
echo "var image_desc = 'image_desc_".$slideshow_key."_".$image_step."'; \
";  
echo "document.getElementById( 'p_id_".$slideshow_key."' ).innerHTML = image_desc; \
"; 
?>
</script>

Didn’t test it, but that’s the idea.
Basically the idea is to have PHP write the code for you.
Look at the source code of the page and see if looks good.

5

The 3 is just an example. This piece of code is in a loop and the 3 is like a subscript but tagged onto the end of a variable name. These variables are assigned from a php array that holds descriptions in another part of the code. Somebody said that I couldn’t assign a php array to a javascript array. I am trying to assign descriptions to sliding images. I have the sliding images working but what should be the simple part is proving not to be so.

6 

echo 'var myArray = new Array("'.implode('","',$array).'");'

One-liner suffice as an example?

7

well someone lied to you about not being able to make a javascript array from a php array. You certainly can, it’s not something you can simply -assign-, but you can certainly output a PHP array into javascript.

8

Thanks, I see the idea. I must admit that my code looks a mess at the moment; I’ve hacked it around so much to try and get it working.
However, the problem persists. The variable ‘image_step’ cannot be a php variable ( so I’ve been led to believe ). It is set by a javascript loop that is invoked when a timer expires, hence the mongrel syntax.

9

Thanks, I suspected as much, and now I will experiment down this road. There are lots of examples on the internet where a php array is being assigned to individual javascript variables. It must set a lot of people off on the wrong track!

10

As there are lots of examples, can you please link us to one or two of them?

11

Ahh yes, faking the whole JSON thing. Using the native conversion can work out much better, using resources such as json_encode which is native to 5.2.0, or if you’re using less than that you can get it from [url=http://pecl.php.net/package/json]PECL :: Package :: json

12

This is the only one I kept: Creating an image slide show (Two parts)

It is pure Javascript with no php but it uses individual variables rather than an array. There were others doing similar things that took data from php arrays and converted them to individual Javascript variables.

Somebody’s just sent me a one-liner that I will need to digest.

Thanks,

Steve

13

There’s a website dedicated to it, providing cross-compatible code across a wide variety of languages.

JSON

It even has nice railroad diagrams of the code structure.

14

would be helpful if we could have a look at the rest of the code. There’s no way to call PHP within a Javascript loop. PHP only gets fired once as the page loads from top to bottom and wont get fired over and over again from inside a JS loop.

You have to setup all the variables required for your script ahead of time.

15

Apart from Ajax you mean?

16

Apart from Ajax you mean?

Well, there’s no PHP involved in the Javascript part of AJAX.
I mean something like… <?php echo time(); ?> inside a for() loop for example.

17

That’s right. The only way to involve PHP from JavaScript is by using Ajax to get a response from a PHP script, and to then use a callback event to continue on with the Javascript code.

Because PHP runs on the server-side and JavaScript on the client-side - it’s just not possible to intermingle the two languages together.

18

AJAX would be the way to get client-time responses from PHP, yes.

I mean something like… <?php echo time(); ?> inside a for() loop for example.

You could do that. You’d get the same value every time because it’d be a hardcoded integer, but you could do it.

19

Okay here goes:

<?php

/*

UT503_GALLERY_SLIDE.INC.php

Author: Steve O'Brien Apr 2011

V1.1 Original

Display Gallery as a slideshow.

This script is to display a series of images as a scrolling slideshow.
The images are clumped together in a gallery.
A gallery can have parameters for image sizes and cycle speed etc.
a gallery can also be referenced by a slideshow that also has the same parameters.
In this instance the parameters from the slideshow will override.
There are also default parameters.

$slideshow_key is a unique parameter for each set of images.
This parameter is tagged onto each element to make it unique.
This has to be done because this script can be called more than once from the same page.

*/

if ( !isset($slideshow_key) or $slideshow_key == '' )	{

	$slideshow_key = 'gallery';

}	

// Get gallery images - invokes a MySql cursor

include 'UT250_FILE_DETAILS.INC.PHP'; // Get files related to gallery

$img_number = 0;

$file_idx = 0;

$image_size = array();

while ( $file_idx &lt; $inc_file_count ) {

	
	/*
		Reads details of each image into a php array

	*/
	
	$fupl_id 	= $inc_fupl_id[$file_idx];
	$filename 	= $inc_filename[$file_idx];
	$media_name 	= $inc_filename[$file_idx];
	$file_desc 	= $inc_file_desc[$file_idx];
	$file_type 	= $inc_file_type[$file_idx];
	$thumbnail 	= $inc_thumbnail_id[$file_idx];
	$file_img_x 	= $inc_img_x[$file_idx];
	$file_img_y 	= $inc_img_y[$file_idx];


	/*
		This function returns the actual size for each image based upon supplied
		required sizes whilst maintaining the correct aspect ratio.
		the parameters are: filename, height, width, maximum size.

	*/

	$image_size = image_size ( 	$inc_filename[$file_idx],
					$img_y,
					$img_x,
					$img_x );

	$height[$file_idx] = $image_size[1];

	$width[$file_idx] = $image_size[0];


	$file_idx = $file_idx + 1;

}

?>

<script type=“text/javascript”>

&lt;?php

	$image_indx = 0;

	$image_name = 'image_' . $slideshow_key;

	while ( $image_indx &lt; $inc_file_count ) {

		/*

			This loop cycles through the php array and sets up separate Javascript
			variables for each. It can eventually be combined with the preceding loop.

		*/

		$image_instance = $image_name . '_' . $image_indx;

		echo ' var ' . $image_instance . ' = new Image(); ';

		echo $image_instance . '.src = "' . $inc_filename[$image_indx] . '";';

		echo $image_instance . '.width = "' . $width[$image_indx] . '";';
		echo $image_instance . '.height = "' . $height[$image_indx] . '";';

		echo ' var image_desc_' . $slideshow_key . '_' . $image_indx . ' = "' . $inc_file_desc[$image_indx] . '";';

		$image_indx = $image_indx + 1;

	}			


	echo ' var image_name; ';

	// Get image display string

	$alt 	= '';

?&gt;

</script>

&lt;?php


	if ( $show_image_desc == 'Y' )	{

		echo '&lt;p id=p_id_' . $slideshow_key . '&gt;' . $file_desc . '&lt;/p&gt;';

	}


	/*

		Gets and displays the first image

	*/

	$image_display = display_named_image (	$inc_filename[0],
						$image_name,
						$align,
						$img_y,
						$img_x,
						$alt,
						$img_x );


	echo $image_display;

	$image_indx = 0;


?&gt;

<script type=“text/javascript”>

<?php

/*

	Sets up various unique Javascript variables.

*/

echo 'var file_count_' . $slideshow_key . ' = ' . $inc_file_count . ' - 2; ';

echo 'var step_' . $slideshow_key . ' = 0; ';

echo 'var p_id_' . $slideshow_key  . ' = 0; ';

echo 'var show_image_desc_' . $slideshow_key  . ' = "' . $show_image_desc . '"; ';

$function_slide = 'slide_' . $slideshow_key . '()';

?>

<?php echo 'function ’ . $function_slide; ?> {

// Cycles through the images to replacing the previous image whenever the unique timer expires.
// Things that are replaced are: image, image sizes - working. Conditional description - not working.

//if browser does not support the image object, exit.

if (!document.images)	{

	return;

			}

var image_step = step_&lt;?php echo $slideshow_key; ?&gt;; 

var image_name = "image_&lt;?php echo $slideshow_key . '"'; ?&gt;; 

document.images.&lt;?php echo $image_name; ?&gt;.src=eval(image_name + "_" + &lt;?php echo 'image_step'; ?&gt; + ".src");

document.images.&lt;?php echo $image_name; ?&gt;.width=eval(image_name + "_" + &lt;?php echo 'image_step'; ?&gt; + ".width");

document.images.&lt;?php echo $image_name; ?&gt;.height=eval(image_name + "_" + &lt;?php echo 'image_step'; ?&gt; + ".height");


if ( show_image_desc_&lt;?php echo $slideshow_key; ?&gt; == "Y" )	{

	// And this is the section that doesn't work. It does when I hardcode the value of image_step
	// but not when I reference it. image_step is correctly set up because it works in the previous section
	// to replace the images.

	//var cur_image_desc = image_desc_&lt;?php echo $slideshow_key; ?&gt; + "_1";   	

	var cur_image_desc = image_desc_&lt;?php echo $slideshow_key . '_'; ?&gt; + image_step;   	

	document.getElementById("&lt;?php echo 'p_id_' . $slideshow_key; ?&gt;").innerHTML = cur_image_desc;

}

if ( step_&lt;?php echo $slideshow_key; ?&gt; &lt;= file_count_&lt;?php echo $slideshow_key; ?&gt; )	{

	&lt;?php echo 'step_' . $slideshow_key . ' = step_' . $slideshow_key . ' + 1; '; ?&gt;

} else {

	&lt;?php echo 'step_' . $slideshow_key . ' = 0; '; ?&gt;

}

&lt;?php echo 'var timeout_' . $slideshow_key . ' = setTimeout("' . $function_slide . '",' . $cycle_speed . ');'; ?&gt;

}

<?php echo $function_slide; ?>

</script>

I am obviously missing something very obvious and I will be very grateful if you can point me in the right direction.

Thanks,

Steve

20

I want to help with this, but JavaScript tends to require a different way of thinking than PHP does.

Can you give us a test page that demonstrates the problem, or can you provide the parts that would allow us to easily set up our own test that’s close to how you intend to use the code?