Passing php variable to javascript (cant get it working) - php

Question

I'm have a problem getting a php variable to my .js file and make it work.
This is my php function where I'm trying to pass the variable:
function java_scr_preview ($foto)
{
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>';
}
This is my whole php script (if needed)
<?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>\n";
echo "<form method=\"POST\" action=\"?cmd=search\">\n";
echo "<table border=\"0\" cellspacing=\"2\" cellpadding=\"2\">\n";
echo "<tr>\n";
echo "<td>Breedte</td>\n";
echo "<td>&nbsp</td>\n";
echo "<td>Hoogte</td>\n";
echo "<td>&nbsp</td>\n";
echo "<td>Diameter</td>\n";
echo "</tr>\n";
echo "<tr>\n";
echo "<td><input type=\"text\" name=\"art1\" value=\"" . $art1 .
"\" size=\"5\"></td>\n";
echo "<td>/</td>\n";
echo "<td><input type=\"text\" name=\"art2\" value=\"" . $art2 .
"\" size=\"5\"></td>\n";
echo "<td>x</td>\n";
echo "<td><input type=\"text\" name=\"art3\" value=\"" . $art3 .
"\" size=\"5\"></td>\n";
echo "</tr>\n";
if (! empty ($errormelding))
echo "<tr><td colspan=\"5\"><font color=\"red\">" .
$errormelding . "</td></tr>\n";
echo "<tr>\n";
echo "<td colspan=\"3\">\n";
echo "<input type=\"submit\" value=\"Verwerk\">\n";
echo "</td>\n";
echo "</tr>\n";
echo "</table>\n";
echo "</form>\n";
echo "</div>\n";
}
#------------------------------------------------------------
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 ("\t", $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>\n";
echo "<table border=\"0\" cellspacing=\"2\" cellpadding=\"5\">\n";
echo "<td><b>Merk</td>\n";
echo "<td><b>Omschrijving</td>\n";
echo "<td><b>LI/SI</td>\n";
echo "<td align=\"right\"><b>Bruto</td>\n";
echo "<td align=\"right\"><b>Netto " . $valuta . "</td>\n";
echo "<td align=\"right\"><b>Beschikbaar</td>\n";
echo "<td></td>\n";
}
### klantprijs opslag 25 %
$klantpr = $netto * 1.25;
$klantpr_str = sprintf ("%7.2f", $klantpr);
echo "<tr>\n";
echo "<td>" . $merk . "</td>\n";
echo "<td>" . $omschrijving . "</td>\n";
echo "<td>" . $draagvrm . "</td>\n";
echo "<td align=\"right\">" . $bruto . "</td>\n";
echo "<td align=\"right\">" . $klantpr_str . "</td>\n";
echo "<td align=\"right\">" . $beschikbaar . "</td>\n";
if (empty ($foto))
echo "<td></td>\n";
else {
echo "<td>";
echo '<a rel="imgtip[2]" href="javascript:Preview';
echo "('?cmd=preview&foto=$foto')";
echo '">';
echo "Foto";
echo '</a>';
echo "</td>\n";
}
echo "</tr>\n";
$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 ($foto)
{
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>';
}
?>
And this is my whole .js file:
It is a tooltip script and I want to show my images dynamicly:
/* 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=[]
//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"]
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]")
And this rule:
tooltips[2]=["http://www.website.net/preview/test/pass_this_variable"]
Should show the variable $foto...
Anyone can help me to fix this? Working 2 days on it now and cant figure it out...
Update
I've tried some things and I manage to get some info to my javascript like 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]);
This is showing http://www.website.net/preview/test/image.jpg in my alert...
But when I'm doing it like this:
$foto = $_GET["foto"];
I'm getting an error :
Notice: Undefined index: foto in /var/www/html/website.nl/test/test.php on line 291
And in my alert only http://www.website.net/preview/test/...
How should I pass my dynamic variable?

Answer 1

Change
tooltips[2]=["http://www.website.net/preview/test/pass_this_variable"]
to
tooltips[2]=["http://www.website.net/preview/test/" + pass_this_variable]
You were not using the variable you were just passing text.
Simplified example here

Answer 2

In function toon_banden() you call java_scr_preview() and you are not passing the expected arg.