Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.

How to use SMARTY variables in JavaScript
Goto page 1, 2  Next
 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
erunways
Smarty n00b


Joined: 16 Nov 2009
Posts: 3

PostPosted: Mon Nov 16, 2009 11:01 am    Post subject: How to use SMARTY variables in JavaScript Reply with quote

Here is something that I found very helpful. How to use SMARTY variables in JavaScript on erunways dot com
Back to top
View user's profile Send private message
bimal
Smarty Elite


Joined: 19 Apr 2007
Posts: 423

PostPosted: Tue Nov 17, 2009 11:55 pm    Post subject: Tips: Add safety Reply with quote

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
View user's profile Send private message Visit poster's website
erunways
Smarty n00b


Joined: 16 Nov 2009
Posts: 3

PostPosted: Fri Dec 04, 2009 10:57 pm    Post subject: How to use SMARTY variables in JavaScript Reply with quote

Here is the exact link to the example:
http://erunways.com/how-to-use-smarty-variables-in-javascript/
Back to top
View user's profile Send private message
scuzzy
Smarty Regular


Joined: 31 Aug 2003
Posts: 84

PostPosted: Sun Dec 06, 2009 10:53 pm    Post subject: Reply with quote

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
View user's profile Send private message Visit poster's website
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7368
Location: Lincoln Nebraska, USA

PostPosted: Mon Dec 07, 2009 2:56 am    Post subject: Reply with quote

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
View user's profile Send private message Visit poster's website
Kekke
Smarty n00b


Joined: 17 Dec 2009
Posts: 4

PostPosted: Thu Dec 17, 2009 5:39 pm    Post subject: Reply with quote

Thank you for the pro tip
Back to top
View user's profile Send private message
jonemere
Smarty n00b


Joined: 04 Jan 2010
Posts: 3

PostPosted: Wed Jan 06, 2010 9:39 am    Post subject: Reply with quote

Nice tip. Your tip is very interesting and very helpful to me. My heartiest thanks for sharing
_________________
2.5 hdd
Back to top
View user's profile Send private message Send e-mail
chefkoch666
Smarty n00b


Joined: 15 May 2010
Posts: 2

PostPosted: Sat May 15, 2010 7:27 am    Post subject: Thanks Reply with quote

Great! Many thanks!
Back to top
View user's profile Send private message
MB34
Smarty Regular


Joined: 29 Apr 2010
Posts: 58

PostPosted: Thu Jul 08, 2010 8:24 pm    Post subject: Reply with quote

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
View user's profile Send private message
bimal
Smarty Elite


Joined: 19 Apr 2007
Posts: 423

PostPosted: Thu Jul 08, 2010 10:01 pm    Post subject: use unobtrusive scripting Reply with quote

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
View user's profile Send private message Visit poster's website
MB34
Smarty Regular


Joined: 29 Apr 2010
Posts: 58

PostPosted: Fri Jul 09, 2010 1:07 pm    Post subject: Reply with quote

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
View user's profile Send private message
bimal
Smarty Elite


Joined: 19 Apr 2007
Posts: 423

PostPosted: Fri Jul 09, 2010 1:22 pm    Post subject: use them in function call. Reply with quote

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
View user's profile Send private message Visit poster's website
MB34
Smarty Regular


Joined: 29 Apr 2010
Posts: 58

PostPosted: Fri Jul 09, 2010 1:41 pm    Post subject: Reply with quote

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
View user's profile Send private message
PeterMaloy
Smarty n00b


Joined: 21 Apr 2013
Posts: 1

PostPosted: Sun Apr 21, 2013 3:08 pm    Post subject: Complex data structures Reply with quote

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
View user's profile Send private message
vignates
Smarty n00b


Joined: 08 Aug 2013
Posts: 1

PostPosted: Thu Aug 08, 2013 5:22 am    Post subject: Use {/literal} tag before the javascript variable Reply with quote

Refer this article, which clearly gives how to use smarty variable inside javascript function or code.

http://www.iamrookie.com/blog/296/using-smarty-variable-within-javascript-or-jquery-function.html
Back to top
View user's profile Send private message
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Tips and Tricks All times are GMT
Goto page 1, 2  Next
Page 1 of 2

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP