CODEWITHSUNDEEP
phpjavascriptjquery
j3ffz
j3ffz

Reputation: 715

Best Practices: Including PHP in your JavaScript code

I'm a PHP phr34k addicted to JavaScript on the quest for some knowledge. If one were to include php code in their scripts, what would be the best method? I have provided some sample code as an example on how I would go about including PHP in my scripts.

Is this a valid method?

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP with JavaScript?</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="test.js.php"></script>
</head>
<body>
</body>
</html>

test.js.php

<?php 

$foo = 'bar';

?>

$(document).ready(function() {
    var foo = '<?php echo $foo; ?>';
    alert(foo);
});

Thanks again!

Upvotes: 2

Views: 2217

Answers (3)

Joyce Babu
Joyce Babu

Reputation: 20654

Also set the content type header in test.js.php

header('Content-Type: text/javascript');

You can also define foo inline like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP with JavaScript?</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    var foo = '<?php echo $foo;?>';
</script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

test.js 

$(function(){
    alert(foo);
});

Upvotes: 5

Andrew Noyes
Andrew Noyes

Reputation: 5298

I've seen people use the PHP interpreter to combine multiple JS source files before serving them to the client. That way the JS developers can benefit from having multiple files for more organized development but avoid sending multiple JS files (thus multiple HTTP requests) to the client.

However, these days there are several build scripts just for JavaScript. Sprockets, for example, allows you to automate building JavaScript files. Before that I considered it best practice to "compile" the JavaScript dependencies before hand. I wrote a simple Python script, for example, that would look for @include comments in JS source and order includes by their order of need. Probably better than wasting server time in exchange for a slight development convenience.

EDIT: Just take special care that you dump your variable data into the JavaScript properly. For example, if $foo is a string then you need to make sure that it's surrounded by double quotes. As is that code is going to go looking for a JavaScript variable called bar.

Upvotes: 2

Andrzej Doyle
Andrzej Doyle

Reputation: 103777

Unless you have a very bizarre situation, what you've described isn't really possible. PHP is evaluated on the server, while Javascript is sent to the user agent and executed by its Javascript engine (on the client side).

No user agents that I know of contain a PHP engine, so there's no way to have PHP executed on the client side. Besides, unless you're use some heinous escapes, the PHP will be executed by the server anyway before the Javascript is sent to the client.

In the latter example you give, the PHP gets evaluated on the server and the client is sent a Javascript file that looks exactly like:

$(document).ready(function() {
    var foo = 'bar';
    alert(foo);
});

So there's no PHP contained within the Javascript; rather, you're dynamically generating (normal) Javascript via PHP.

If this latter is what you intended, then yes - this works fine. The PHP engine doesn't know anything about Javascript, and just generates some text that happens to have a particular meaning to a JS-parsing client. So the presence of Javascript doesn't change anything on the PHP side, and since it's processed out, the (previous) presence of PHP doesn't change anything on the Javascript side.

(If you wanted your Javascript to execute some PHP on the client, however, that's fundamentally not possible.)

Upvotes: 0

Related Questions