Access PHP variable in .JS file

Question

I'm trying to access a PHP variable in a JS file. The js file is appended at the end of the page.

Now I can only think of 2 possible options, but both seem kind of hacky and my question is, what are the pros & cons of both approaches (or is there a better way?).

Option 1: use inline scripts in my HTML file to set a variable. e.g.

<body>
    <script type="text/javascript">
        var link = "<?= $var ?>";
    </script>
</body>

Option 2: use HTML data-attributes to assign the variable to an HTML container, and later retrieve it with jQuery. e.g.

In HTML file:

<body>
    <div id="container" data-ajaxVar="<?= $var ?>">
        Random html
    </div>
</body>

In JS file:

var link = $("#container").data("ajaxVar");

Any suggestions?

Yes, both are viable, but don't forget about the necessary escaping! — Bergi
– Bergi, Commented Oct 15, 2014 at 10:09

piggypig · Accepted Answer · 2014-10-15 10:13:14Z

2

I'm pretty sure you should use json_encode for this. It returns the JSON representation of a php value. Something like this:

In your php

$n1 = array();
echo json_encode($n1);

In your javascript

  var link = $("#container").data(data.n1);

Can't do more, I'm on my phone, this was a pain. Some documentation here.

answered Oct 15, 2014 at 10:13

piggypig

1178 bronze badges

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

Comments

Lix · Accepted Answer · 2014-10-15 10:07:22Z

1

Both of your options are essentially the same. It's the "easiest" way to pass a static variable from PHP to JS - just echo it out into a variable or into a container that you can extract it from later.

The advantage of using an actual JS variable as opposed to embedding the value in an HTML attribute is that you can place more complex data types in the variable like arrays and objects. With the data-attribute method, you're pretty much "stuck" with simple strings. These can be converted later but it's just another step that you'll have to take.

Your other option would be to transfer the data using an AJAX call after the page has loaded.

answered Oct 15, 2014 at 10:07

Lix

48.2k12 gold badges107 silver badges134 bronze badges

1 Comment

Pedro Over a year ago

Isn't it correct to state that retrieving data with jQuery causes overhead compared to setting the var directly?

Collectives™ on Stack Overflow

Access PHP variable in .JS file

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related