| View previous topic :: View next topic |
| Author |
Message |
toplisek
Smarty Regular
Joined: 17 Sep 2009
Posts: 48
|
 Posted: Fri Feb 17, 2017 11:21 am Post subject: How to enable Smarty variables inside JS files? |
 |
|
I understand using tpl files and variables inside such files.
Issue is how to manage variables also inside js file.
If I add JS file like the following line:
<script src="js/javascript.js"></script>
How to add also variables inside JS file. Is there good example to do this?
<script>
jQuery(document).ready(function()
{
MyfunctionJQuery.init();
}
);
In this case it will not work like tpl file // {/literal}{$variablesmng.myvariable1}{literal}, {/literal}{$variablesmng.myvariable2}{literal}), |
|
| Back to top |
|
AnrDaemon
Administrator
Joined: 03 Dec 2012
Posts: 1785
|
| Posted: Fri Feb 17, 2017 2:25 pm Post subject: |
|
|
What you must understand first is that the result of your code execution is a text.
When your page is rendered in a browser, your code is long since finished execution and all that remains is a stream of bytes.
If you want your variables to appear in JS code, you have to generate JS code and send it over to the client in hopes for the best. |
|
| Back to top |
|
bsmither
Smarty Elite
Joined: 20 Dec 2011
Posts: 322
Location: West Coast
|
| Posted: Mon Feb 27, 2017 7:41 pm Post subject: |
|
|
I have seen this:
| Code: | | <script type="text/javascript" src="{$STORE_URL}/js/plugins.php"></script> |
where plugins.php is code that will do whatever you need it to do, assign whatever values to template variables in a template, render the template, and return what should look like a valid javascript file. |
|
| Back to top |
|
robbo2000
Smarty Rookie
Joined: 02 Nov 2016
Posts: 14
|
| Posted: Wed Mar 01, 2017 5:52 am Post subject: same issue - variables for js |
|
|
Hello,
I think i’ve got a question similiar to this here. I would like to integrate a Google Map into my Smarty website, which displays all entries from the database with a marker.
My solution works and I have solved it like this: By PDO the data is queried and then passed as JSON to Smarty. In the TPL, the data is passed as „var locations“ to the javascript, but not very ellegantly.
index.php:
| Code: |
…
$allCoords = $pdo -> getAllCoords();
$smarty->assign('allCoords', json_encode($allCoords));
|
map.tpl:
| Code: |
<script type="text/javascript">
var locations = {$allCoords};
</script>
…
{fetch file="./js/googlemapmarker.js"}
<div id="map"></div>
|
googlemapmarker.js Corresponds to the example here: http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example
My question to you: Is there another way to assign the data for the markers to the JavaScript? Viewing source code of the website the complete JSON can be seen, which I find unpleasant.
Regards, |
|
| Back to top |
|
bsmither
Smarty Elite
Joined: 20 Dec 2011
Posts: 322
Location: West Coast
|
| Posted: Wed Mar 01, 2017 6:13 am Post subject: |
|
|
That's how I would do it, and, as you say, the data can be seen in the page's HTML source.
I'm not sure you can get away from the data being seen by Smarty template assign, or by an ajax call to an API listener on your site, or whatever.
You could base64 encode it, then decode it when giving it to the locations variable. This way the data will never be seen in its raw form unless someone is willing to go the extra step. |
|
| Back to top |
|
AnrDaemon
Administrator
Joined: 03 Dec 2012
Posts: 1785
|
| Posted: Wed Mar 01, 2017 1:21 pm Post subject: Re: same issue - variables for js |
|
|
| robbo2000 wrote: |
index.php:
| Code: |
…
$allCoords = $pdo -> getAllCoords();
$smarty->assign('allCoords', json_encode($allCoords));
|
map.tpl:
| Code: |
<script type="text/javascript">
var locations = {$allCoords};
</script>
|
My question to you: Is there another way to assign the data for the markers to the JavaScript? Viewing source code of the website the complete JSON can be seen, which I find unpleasant. |
There's no other way to do it.
For your PHP code, JS is just an output, no different than HTML or any other output.
Only when your script is finised and the data is sent to the browser, your output grow a different meaning. |
|
| Back to top |
|
robbo2000
Smarty Rookie
Joined: 02 Nov 2016
Posts: 14
|
| Posted: Wed Mar 01, 2017 8:36 pm Post subject: |
|
|
OK - Thank you, especially for the quick replies. Perhaps I'll give ROT13 a try  |
|
| Back to top |
|
AnrDaemon
Administrator
Joined: 03 Dec 2012
Posts: 1785
|
| Posted: Thu Mar 02, 2017 12:35 am Post subject: |
|
|
You could always load the data dynamically via a separate call.
Which would require only "print json_encode();" and no additional support. |
|
| Back to top |
|
robbo2000
Smarty Rookie
Joined: 02 Nov 2016
Posts: 14
|
| Posted: Thu Mar 02, 2017 7:55 am Post subject: |
|
|
Hello AnrDaemon,
thats new to me. Could you please give me some more Details or an example? |
|
| Back to top |
|
AnrDaemon
Administrator
Joined: 03 Dec 2012
Posts: 1785
|
|
| Back to top |
|
robbo2000
Smarty Rookie
Joined: 02 Nov 2016
Posts: 14
|
| Posted: Tue Mar 07, 2017 8:49 pm Post subject: |
|
|
Good Evening
thank you for your hint! I solved it this way, thought don’t know if this is very elegant.
I wrote a new file helper.php which i use for calling the pdo query:
| Code: |
<?php
require_once('pdo.php');
$meinpdo = new pdo();
$allCoords = $meinpdo -> getAllCoordsJSON();
echo $allCoords;
?>
|
And in my JS for generating the map i do a ajax-call on this file
| Code: |
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: './helper.php',
async: true,
dataType: "json",
success: function(locations){
//… build map and do other fancy stuff….
}
});
});
|
If you’ve got any suggestions - please let me know! |
|
| Back to top |
|
|
