Pass server-side variables to Javascript in PHP [duplicate]

Question

What is the best way to pass a server-side PHP variable to Javascript?

To simplify the problem assume that we have a variable in PHP ($phpVar) and we want to assign its value to a Javascript variable (jsVar)

Javascript files are loaded in html - they are not created dynamic!

Some food for thought:

1. Print with PHP before loading Javascript files:

    <script language="javascript" type="text/javascript">
       var jsVar= <?php echo $phpVar?>;
    </script>

2. Store in DOM (in hidden elements)

a. in PHP:

    <span data-name="phpVar" data-value="<?php echo $phpVar?>"></span>

b. Read in Javascript files (assuming jQuery available):

    var jsVar= $('span[data-name="phpVar"]').attr('data-value');

3. Ask it with AJAX after page has loaded

Obviosly not the best solution. Doesn't fit to all scenarios and requires an additional request...

In conclusion:

They both seem ugly to me... Is there a better approach?
Is there any frameworks that can handle this dependecies? Please keep server reconfiguration minimal.

Solution 1 if the value does not depend dinamically from user interaction, solution 3 otherwise. Why don't you like them? — dirluca
– dirluca, Commented Feb 21, 2014 at 10:03
AJAX is the best way, in what scenario do you think, ajax is not good? — Shaik Mahaboob Basha
– Shaik Mahaboob Basha, Commented Feb 21, 2014 at 10:03
@ShaikMahaboobBasha For AJAX you need to send a new subrequest to the server, that isn't a best solution. The best solution is a first case, you don't need to load server with subrequest. — Victor Bocharsky
– Victor Bocharsky, Commented Feb 21, 2014 at 10:07
@DanFromGermany It better to use if you need to pass many variables — Victor Bocharsky
– Victor Bocharsky, Commented Feb 21, 2014 at 10:08

Stefano Ortisi · Accepted Answer · 2014-02-21 10:06:15Z

2

The best approach would be providing an "internal API" requested via AJAX from client side. Doing this way you can keep your sides separated.

After this, the fastest way is printing in a shared file the values you want to share (as you wrote in your question).

As a last note: if you carry on with the second way I would suggest you

json_encode()

as a really helpful method to pass arrays and objects from php to javascript.

So if you have your php array:

$array = array( "a" => 1, "b" => 2 );

<script language="javascript" type="text/javascript">
    var js_array= <?php echo json_encode( $array ) ; ?>;
</script>

answered Feb 21, 2014 at 10:06

Stefano Ortisi

5,3163 gold badges35 silver badges44 bronze badges

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

4 Comments

Victor Bocharsky Over a year ago

That is what offered by @DanFromGermany

Stefano Ortisi Over a year ago

@Victor Who? I just wrote what I know it's the best. I don't know if someone else already offered it. Can you provide us with his answer? Thanks.

Victor Bocharsky Over a year ago

You can read the comments :)

Stefano Ortisi Over a year ago

Oh now i see, but he wrote the comment a couple of minutes after my answer. By the way, I don't really mind. The most important thing is that we gave @igaster the clearest idea of what's the best to do. Thank you!

Victor Bocharsky · Accepted Answer · 2014-02-21 10:35:20Z

1

It depends on the situation, but in common, predominantly to use first case. But don't forget about quotes if you pass a string:

<script language="javascript" type="text/javascript">
    var jsVar = '<?php echo $phpVar?>';
</script>

edited Feb 21, 2014 at 10:35

answered Feb 21, 2014 at 10:03

Victor Bocharsky

12.4k14 gold badges66 silver badges92 bronze badges

Collectives™ on Stack Overflow

Pass server-side variables to Javascript in PHP [duplicate]

2 Answers 2

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Linked

Related