CODEWITHSUNDEEP
javascriptpythonhtmldjangotemplates
filipyoo
filipyoo

Reputation: 357

Django : combine variable and HTML id in template

I'm looking for a way to "concatene" a django object list (get via the get_queryset in the views.py) with a Javascript variable. then concatene them to a field of a model object.

My model is a blog post, and contains the post_title field (a charfield). In my index.html, I have a pager button with id="1" or id="2" corresponding to the index of the page and a onClick="displayPostContentOnPageButtonCliked(this.id)" attribute.

My index.html retrieve all post objects in a context_object_name called all_post_by_date. In my index.html, I want to display on alert dialog the post title corresponding to the button clicked, something like:

<script>
    function displayPostContentOnPageButtonCliked(page_button_clicked_id){
        var all_posts_by_date = "{{all_posts_by_date.page_button_clicked_id.post_title}}";
        alert(all_posts_by_date);
    }
</script>

But this doesn't work. I tried to add filter or create my own filter (called get_index, but only manage to get like: all_posts_by_date|get_index:page_button_clicked_id and not be able to combine the .post_title part. My question is: how to get {{all_posts_by_date.page_button_clicked_id.post_title}} to work, and alert "Title of post 3" when the button 3 is clicked ? Thank u !

Upvotes: 3

Views: 2716

Answers (1)

2ps
2ps

Reputation: 15926

Two solutions for you: (1) send in the data you want to your JS function in the call to the JS function.

<script>
    function showPostTitle(post_title){
        alert(post_title);
    }
</script>

. . .
{% for x in all_posts_by_date %}
<div id='blog-post-{{ x.id }}' on-click="showPostTitle('{{ x.post_title }}')">
. . . 
{% endfor %}

Or you can just serialize the data yourself for later use:

<script>
    var titles = [];
{% for x in all_posts_by_date %}
    titles.push('{{ x.post_title }}');
{% endfor %}
    function displayPostContentOnPageButtonCliked(nId) {
        var title = titles[nId - 1];
        alert(title);
    }
</script>

Upvotes: 3

Related Questions