Passing php value to extern javascript file

Hello,

I have this php file with this code:

function java_scr_preview ()
{
	echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>';
	echo '<script type="text/javascript">';
	echo 'var pass_this_variable =  echo $foto';
	echo '</script>';
	echo '<script type="text/javascript" src="ddimgtooltip.js">';
	echo '<SCRIPT LANGUAGE="JavaScript">';
	echo 'function Preview(url)';
	echo '{';
	echo "window.open(url,'_blank','location=no,scrollbars=yes,toolbar=no,width=500,height=700')";
	echo '}';
	echo '</script>';
}

and a .js file where I want to get the $foto value

tooltips[2]=["http://www.website.net/preview/images/pass_this_variable"]

I cant get it to work…

when hovering the link I get broken image

Somebody knows what is wrong?

Thanks in advance

Okay, a couple of things.

    echo 'var pass_this_variable =  [COLOR="#FF0000"]echo[/COLOR] $foto'; 

1: You dont need to put echo in there. It’s already echoing.
2: You need to put quotes in there so that the Javascript recognizes it’s a string.

     echo 'var pass_this_variable =  "'.$foto.'"'; 

3: You’re not passing $foto to this function. I suggest you do so as to prevent confusion with global scope variables.

function java_scr_preview ($foto) 

Thanks for the fast reply:)

When I change the things you said I get this error:

Warning: Missing argument 1 for java_scr_preview(), called in /var/www/html/website.nl/test/test.php on line 88 and defined in /var/www/html/website.nl/test/test.php on line 282

Edit:

When I add ($foto) in line 88 too I get this error:

Notice: Undefined variable: foto in /var/www/html/website.nl/test/test.php on line 88

Here is a simplified function, which takes one argument.


function java_scr_preview ($foto){

echo '<script>';
echo 'var pass_this_variable =  "'.$foto.'"';  
echo 'alert(pass_this_variable);';
echo '</script>';
}

You pass it some data like this when you initiate the function:


// do this exactly where you want to output the js
// call the function, add the argument, what you want the foto string to read
java_scr_preview ("Some test data");

That should then output:


<script>
var pass_this_variable =  "Some test data";  
alert(pass_this_variable);
</script>

Create a simple page and get this working as it should, then apply what you have learned to your more complex script.

This tells me you havent defined that variable before you try to call your function - give it a value before you call it.

Thanks for the help but I give up…

Working on this for 2 days now and I found many simular questions on google but I cant get it to work… Everybody is talking very easy about this but for me it is very hard to accomplish…

Calm down, Show us the whole code, and we can help better. Everyone learns at their own pace, but without all the information, we cant give you a precise answer.

Yes your right. I’m sorry but it is getting a bit frustrating when your working on it for so long and you dont get any progress:(

This is my

.js file

/* Image w/ description tooltip v2.0
* Created: April 23rd, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/


var ddimgtooltip={

	tiparray:function(){
		var tooltips=[]
		var pass_this_variable = "foto";
		//define each tooltip below: tooltip[inc]=['path_to_image', 'optional desc', optional_CSS_object]
		//For desc parameter, backslash any special characters inside your text such as apotrophes ('). Example: "I\\'m the king of the world"
		//For CSS object, follow the syntax: {property1:"cssvalue1", property2:"cssvalue2", etc}

		tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
		tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
		tooltips[2]=["http://www.website.net/preview/test/" + pass_this_variable];
		alert(tooltips[2]);
		tooltips[3]=["../dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]

		return tooltips //do not remove/change this line
	}(),

	tooltipoffsets: [20, -30], //additional x and y offset from mouse cursor for tooltips

	//***** NO NEED TO EDIT BEYOND HERE

	tipprefix: 'imgtip', //tooltip ID prefixes

	createtip:function($, tipid, tipinfo){
		if ($('#'+tipid).length==0){ //if this tooltip doesn't exist yet
			return $('<div id="' + tipid + '" class="ddimgtooltip" />').html(
				'<div style="text-align:center"><img src="' + tipinfo[0] + '" /></div>'
				+ ((tipinfo[1])? '<div style="text-align:left; margin-top:5px">'+tipinfo[1]+'</div>' : '')
				)
			.css(tipinfo[2] || {})
			.appendTo(document.body)
		}
		return null
	},

	positiontooltip:function($, $tooltip, e){
		var x=e.pageX+this.tooltipoffsets[0], y=e.pageY+this.tooltipoffsets[1]
		var tipw=$tooltip.outerWidth(), tiph=$tooltip.outerHeight(), 
		x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(ddimgtooltip.tooltipoffsets[0]*2) : x
		y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
		$tooltip.css({left:x, top:y})
	},
	
	showbox:function($, $tooltip, e){
		$tooltip.show()
		this.positiontooltip($, $tooltip, e)
	},

	hidebox:function($, $tooltip){
		$tooltip.hide()
	},


	init:function(targetselector){
		jQuery(document).ready(function($){
			var tiparray=ddimgtooltip.tiparray
			var $targets=$(targetselector)
			if ($targets.length==0)
				return
			var tipids=[]
			$targets.each(function(){
				var $target=$(this)
				$target.attr('rel').match(/\\[(\\d+)\\]/) //match d of attribute rel="imgtip[d]"
				var tipsuffix=parseInt(RegExp.$1) //get d as integer
				var tipid=this._tipid=ddimgtooltip.tipprefix+tipsuffix //construct this tip's ID value and remember it
				var $tooltip=ddimgtooltip.createtip($, tipid, tiparray[tipsuffix])
				$target.mouseenter(function(e){
					var $tooltip=$("#"+this._tipid)
					ddimgtooltip.showbox($, $tooltip, e)
				})
				$target.mouseleave(function(e){
					var $tooltip=$("#"+this._tipid)
					ddimgtooltip.hidebox($, $tooltip)
				})
				$target.mousemove(function(e){
					var $tooltip=$("#"+this._tipid)
					ddimgtooltip.positiontooltip($, $tooltip, e)
				})
				if ($tooltip){ //add mouseenter to this tooltip (only if event hasn't already been added)
					$tooltip.mouseenter(function(){
						ddimgtooltip.hidebox($, $(this))
					})
				}
			})

		}) //end dom ready
	}
}

//ddimgtooltip.init("targetElementSelector")
ddimgtooltip.init("*[rel^=imgtip]")

This is my .php file

<?php

	require ("auth.php");

	if (isset($_GET['cmd'])) 
		$cmd  = $_GET['cmd'];
	else 
		$cmd = "";

	switch ($cmd) {

		case "":
			html_open_std ();
			ingave_artikel ("", "", "", "");
			html_close ();
			break;

		case "search":
			html_open_std ();
			ingave_artikel ("", "", "", "");
			toon_banden ();
			html_close ();
			break;

		case "preview":
			$foto	= $_GET['foto'];
			toon_preview ($foto);
			break;
	}

#------------------------------------------------------------

function ingave_artikel ($art1, $art2, $art3, $errormelding)
{
	global $urlphp;
	global $urlcgi;
	global $ad;

	echo "<div id=\\"invoeren\\">";
	echo "<h1>Ingave bandenmaat</h1>\
";
		
	echo "<form method=\\"POST\\" action=\\"?cmd=search\\">\
";
	echo "<table border=\\"0\\" cellspacing=\\"2\\" cellpadding=\\"2\\">\
";

	echo "<tr>\
";
	echo "<td>Breedte</td>\
";
	echo "<td>&nbsp</td>\
";
	echo "<td>Hoogte</td>\
";
	echo "<td>&nbsp</td>\
";
	echo "<td>Diameter</td>\
";
	echo "</tr>\
";

	echo "<tr>\
";
	echo "<td><input type=\\"text\\" name=\\"art1\\" value=\\"" . $art1 . 
			"\\" size=\\"5\\"></td>\
";
	echo "<td>/</td>\
";
	echo "<td><input type=\\"text\\" name=\\"art2\\" value=\\"" . $art2 . 
			"\\" size=\\"5\\"></td>\
";
	echo "<td>x</td>\
";
	echo "<td><input type=\\"text\\" name=\\"art3\\" value=\\"" . $art3 . 
			"\\" size=\\"5\\"></td>\
";
	echo "</tr>\
";

	if (! empty ($errormelding))
        	echo "<tr><td colspan=\\"5\\"><font color=\\"red\\">" . 
				$errormelding . "</td></tr>\
";

	echo "<tr>\
";
	echo "<td colspan=\\"3\\">\
";
	echo "<input type=\\"submit\\" value=\\"Verwerk\\">\
";
	echo "</td>\
";
	echo "</tr>\
";

	echo "</table>\
";
	echo "</form>\
";
	echo "</div>\
";

}

#------------------------------------------------------------

function toon_banden ()
{
	global $urlphp;
	global $urlcgi;
	global $gateway;

	java_scr_preview ();

	$art1 = trim($_POST["art1"]);
	$art2 = trim($_POST["art2"]);
	$art3 = trim($_POST["art3"]);

	if (empty ($art1)  || empty ($art3)) {
		ingave_artikel ($art1, $art2, $art3, 
					"Alle velden ingeven s.v.p.");
		return (-1);
	}

        $f = open_url ($gateway . "?3," .  $art1 . $art2 . "R" . $art3);

	if ($f == NULL)
		return (-1);

	$t = 0;
	$ncol = 4;

	$ar = explode (PHP_EOL, $f);

	if (substr($ar[0],0,7) == "*ERROR*") {
                echo "<p>";
                echo "<h1>";
                echo "Gateway functions are disabled !" . "<br>";
                echo "</p>";
                return (-1);
	}

	foreach ($ar as $rec) {
		    if ($rec == 0) {
        continue;
    }
                list ($sysnr,
                      $artikel,
                      $merk,
                      $rubriek,
                      $omschrijving,
                      $valuta,
                      $netto,
                      $bruto,
                      $beschikbaar,
                      $foto,
                      $draagvrm,
                      $levid,
                      $garpr,
                      $altpr,
                      $eancode) = explode ("\	", $rec);

		if ($sysnr == "*END*")
			break;

		if ($t == 0) {
			
			
				echo "<table border=0 cellspacing=0 cellpadding=0>";
	echo "<tr><td align=center>";
			echo "<div id=\\"uitkomst\\">";
			echo "<h1>Overzicht beschikbare voorraad</h1>\
";
			echo "<table border=\\"0\\" cellspacing=\\"2\\" cellpadding=\\"5\\">\
";
			echo "<td><b>Merk</td>\
";
			echo "<td><b>Omschrijving</td>\
";
			echo "<td><b>LI/SI</td>\
";
			echo "<td align=\\"right\\"><b>Bruto</td>\
";
			echo "<td align=\\"right\\"><b>Netto " . $valuta . "</td>\
";
			echo "<td align=\\"right\\"><b>Beschikbaar</td>\
";
			echo "<td></td>\
";
		}

		### klantprijs opslag 25 %

		$klantpr = $netto * 1.25;
		$klantpr_str = sprintf ("%7.2f", $klantpr);
		echo "<tr>\
";
		echo "<td>" . $merk . "</td>\
";
		echo "<td>" . $omschrijving . "</td>\
";
		echo "<td>" . $draagvrm . "</td>\
";
		echo "<td align=\\"right\\">" . $bruto . "</td>\
";
		echo "<td align=\\"right\\">" . $klantpr_str . "</td>\
";
		echo "<td align=\\"right\\">" . $beschikbaar . "</td>\
";
		if (empty ($foto))
			echo "<td></td>\
";
		else {
			echo "<td>";
			echo '<a rel="imgtip[2]" href="javascript:Preview';
			echo "('?cmd=preview&foto=$foto')";
			echo '">';
			echo "Foto";
			echo '</a>';
			echo "</td>\
";
		}
		echo "</tr>\
";
		$t++;
	}

	if ($t == 0)
		ingave_artikel ($art1, $art2, $art3, 
					"Geen artikelen gevonden !");
	else {
		echo '</table>';
		echo '</div>';
	}

}

#------------------------------------------------------------

function toon_preview ($fotonr)
{
        global $imglarge;

        html_open_std ();
	echo '<center>';
	echo '<br>';
	echo '<img border="0" src="' . $imglarge . '/' . $fotonr . '">';
        html_close ();
}

#------------------------------------------------------------

function toon_selektie ($merk, $model, $type, $diameter)
{
	echo '<table border="0" cellspacing="0" cellpadding="0">';
	echo '<tr><td width="70">Merk</td><td><b>' . $merk . '</td></tr>';
	echo '<tr><td>Model</td><td><b>' . $model . '</td></tr>';
	echo '<tr><td>Type</td><td><b>' . $type . '</td></tr>';
	echo '<tr><td>Diameter</td><td><b>' . $diameter . '</td></tr>';
	echo '</table>';
	echo '<hr>';
}

#------------------------------------------------------------

function open_url ($url)
{
	global $login;
	global $passwd;

	$ch = curl_init("http://$url");

	curl_setopt($ch, CURLOPT_USERPWD, "$login:$passwd");

	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

	$file = curl_exec($ch);

	$status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
	$errno = curl_errno($ch);
	$error = curl_error($ch);

	if ($status == 200) {
		return ($file);
	}
	else {
		echo "<p>";
		echo "<h1>";
		if ($status == 401) {
			echo "Authentication failed !";
		}
		else {
			echo "Errno: " . $errno . "<br>";
			echo "Error: " . $error . "<br>";
			echo "HTTP status : " . $status . "<br>";
		}
		echo "</p>";
		return (NULL);
	}
}

#------------------------------------------------------------

function html_open_std ()
{
	echo '<html>';
	echo '<head>';
	echo '<title>Banden uit voorraad leverbaar</title>';
	echo '<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">';
	echo '<meta name="robots" content="noinclude, nofollow">';
	echo '<link rel="stylesheet" href="tyre.css" type="text/css">';
	echo '</head>';
	echo '<body>';
}

#------------------------------------------------------------

function html_close ()
{
	echo "</body>";
	echo "</html>";
}

#------------------------------------------------------------

function java_scr_preview ()
{
	echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>';
	echo '<script type="text/javascript">';
	echo 'var pass_this_variable =  "'.$foto.'"'; 
	echo '</script>';
	echo '<script type="text/javascript" src="ddimgtooltip.js">';
	echo '<SCRIPT LANGUAGE="JavaScript">';
	echo 'function Preview(url)';
	echo '{';
	echo "window.open(url,'_blank','location=no,scrollbars=yes,toolbar=no,width=500,height=700')";
	echo '}';
	echo '</SCRIPT>';
}
?>


:slight_smile:

Here is some advice from an old thread and for me remains the best advice.

==============================================

If your question is about using PHP to output JS, then my advice No.1 would be use the Heredoc syntax to create/assemble your JS in PHP



$a_var = "something" ;

$js = <<<EOL

<script>alert('{$a_var}');</script>

EOL;

echo $js ;  

That way you at least have a chance of retaining the meaning and order of apostrophes and quotes, important in both PHP and JS.

The 2nd rule you could adopt is to always start off creating a JS + HTML version of your page which works without errors - even thought it contains concrete test values - THEN get PHP to create output which recreates that static page.

Do not try and develop PHP and JS in parallel when starting out.

I agree with cups. However, this problem is more one of following-the-bouncing-ball.

Your error comes in line 286, which would be this one;
echo ‘var pass_this_variable = "’.$foto.‘"’;

This line is looking for a variable named $foto.
This line is also in a function, defined as:
function java_scr_preview ()

Which, while we’ve covered ‘you should pass $foto as a parameter’, isnt the problem.
Let’s go back a layer. What called java_scr_preview?

Another function. Specifically, the function calling it was
function toon_banden ()
(Line 82)

No parameters to that function either. So we continue to scope upwards, looking for a definition of $foto.
What called toon_banden() then? This block of code;


     <?php

        require ("auth.php");

        if (isset($_GET['cmd'])) 
            $cmd  = $_GET['cmd'];
        else 
            $cmd = "";

        switch ($cmd) {

            case "":
                html_open_std ();
                ingave_artikel ("", "", "", "");
                html_close ();
                break;

            case "search":
                html_open_std ();
                ingave_artikel ("", "", "", "");
[COLOR="#FF0000"]                toon_banden ();[/COLOR]
                html_close ();
                break;

            case "preview":
[COLOR="#0000FF"]                $foto    = $_GET['foto'];[/COLOR]
                toon_preview ($foto);
                break;
        }

Do you notice how you dont define $foto in the context when you invoke toon_banden? You’ve either put the function call to java_scr_preview in the wrong function, or you need to define $foto in the context of the Search case.

I’v been playing around a little and I got something working now…

When I use this:

php file:

function java_scr_preview ()
{
	echo '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>';
?>

<?php
$foto = "image.jpg";
?>
<script type="text/javascript">
var foto = "<?= $foto ?>";
</script>
<?php

	echo '<script type="text/javascript" src="ddimgtooltip.js">';
	echo '<SCRIPT LANGUAGE="JavaScript">';
	echo 'function Preview(url)';
	echo '{';
	echo "window.open(url,'_blank','location=no,scrollbars=yes,toolbar=no,width=500,height=700')";
	echo '}';
	echo '</SCRIPT>';
}
?>

.js file

		tooltips[2]=["http://www.website.net/preview/test/"+ foto];
		alert(tooltips[2]);

it is showing the image I define in my php file…

But when I change “image.jpg” to

$foto = $_GET['foto'];

I will get an error and in the alert the is only this:

and this is the error:

Notice: Undefined index: foto in /var/www/html/website.nl/test/test.php on line 291

linie 291 =

$foto = $_GET['foto'];

So it doesnt get any “foto”… How and where do I have to define “foto”?

Thanks for the info… I tried something of that but cant get it to work:(

$_GET is a reference to URL paramters.
http://somedomain.com/index.php?id=1 <– this bit.

So in the above case, $_GET[‘id’] would exist, and contain 1.

So stick ?foto=image.jpg on the end of your URL, and it should exist.

I dont get you on this… I’m sorry but my php is really to noobish for this…:frowning:

If you want to use $_GET[‘foto’] to pull the name from the URL,