View previous topic :: View next topic |
Author |
Message |
erunways Smarty n00b
Joined: 16 Nov 2009 Posts: 3
|
Posted: Mon Nov 16, 2009 11:01 am Post subject: How to use SMARTY variables in JavaScript |
|
|
Here is something that I found very helpful. How to use SMARTY variables in JavaScript on erunways dot com |
|
Back to top |
|
bimal Smarty Elite
Joined: 19 Apr 2007 Posts: 423
|
Posted: Tue Nov 17, 2009 11:55 pm Post subject: Tips: Add safety |
|
|
I would like to add a little more safety tip as well.
Please consider that the variable: {$smarty_variable} may contain null, false or zero values, which are less likely to be printed, and your javascript becomes INVALID. Just wrap around a javascript value within two quotes, and it solves out, in these cases.
Code: | var sample = "{$smarty_variable}"; |
and NOT like:
Code: | var sample = {$smarty_variable}; |
|
|
Back to top |
|
erunways Smarty n00b
Joined: 16 Nov 2009 Posts: 3
|
|
Back to top |
|
scuzzy Smarty Regular
Joined: 31 Aug 2003 Posts: 84
|
Posted: Sun Dec 06, 2009 10:53 pm Post subject: |
|
|
If your default delemiters are still { and } and only have a short line of javascript:
Code: | <script>
$(window).load(function() {ldelim} var sample='/sample.php?v={$smarty_variable}'; {rdelim});
</script> |
|
|
Back to top |
|
mohrt Administrator
Joined: 16 Apr 2003 Posts: 7368 Location: Lincoln Nebraska, USA
|
Posted: Mon Dec 07, 2009 2:56 am Post subject: |
|
|
Also to note, Smarty 3 pretty much negates the need for {literal} escapement in javascript. Just make sure your braces { } are surrounded by white space. |
|
Back to top |
|
Kekke Smarty n00b
Joined: 17 Dec 2009 Posts: 4
|
Posted: Thu Dec 17, 2009 5:39 pm Post subject: |
|
|
Thank you for the pro tip |
|
Back to top |
|
jonemere Smarty n00b
Joined: 04 Jan 2010 Posts: 3
|
Posted: Wed Jan 06, 2010 9:39 am Post subject: |
|
|
Nice tip. Your tip is very interesting and very helpful to me. My heartiest thanks for sharing _________________ 2.5 hdd |
|
Back to top |
|
chefkoch666 Smarty n00b
Joined: 15 May 2010 Posts: 2
|
Posted: Sat May 15, 2010 7:27 am Post subject: Thanks |
|
|
Great! Many thanks! |
|
Back to top |
|
MB34 Smarty Regular
Joined: 29 Apr 2010 Posts: 58
|
Posted: Thu Jul 08, 2010 8:24 pm Post subject: |
|
|
None of those approaches work for me at all.
Code: |
{literal}
<script language="javascript">
// snipped javascript code
function showConfigTool()
{
var config_tools_div = document.getElementById('config_tool');
if (config_tools_div.style.display == 'none') {
// This shows the div
config_tools_div.style.display = 'block';
// Now rearrange the sortable according to the user's format
$.ajax({
type: "GET",
url : "userFileFormat.php",
data: "action=get?user_id= {$user.user_id}", // Need to get user_id here
success: function(res) {
var sortable_ = $("#sortable");
var dragstr = res;
if (dragstr == '') return;
$.each(dragstr.split(','),function(i,id) {
$("#"+id).appendTo(sortable_);
});
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
} else {
config_tools_div.style.display = 'none';
}
}
// snipped javascript code
</script>
{/literal}
|
Can anyone help out? |
|
Back to top |
|
bimal Smarty Elite
Joined: 19 Apr 2007 Posts: 423
|
Posted: Thu Jul 08, 2010 10:01 pm Post subject: use unobtrusive scripting |
|
|
Instead, use:
Code: | <script src="showConfigTool.js"></script> |
Use debug in opera or in firefox. Once you execute a javascript buggy page, they will report you the exact error message.
Opera: [menu] > page > developer tools > error console
In firefox, press ctrl+shift+j to open the error console.
Then, read out the error messages related to your javscript.
HTH. |
|
Back to top |
|
MB34 Smarty Regular
Joined: 29 Apr 2010 Posts: 58
|
Posted: Fri Jul 09, 2010 1:07 pm Post subject: |
|
|
Actually, I have a little egg on my face because it seems, at the time I am running this, the $user object doesn't yet have a user_id property. I'm not sure why but I have been successful using $user.name. I was assuming it was the javascript that was failing when it was my Smarty object.
Now, I just use the name .vs user_id in my SQL script to get the info back.
Here's the code:
Code: |
{literal}
<script language="javascript">
// snipped javascript code
function showConfigTool()
{
var config_tools_div = document.getElementById('config_tool');
if (config_tools_div.style.display == 'none') {
// This shows the div
config_tools_div.style.display = 'block';
// Now rearrange the sortable according to the user's format
$.ajax({
type: "GET",
url : "userFileFormat.php",
data: "action=get&name={/literal}{$user.name}{literal}",
success: function(res) {
var sortable_ = $("#sortable");
var dragstr = res;
if (dragstr == '') return;
$.each(dragstr.split(','),function(i,id) {
$("#"+id).appendTo(sortable_);
});
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
} else {
config_tools_div.style.display = 'none';
}
}
// snipped javascript code
</script>
{/literal}
|
|
|
Back to top |
|
bimal Smarty Elite
Joined: 19 Apr 2007 Posts: 423
|
Posted: Fri Jul 09, 2010 1:22 pm Post subject: use them in function call. |
|
|
You can pass things like {$user.name} in your js function all.
eg. (the javascript function)
Code: | function showConfigTool(user_name)
{
// write no literal tags.
// wirte no smarty variables.
...
} |
and use like in the below TPL:
Code: | showConfigTool( "{$user.user_name|default:'no-username'} ); |
Please avoid mixing javascripts with smarty. |
|
Back to top |
|
MB34 Smarty Regular
Joined: 29 Apr 2010 Posts: 58
|
Posted: Fri Jul 09, 2010 1:41 pm Post subject: |
|
|
I actually never really thought of doing it that way...
However, I'm going to need to use this for the storeFormat function because it is called in an event of the sortable.
Thanks. |
|
Back to top |
|
PeterMaloy Smarty n00b
Joined: 21 Apr 2013 Posts: 1
|
Posted: Sun Apr 21, 2013 3:08 pm Post subject: Complex data structures |
|
|
It got a little hairy transferring a complicated data structure from Smarty to javascript, then I thought of using JSON as a go-between:
<script type="text/javascript"> var qts; $(document).ready(function(){ qts = $.parseJSON('{$product->qts|json_encode}'); })</script> |
|
Back to top |
|
vignates Smarty n00b
Joined: 08 Aug 2013 Posts: 1
|
|
Back to top |
|
|