You can kill the background for speed, if you wish.[x]

Tuesday, February 17, 2009

Passing variables between Javascript and PHP

So today I was working on my Facebook app, QuoteBook, and had the need to pass variables from PHP to Javascript. I had formerly just echoed out the JS (or generated it with Smarty) with the PHP vars built-in, but I decided to move one of the scripts into a .js file, which precluded that option. After a bit of poking around, I hit upon what I think is an elegant, easy, and fairly solid solution. It simply uses JSON, which is native to Javascript (it stands for JavaScript Object Notation, after all) and has PHP functions readily available. For those of you looking to do something similar, I'll outline my problem, and my solution: Problem: I have PHP variables (arrays, integers, strings) that I need to access in some Javascript on the page the PHP is generating. I want this transfer to be compatible with external .js files, and be fairly fool-proof and solid. Solution: I decided to use a fairly straighforward solution that requires a minimum of additional code, but requires no additional libraries or fancy function trickery. The solution is as follows: At the top of each external js file, I add comments as to which PHP variables are required, so I can keep track of what I need when I include it:
/* This script depends on the following variables in phpvars:
groupidlist
groupnamelist
serverurl
uid
*/
Then, in the PHP file (or Smarty template), I pass the needed variables with a single line of Javascript, assigning a JSON Array with all the needed values. Examples in PHP and Smarty, directly from my code:

PHP:

<script type="text/javascript">
 var phpvars = <?php
echo json_encode(
 array(
  'groupidlist'=>$groupids,
  'groupnamelist'=>$groupnames,
  'serverurl'=>$serverurl,
  'uid'=>$curuser->getID()
 )
);
   ?>;
</script>

Smarty:

In PHP:
$smarty->assign('phpvars',
 json_encode(
  array(
   'groupidlist'=>$groupids,
   'groupnamelist'=>$groupnames,
   'serverurl'=>$serverurl,
   'uid'=>$uid
  )
 )
);
In Smarty:
<script type="text/javascript">
var phpvars = {$phpvars};
</script>
Once that is set up, I can then simply access whatever PHP Variables I need in the javascript through the phpvars array. For example, if I needed to set an image source using my serverurl, I could do as follows:
imgElement.src = phpvars.serverurl + '/images/example.png';
Voilà! As easy as that. Pretty painless, right? And because it uses JSON, there is no worrying about making sure that you don't screw anything up in your javascript by trying to insert the PHP variables. The encoding/decoding of the variables is handled on both ends by built-in JSON functions, so it is very hard to break it, and brainless to pass variables - you pass them like you would any other PHP array. Both of these I had problems with previously, and this solution takes care of them nicely. Let me know if you find this useful, or have any questions - I just thought I'd throw it up here, since it is working very nicely for me.