Use a variable I made in a .php document within a separate .js document

Question

I've looked, and will continue to look through many more forum posts, but I have not found a solution to this simple question.

Easy enough, I get some data from a server, I manipulate this data in my .php file and create four variables. My variables are (for simplicity) $v1, $v2, $v3, $v4. Now I also have a .js file that I would like to use these four variables in. Specifically, I would like to use these variables in a google maps marker (but you don't have to answer if you do not know) but how might I grab these variables and use their values in my google maps marker (.js file)?

also have you looked at json encode and using ajax to pull the results from that? — ryanc1256
– ryanc1256, Commented Jan 14, 2013 at 23:54

Jonathan Kuhn · Accepted Answer · 2013-01-15 00:01:34Z

1

if you declare a global variable in a script tag prior to the external script being loaded will be available in the external script.

<html>
<head>
    <script type="text/javascript">
    var v1 = <?=$v1?>,
        v2 = <?=$v2?>,
        v3 = <?=$v3?>,
        v4 = <?=$v4?>;
    </script>
    <script type="text/javascript" src="js/someExternalScript.js"></script>
</head>
<body>
    Some body
</body>
</html>

If you want, you could also define the variables in another page that you include like a javascript external file using the script tag. In the order the scripts appear in the source, later scripts will have access to global variables (global here means not defined within a function/closure scope) from previous scripts. For example, most people include jquery as an external script and all scripts included after jquery have access to it.

edited Jan 15, 2013 at 0:01

answered Jan 14, 2013 at 23:53

Jonathan Kuhn

15.3k3 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GregPK · Accepted Answer · 2013-01-15 00:14:20Z

You can do two things:

Approach the problem properly.
Half-ass it.

I will give the second instruction first because it should give you some undestanding of how these two technologies are related.

Half ass it

This assumes that the script you are writing is not Ajax-based - just some standard generate-page-with-PHP and include .js.

Write a php file that will generate Javascript content:

// /js/vars.php
$v1 = $v2 = $v3 = $v4 = time();

header("Content-type: text/javascript");

echo "window.Variables = {
    v1: $v1,
    v2: $v2,
    v3: $v3,
    v4: $v4
}";

(note that if the variables are strings, you should add quotes)

Require that file in <head> before the file you want to use the variables in.
```
<script type="text/javascript src="/js/vars.php">
```

Use it in your .js file.

var smth = Variables.v1 + Variables.v2;

How this is a no-no for many reasons, amongst them:

JavaScript generated by a PHP file is not easily maintainable.
The global JS namespace is somewhat messy.
It does not play well with Ajax.

Proper

Write a php file that will generate JSON data:

// /js/vars.php
$v1 = $v2 = $v3 = $v4 = time();

$jsonArr = array(
'v1'=> $v1,
'v2'=> $v2,
'v3'=> $v3,
'v4'=> $v4
);
header("Content-type: application/json");            
echo json_encode($jsonArr);

Write some JavaScript code that will pull the data using Ajax. Eg. using jQuery:
```
$.getJSON('js/vars.php', function(data) {
    alert(data.v1+data.v2);
});
```

Collectives™ on Stack Overflow

Use a variable I made in a .php document within a separate .js document

2 Answers 2

Comments

Half ass it

Proper

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Half ass it

Proper

Comments

Your Answer

Sign up or log in

Post as a guest

Related