ExpressionEngine JS code rendering with {} brackets

Question

Is there a way to make the expression engine NOT display elements in braces as EE code? google chart tools uses javascript containing curly braces {}, and naturally EE thinks this is a variable and tries to display it. How to get around this?

Answer 1

ExpressionEngine The template class analyzes curly braces {} as template variables , looks for three kinds of variables: single, pair, and conditional variables:

 // Single Variable {summary} // Pair Variable {category} ... {/category} // Conditional Variable {if segment_2 != ""} ... {/if} 

Curly braces in CSS are considered a special condition.

For example, the following CSS is acceptable for placement anywhere in the template and is parsed intelligently:

 <style> /* All On One Line = Okay */ p { margin-bottom: 1em; } /* Indented and On Separate Lines = Also Okay */ p em { font-style: italic; } /* EE Variables are Parsed and Replaced */ p.{site_name} { text-decoration: none; } /* EE Code is Allowed and Parsed Appropriately */ {exp:channel:entries channel="channel_name" limit="1"} li.{url_title} a { color: #c00; } {/exp:channel:entries} </style> 

Unfortunately, JavaScript is handled differently and does not allow the Advanced Conditionals Parser to process anything in tags. For example, the following JavaScript with curly braces all in one line :

 <script>var addthis_config = { 'ui_click': true };</script> 

ExpressionEngine will be parsed as a template variable and displayed as:

 <script>var addthis_config = ;</script> 

You will notice that everything from opening { and ending with a closing curly brace } is processed and replaced! As a workaround, you can put curly braces on separate lines and avoid this problem:

 <script> var addthis_config = { 'ui_click': true, 'data_track_clickback': true }; </script> 

If you wrote a JavaScript function that expects values ​​from ExpressionEngine, just put your curly braces on separate lines - which is a good coding convention and is optimal for readability :

 <script> $(document).ready(function() { ... {exp:channel:entries channel="channel_name" limit="1"} var business_name = '{business_website}'; var business_website = '{business_website}'; {/exp:channel:entries} ... }); </script> 

As suggested by Ben, you can change this behavior by setting the Hidden configuration variable : $conf['protect_javascript'] = 'n';

Answer 2

What is hiding ExpressionEngine $config['protect_javascript'] ? This is probably best explained by example - let me illustrate.

Given the following code example, with extended conditional expressions $config['protect_javascript'] = 'y'; completely ignored:

 <script> {if username == "admin"} Welcome, {username}! {if:elseif member_id == "2"} Welcome, {screen_name}! {if:else} Welcome, Guest! {/if} </script> 

Which will produce the following output:

 <script> Welcome, admin! Welcome, Administrator! Welcome, Guest! </script> 

Whereas when $config['protect_javascript'] = 'n'; the same code fragment above allows us to evaluate extended conditional expressions and will produce:

 <script> Welcome, admin! </script> 

As you can see, the difference is whether the prerequisites in the blocks of JavaScript code are met .

Simple conventions and template tags are always evaluated into <script> tags, regardless of the setting of $config['protect_javascript'] - just put your curly braces {} on separate lines!

 <script> // Simple Conditionals Are Unaffected and Always Work {if segment_2 != ""} {redirect="404"} {/if} </script> 

Answer 3

Create a global variable to contain your JS code. Then just use the global variable in the template:

https://docs.expressionengine.com/v2/templates/globals/index.html

Answer 4

For some reason, simply placing curly brackets on separate lines didn’t work for me (I use EE v2.1.1). But posting a commented line before and after the brackets worked. For instance. for my google analytics code:

 <script> (function(i,s,o,g,r,a,m) // { // i['GoogleAnalyticsObject']=r;i[r]=i[r]||function() // { // (i[r].q=i[r].q||[]).push(arguments) // } // ,i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) // } // )(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-3636230-46', 'auto'); ga('send', 'pageview'); </script>