Passing Variables From PHP To Javascript
February 19, 2009 – 10:22 am
Sometimes you need to pass variables – probably URL parameters – to a JavaScript script in a separate file that’s being called from a web page. I looked at a few different solutions on the web, but i didn’t find anything i liked, so i worked out my own approach.
Instead of calling my JavaScript script files “something.js”, i’ve started calling them “something.js.php” – so they’ll be parsed by the php interpreter. This allows me to dynamically create JavaScript scripts – for example, to attach a dynamically created dropdown list on a page when a user clicks on a link. The ability to create something like a dropdown list according to what else is happening on a dynamically generated page can be useful – but it can be a bit confusing to debug, because seeing the JavaScript file you generated isn’t straightforward. It can also require some mental gymnastics to work out whether a bug’s in the PHP or the JavaScript!
Anyway, i wanted to pass a parameter through from the page’s URL to the js script, in order to be able leave the subject of the current page out of the dropdown list. The first thing i tried was to include the following tag in the header, immediately before the tag calling the javascript file:
<script type="text/javascript">var personId = <?php echo $_GET['id'] ?>;</script>
This works ok, but it’s a bit messy and including it in the HTML goes against the principle of separating structure from function. So, instead of that, i changed the script tag which loads the javascript file to:
<script type="text/javascript" src="person.js.php?id=<?php echo $_GET['id'] ?>"></script>
The browser now gets the javascript file with that parameter, which i can easily access in the javascript file itself, thus:
var personId = <?php echo $_GET['id'] ?>;
To help debug this sort of script, i view the page source. Then i copy and paste the URL of the js.php file, along with any URL parameters, from the script tag in the page source into the browser’s address bar. Then i use “View Source” to look at the dynamically generated javascript.
I’m also going to start naming css files as “something.css.php” – so they, too, will be parsed by the php interpreter. I haven’t investigated the possibilities it opens up yet, but it would allow me to use variables in the CSS file and it would make it possible to set something (e.g., a colour) in one place, at the top of the file, which can recur wherever it’s needed (using php ‘echo’ statements). This would mean i’d only have to change it once and changes would be propagated throughout the file.
However, i had a bit of struggle to get that to work with Firefox 3. It works fine in IE7, Safari and Opera – and i was puzzled about why it didn’t work in Firefox as well. After a bit of experimenting, i realised that apache sends a “Content-type: text/css” header if the filename suffix is “.css”, but a text/html content-type header if it’s “php”. Obviously the other browsers don’t worry about that – but Firefox does. So, to make .css.php files work (if you’re using apache), you have to put the following line at the top of the file:
<?php header( 'Content-type: text/css' ); ?>
Note: this must be the very first line in the file. If there’s anything else before it – even a blank line – it won’t work, because once apache has sent anything to the browser it can’t send another header.
With this in mind, even though files with the .js.php suffix seem to work ok, it’s obviously a good idea to send an application/javascript header with js.php files, too – like this:
<?php header( 'Content-type: application/javascript' ); ?>
Leave a Reply