javascript syntax - using jinja2 and google app engine

Question

I keep getting Uncaught SyntaxError: Unexpected token ILLEGAL in my {% endfor %} line - I'm using jinja2 in Google app engine python server code and the error is in one of my html templates: I'm trying to create a menu of categories that show subcategories contingent on what parent category was picked - I want it to slide toggle to show sub categories. I'm new to JS/Jquery. Any ideas on what is wrong with my syntax??

function create_first() {

    var first_level = "<div id='colOne'>";

    {% for each in by_subject_level1 %}
        first_level+= "{{each.name1}}<br />";
    {% endfor %}; 

    $(#filtered_courses).append(first_level);   

}

Answer 1

Let's see.. to fix your immediate problems:

• $(#filtered_courses).append(first_level); -> $("#filtered_courses").append(first_level);
• you don't need the semicolon after the {% endfor %} , but I'm pretty sure that isn't causing any issues
• don't forget to close the first_level content, by adding "</div>" before appending it to your filtered_courses div

One suggestion: string concatenation -- meh (depending on the size of your by_subject_level1 list). instead of +=, create an array ([]), push your content, and then join using

ie

first_level = [];
first_level.push("{{each.name1}}");
html = "<div class='colOne'>" + first_level.join("<br/>") + "</div>"; // if you need <br/> before the div, add it