Under what conditions can I put PHP into Javascript code? Is it always ok? Is it just a bad idea? I am surprised I have not seen it more.

For example, I came across this..

$('#thumbnail').imgAreaSelect({aspectRatio: '<?php echo $thumb_height/$thumb_width;?>', onSelectChange:preview}); 

..which was in an onpage script element. I'm not so experienced, but I was just surprised that I had never seen mixed js/php before. But can you put PHP in .js files as well? If I set the file extension to .php, will the file be parsed?

Under what conditions can I put PHP into Javascript code? Is it always ok? Is it just a bad idea? I am surprised I have not seen it more.

For example, I came across this..

$('#thumbnail').imgAreaSelect({aspectRatio: '<?php echo $thumb_height/$thumb_width;?>', onSelectChange:preview}); 

..which was in an onpage script element. I'm not so experienced, but I was just surprised that I had never seen mixed js/php before. But can you put PHP in .js files as well? If I set the file extension to .php, will the file be parsed?

• php
• javascript

• 3 The title and the actual question do not match, not even close. – Arjan Commented Mar 9, 2012 at 10:49

4 Answers 4

You can put PHP code into *.js files but you need to tell the webserver to also execute the PHP interpreter on *.js files. Something like this should be in your httpd.conf

<IfModule php5_module>
    AddType application/x-httpd-php .php .php5 .js

    ...
</IfModule>

A better solution is to just rename your *.js files to *.js.php or just *.php. The browsers won't mind and the PHP interpreter will also get executed on those.

Mixing JS with PHP is usually avoided due to debugging difficulties and/or poor code readability (like mixing PHP with HTML). It is, however, possible. But a safer approach might be to pass the PHP value to a function, or set the PHP value to a global JS variable, and use that instead. Maybe something like this:

    //JS code
    var value = <?php echo ($thumb_height/$thumb_width);?>

....

    $('#thumbnail').imgAreaSelect({aspectRatio: value, onSelectChange:preview});

This way it will be much easier to read. Have a great day.

Under what conditions can I put PHP into Javascript code?

Under no conditions. That would be impossible and useless.
You can can put only contrary - JS code into PHP. In other words you can make PHP output whatever text, which can be valid HTML, JS, XML, whatever.
Once sent to the browser, this text will be interpreted accordingly, but with not a trace of PHP in it.

It is always OK as long as PHP represents display logic only.

So, you put PHP in .js files only if it would be actually PHP files.

The code you presented is a very reasonable way to dynamically generate javascript in the web page returned by the web server.

So, for example, if $thumb_height was 100 and $thumb_width was 10, the web server would return a web page containing the following javascript:

$('#thumbnail').imgAreaSelect({aspectRatio: '10', onSelectChange:preview});

If, on another call to the page, $thumb_height was 24 and $thumb_width was 6 the web page returned by the server would be:

$('#thumbnail').imgAreaSelect({aspectRatio: '4', onSelectChange:preview});

You can use php to dynamically generate any part of a web page, both the html and the javascript.