Evaluating php generated javascript "inline"?

Question

If you look at the source of this page http://kingston.talking-newspapers.co.uk/ you will see a large amount of inline javascript near the top.

I don't really want all this extra stuff floating around in my page source, I'd much rather get it off into a script tag, and then I can minify it and all sorts.

If I call it as a php file, this SHOULD work in theory, I just end the js file extension with php instead, and in the header I put the following:

header("Content-type:application/x-javascript");

but... a lot of the php variables used to generate the playlist within the javascript are setup at the beginning of the main index.php file, and in calling this php-generated js playlist file like this, it seems to evaluate it entirely separately, so it's full of errors.

The only way round it I can think of is to have the page write a file, then immediately read it in. The other thing is, the playlist is likely to change often and dynamically, so I think I need to get minify to NOT cache it?

Answer 1

You can do it in two ways. First would be set up the variable inline and then include the script:

<script type="text/javascript">
  var myPlayList = [
    {
       name: "Introduction and guidance on usage",
       mp3:"http://www.talking-newspapers.co.uk/find/soundfiles/TnHomePageIntro.mp3",
       ogg:"http://www.talking-newspapers.co.uk/find/soundfiles/kingstonkt9.ogg"
    }
    ...
 </script>
 <script type="text/javascript" src="myinclude.js"></script>

The other would be to have your included .js file a simple library of functions which you include at the top of the page and then call from some inline javascript:

<script type="text/javascript" src="myinclude.js"></script>

....

<script type="text/javascript">
$(function() {
    var myPlayList = [ ... ];
    startPlaylist(myPlayList);
});
</script>

I would personally choose the second method. You shouldn't need to generate any of the script dynamically (as far as I can see, it can all be hard-coded except for the playlist, right?) Any other things you need to pass to the script could still be passed in by your startPlaylist() method call anyway.

Answer 2

I made the solution by following this tutorial, which redirects the generate inline script to a file, then immediately reads that file in.

http://my.opera.com/zomg/blog/2007/10/03/how-to-easily-redirect-php-output-to-a-file

So now my page looks like:

<?php
require("./filewriter.php");
$obfw = new OB_FileWriter('jplay_gen_playlist.js');
$obfw->start(); 
require($includesdir . "jplayerscript.php");
$obfw->end(); 
?>

<script type="text/javascript" src="jplay_gen_playlist.js"></script>

et voila! All nicely external, can be minified, cached etc.