ExpressionEngine rendering JS code with { } brackets

Question

Is there a way to force expression engine to NOT render items within curly brackets as EE code? The google chart tools uses javascript code that contains curly { } brackets, and naturally EE thinks it's a variable and tries to render it. Any way around this?

Answer 1

ExpressionEngine's Template Class parses curly braces {} as template variables, looking 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 to place anywhere in a template, and gets intelligently parsed:

<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 prevents the Advanced Conditionals Parser from processing anything in tags. For example, the following JavaScript with curly braces all on one line:

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

Will be parsed by ExpressionEngine as a template variable and rendered as:

<script>var addthis_config = ;</script>

You'll notice everything starting at the opening { and ending with the closing } curly brace gets parsed and replaced! As a workaround, you can place the braces on separate lines and avoid this problem:

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

If you've written a JavaScript function that expects values from ExpressionEngine, just place your 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 a Hidden Configuration Variable: $conf['protect_javascript'] = 'n';