How to pass a variable from php template to javascript

Question

I have a page where I want to display some points on the map. I have small templates (e.g. Smarty, but lighter), and there in the template I have $ points variables that consist of the coordinates of the points I need. I need to pass them to javascript (because only javascript can display this map with dots).

I have 3 options for this. Can you say which is better?

1st method: (Template inserting javascript tags with a global variable)

Tpl.php file:

<script> MAP_POINTS = <?php echo json_encode($this->points); ?>; </script> 

.js file

 function renderMap(){ var points = MAP_POINTS; // using global. Is it really bad? or who cares? =)) } 

Second way: (Passing a variable through an HTML element)

tpl.php.file

 <input type="hidden" value="<?php echo json_encode($this->points); ?>" id="map_points_container"> 

.js file

 function renderMap(){ // without globals, but needed to be parsed on local side var points = $.parseJSON ( $( "#map_points_container" ).val() ); } 

Third Way: (AJAX-way)

I do not pass $this->points from the template file at all. I have another .php file that handles all my AJAX requests:

Ajaxing.php

 function get_map_points($params){ // some operations return json_encode ($map_points); } 

And than on the local side I will have something like this:

.js file

 $.post ( 'ajaxing.php', params, function(points){ renderMap(points); }, 'json'); 

The third way is the usual one, but if I already transfer some values ​​from the template to the local page, then I can transfer and plot the map points. In fact, I do not need to make another request only for these points on the map (why I do not like the third way)

But maybe you can advise me another way? The best way?

As i chose:

1st method with a few comments. All my "map rendering" code is in another file, and it looks like this:

 $(function(){ MAP_APP = {}; MAP_APP.some_prop = null; // some properties MAP_APP.some_method = function(){}; // some methods }); 

Therefore, in the template file, I need to expand the MAP_APP object:

 <script> MAP_APP.points = <?php echo json_encode($this->points); ?>; </script> 

Yes, a global variable. But this is similar to the namespace of the entire application.

Thanks to everyone.

Answer 1

The first way is definitely the least complicated and fast.

The second one adds an additional processing step ( parseJSON() ), which is not needed.

The third method is good if you are dealing with a lot of data that is optional (i.e., necessary only if the user requests it and he is not 100% sure that this will happen) or dynamic. It creates a new request, although it will not be immediately available.

If you do not want to use global variables, you can, for example, combine your JavaScript functions into an object and populate the object property from PHP:

 <script> MyObject.MAP_POINTS = <?php echo json_encode($this->points); ?>; </script> 

Answer 2

There is another funky way to pass variables to an external js file :)

Your PHP file:

 <script type='text/javascript' src='script.js?id=0&some=<?php echo $whatever?>'></script> 

and inside your script.js you can get these values:

 var scripts = document.getElementsByTagName('scripts'); // get your current script; for (var i=0,l=scripts.length;i<l;i++){ if(scripts[i].src.indexOf('script.js') !== -1) { // or your script name var query = scripts[i].src.substr(scripts[i].src.indexOf('?')+1); // now you can split the query and access the values you want .... } } 

Answer 3

The first is the most efficient and fastest. The second is funky. The third is also beautiful.

First, because it does not require any other queries. The second one is a bit strange, I would not use such constructions, but this does not mean that you cannot. The third is good too, but you should consider whether there is an AJAX way. If an application requires multiple queries for points in different places, this may be the most efficient way.

Answer 4

I would go with your second method, since you do not want to use AJAX for it (and it seems strange to use AJAX for something that you already have on the current page). You want to limit the number of global variables in your JavaScript, because everything in your JavaScript will instantiate each global variable and thus reduce your performance.

I forgot the name of the person, but the person who led the optimization on Yahoo! and then went to work at Google, gave a lecture on optimizing JavaScript, and that was one of his points.

EDIT: Found the link: http://sites.google.com/site/io/even-faster-web-sites

Answer 5

Speed ​​wise 1st way is the best way.

But the best way is to create XML output from PHP and load this xml into Javascript via Ajax. The best example of this is the google map documentation article - http://code.google.com/apis/maps/articles/phpsqlajax_v3.html

Answer 6

Another way:

In script_that_defines_renderMap.js :

 function renderMap(points) { // take "points" as an argument } 

And then:

 <script src="script_that_defines_renderMap.js"/> <script> var mapPoints = <?php echo json_encode($this->points); ?>; renderMap(mapPoints); </script> 

No global variable, no problem.