Smarty 3 breaks at html in javascript

Question

Smarty 3 breaks my javascript when I put some html in a variable.

My code (shortened):

 <section id="map">
     <script>
         {literal}
             var contentString = '<div id="content">'+
                 '<div id="siteNotice">'+
                  '</div>'+
                  '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                  '<div id="bodyContent">';
        {/literal}
    </script>
</section>

When i look into the website's source code it breaks and closes the html tags:

<script>
     var contentString = '<div id="content">'+
          '<div id="siteNotice">'+
          '!!!</script></section>!!!</div>'+
          '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
          '<div id="bodyContent">';

Even when I put the whole html in the variable in one line it breaks after the first / within the html..

 <section id="map">
     <script>
     {literal}
         var contentString = '<div id="content"><div id="siteNotice"></div><h1 id="firstHeading" class="firstHeading">Uluru</h1><div id="bodyContent">';
    {/literal}
    </script>
</section>

Turns into:

var contentString = '<div id="content"><div id="siteNotice"></script></section></div>';

This is really strange. Any ideas?

Thanks in advance!

score 1 · Answer 1 · answered Sep 23 '15 at 10:33

1

I guess you should wrap <script> tag in {literal} block too, not juts its content.

<section id="map">
    {literal} 
        <script>     
         var contentString = '<div id="content">'+
             '<div id="siteNotice">'+
             '</div>'+
             '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
             '<div id="bodyContent">';    
        </script>
    {/literal}
</section>

answered Sep 23 '15 at 10:33

Alexandr Lazarev

12,554
4
38
47

Thank you. But that doesn't change anything. Even when i put no literal-tags around the code it breaks. :( – Pascal Cloverfield Sep 23 '15 at 11:04

score 0 · Answer 2 · answered Oct 02 '15 at 11:29

It's very strange; it may be your browser or some script on your server trying to "fix" the html for some reason. Also, you don't need to use {literal}.

Maybe you can break the tags in your javascript code, ie:

'<'+'div id="content">'+

Another thing you can try is to html-comment the script. Modern browsers do not require it, but it's worth a try:

<section id="map">
     <script>
         <!--
             var contentString = '<div id="content">'+
                 '<div id="siteNotice">'+
                  '</div>'+
                  '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                  '<div id="bodyContent">';
        //-->
    </script>
</section>

Smarty 3 breaks at html in javascript

2 Answers2