JS in .tpl file does not get compiled

Question

I have the following code inside my .tpl file (I am using the Smarty template engine for my project).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
   <script>
          $(document).ready(function(){
    $('.check:button').toggle(function(){
        $('input:checkbox').attr('checked','checked');
        $(this).val('uncheck all');
    },function(){
        $('input:checkbox').removeAttr('checked');
        $(this).val('check all');        
    })
})
</script>

<input type="button" class="check" value="check all" />

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3

However, in the final compiled php code, the JS function doesn't appear, as a result of which the toggle ("check all") button I want to create doesn't work. The final compiled php code, as seen in the browser looks like this :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
   <script>
          $(document).ready(function(),function())
})
</script>

<input type="button" class="check" value="check all" />

   <input type="checkbox" class="cb-element" /> Checkbox  1
   <input type="checkbox" class="cb-element" /> Checkbox  2
   <input type="checkbox" class="cb-element" /> Checkbox  3

I am new to using both jQuery and Smarty. Any help would be greatly appreciated. The jQuery function has been discussed in this SO post.

EDIT : I have put the JS inside {literal} and {/literal} and I can now see the JS function in the finally compiled php code. However, the JS function still does not respond! Why might that be?

Shouldn't you be wrapping js in `{literal}...{/literal}`? Just search "using javascript in smarty templates" in Google... — Joe, Jun 08 '13 at 17:52

score 2 · Answer 1 · answered Jun 08 '13 at 18:25

2

with smarty, and JS you add needs to be wrapped with {literal} and {/literal} so that smarty knows not to interpret the "{}" tags in the javascript as normal rather than as smarty normally interprets those tags

answered Jun 08 '13 at 18:25

mtindall89

400
1
6
20

I have put the JS inside {literal} and {/literal} and I can now see the JS function in the finally compiled php code. However, the JS function still does not respond! Why might that be? – APratik Jun 08 '13 at 18:45
in the code about you are missing a ";" at the end of the script. does that help? – mtindall89 Jun 08 '13 at 18:53
No, it doesn't. I did paste all the code (as shown above) in a single php file, and that worked well. However, it doesn't work in .tpl file, even after all the edits. – APratik Jun 08 '13 at 18:56
In between the tags. Also outside them. Both do the same thing for my code since the – APratik Jun 08 '13 at 19:13
You can't use smarty within a fiddle, but anything between the literal tags should act like smarty isn't involved. i do almost all of my work with smart and have never has this issue. is the script in the head tag? – mtindall89 Jun 08 '13 at 19:22
No. It isn't in the head tag. I do get your point about the literal tags and that is why the fiddle you tried, and the single php file I tried work. But the problem with the .tpl file doesn't make sense to me either. – APratik Jun 08 '13 at 19:29

score 1 · Answer 2 · answered Jun 08 '13 at 18:15

1

Consider putting your JS in separate file and linking to it. Smarty uses { and } as special characters.

answered Jun 08 '13 at 18:15

Cysioland

1,126
1
9
21

JS in .tpl file does not get compiled

2 Answers2