freemarker integrated with javascript

Question

<ul id="option5" class="abc">

<#list (optionsSelected)! as options>
<li class=" ${options_index+1}">
   <a href ="${options_url}">
          ${options_description}
   </a>
</li>
</#list>
</ul>


<a href="${content_url}" onClick="abc()"; return false;">


<script>
function abc(){

    $('.nav_header li').click(function () {
           var blah = $(this).children().attr('href');
                etc
                etc ....
                return false;
       }).filter(':first').click();

    }

</script>

My output looks like this with the above code:

option1 option2 option3 option4 option5

When I click on option 1 I want to see the "hey I'm option1" When I click on option 1 I want to see the "hey I'm ur second option" When I click on option 1 I want to see the "hey whats up I'm 3" etc without the page reloading.

I want to know how can I get this behavior in freemarkeR? I have my js code for this but how do I put this in freemarkeR? I cannot find good examples of javascript integrated with freemarker. I'm quite new to freemarker,

Answer 1

That is not really freemarker problem, JS doesn't bother about your server side technology.

I would do something like:

   <a href ="${options_url}" onClick="alert('${options_description}'); return false;">
          ${options_description}
   </a>

So, as you see, tricky part is only to tread your freemarker variable as a correct JS string - using ' or " (where it is allowed).