Appending {{ jinja }}

Question

I'm creating a form in which user can add an extra field or two... I'm using jQuery for interaction and Flask for templating and it looks like this:

<div id="edu_extension"></div>
<a id="add_edu" class="add_line">Add College or University</a>
<script>
   $( document ).ready(function() {
   $(".add_line").mouseup(function(){
        $("#edu_extension").append("
             {{ forms.year('', form_consultant_errors.year, 'pick a year','college1-yearpicker')}}
        ");
   });
   })   
</script>

but unfortunately Jinja code breaks the script causing footer to stick in the middle of the page and rendering the code after the code that has to be appended:

"); });})

So I thought, is there a function like CDATA in xml, that would handle the code without parsing it?

Answer 1

Use tojson|safe to interpolate Jinja results into Javascript:

$("#edu_extension").append(
     {{ forms.year('', form_consultant_errors.year, 'pick a year','college1-yearpicker')|tojson|safe }}
);

This produces a JavaScript-quoted value for you.