JavaScript and PHP; Using a JavaScript Include to Run PHP

JavaScript and PHP do not play well together. JavaScript is client side, PHP server side. This makes it difficult to get things to play together. One way to get them to play together, is to have your PHP script build your JavaScript. Now, what if you need to have an external JavaScript file get some stuff from your database and run some things in PHP? Something like this widget:

This is a widget that I wrote. It pulls a list from a database and then displays it. I want people on other websites to be able to display it, so I need a way for them to include it on their site. To do that, I use the <script> tag:


<script type="text/javascript" src="http://contestfarm.com/scripts/cf/rand_contest.php?style=2&uid=1"></script>


I want you to notice a couple of things that are different about this than normal JavaScript includes. First, notice that the file extension is .php, not .js. If I called it .js, then it would not run as a PHP file, and I need it to run as PHP. Second, notice that I included two variables. This allows us to pass variables, just like you would in any PHP script.

OK. Not that we have the hosting site set to call it, how do we make it display something? Well, if I was doing it in HTML/PHP it would have code something like:


echo "<a href='" . $url . "'>" . $title . "</a>";


This is all fine and dandy, if I am calling it as a PHP script, but I'm calling it as a JavaScript. Since it is JavaScript, it does not know the HTML tags as commands, so the script fails. We need to make it JavaScript, so we have to add in a document.write. Now, this line gets longer and more confusing. We have to remember to close the HTML tag, we have to close the JavaScript command, and we have to close the PHP command. This is what we end up with:


echo "document.write(\"<a href='" . $url . "'>" . $title . "</a>)\";";


In PHP, you can stop your PHP script and display some HTML. ie:


?>
<a href="http://shabamdevelopment.com">Shabam Development Rocks
//more php here


We can do something like this, but remember, that we are doing JavaScript, so we can't bail out, use HTML and then go back. We can bail out of the PHP, but not the JavaScript. We still need the document.write. This will work:


?>
document.write('<a href="http://shabamdevelopment.com">Shabam Development Rocks');
//more php here


One last thing. We have to set the header of our file to be JavaScript. At the top of the page include a header, like this:


<? Header('Content-Type: application/x-javascript')?>


So now lets put it all together.

In the hosting page:


<script type="text/javascript" src="http://contestfarm.com/scripts/cf/rand_contest.php?style=2&uid=1"></script>


In the script:

<? Header('Content-Type: application/x-javascript')?>
document.write('<a href="http://shabamdevelopment.com">Shabam Development Rocks');
//more php here