title: django templatetags for jquery to get item from html templatetag
body: <p>I have photo album for this site I'm working on and am using jquery to filter by country/city. If I hardcode in each country into the jquery I get my desired results. I obviously do not want to do this. Below is what I mean by that.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="photo-title"&gt;
          &lt;h1&gt;Welcome to Our Photo Album&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-12 photoalbum-buttons"&gt;
  
          &lt;div class="dropdown form-actions"&gt;
              &lt;button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown"&gt;
                  &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                  By Country
              &lt;/button&gt;
              &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;button id="all_countries" value="all_countries"&gt;All Countries&lt;/button&gt;&lt;/li&gt;
                  {% for obj in object_list %}
                      &lt;li&gt;&lt;button id="{{ obj.country }}" value="{{ obj.country }}"&gt;{{ obj.country }}&lt;/button&gt;&lt;/li&gt;
                  {% endfor %}
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="dropdown form-actions"&gt;
              &lt;button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown"&gt;
                  &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                  By City
              &lt;/button&gt;
              &lt;ul class="dropdown-menu"&gt;
                  {% for obj in object_list %}
                      &lt;li&gt;&lt;button id="{{ obj.city }}" value="{{ obj.city }}"&gt;{{ obj.city }}&lt;/button&gt;&lt;/li&gt;
                  {% endfor %}
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div id="all-photos-div"&gt;
          &lt;div class="dropdown form-actions hidden-div"&gt;
              &lt;button id="all_photos" class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown"&gt;
                  &lt;i class="fa fa-search"&gt;&lt;/i&gt;
                  All Photos
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;p id="photo-separator"&gt;______________________________________________&lt;/p&gt;
  
      &lt;div class="row"&gt;
         &lt;div class="row photo-post"&gt;
              {% for obj in object_list %}
                  &lt;div class="col-sm-3 country_{{obj.slug}}"&gt;
                      &lt;div class="thumbnail"&gt;
                          &lt;a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="{{ obj.city }}, {{ obj.country }} {% if obj.picture_taken %}| {{ obj.picture_taken }}{% else %}{% endif %}" data-caption="{% if obj.picture_description %}{{ obj.picture_description }}{% else %}{% endif %}" data-image="{{ obj.pictures.url }}" data-target="#image-gallery"&gt;
                              &lt;img class="img-responsive pic-height" src="{{ obj.pictures.url }}" alt="Short alt text"&gt;
                          &lt;/a&gt;
                          &lt;div class="caption photo-description"&gt;
                              &lt;p class="photo-location"&gt;{{obj.city}}, {{obj.country}}&lt;/p&gt;
                              &lt;p class="photo-time"&gt;{% if obj.picture_taken %}{{ obj.picture_taken }}{% else %}{% endif %}&lt;/p&gt;
                               &lt;p&gt;
                                   &lt;a class="thumbnail btn btn-primary" href="#" type="button" data-image-id="" data-toggle="modal" data-title="{{ obj.city }}, {{ obj.country }} {% if obj.picture_taken %}| {{ obj.picture_taken }}{% else %}{% endif %}" data-caption="{% if obj.picture_description %}{{ obj.picture_description }}{% else %}{% endif %}" data-image="{{ obj.pictures.url }}" data-target="#image-gallery"&gt;
                                      View
                                   &lt;/a&gt;
                               &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  {% if forloop.counter|divisibleby:4 %}
                      &lt;div class='col-sm-12'&gt;&lt;hr/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;/div&gt;&lt;div class='row'&gt;
                  {% endif %}
              {% endfor %}
          &lt;/div&gt;
      &lt;/div&gt;
  ...
  </code></pre>
  
  <p>And my jquery to filter:</p>
  
  <pre><code>$(function(){
      $("div.dropdown.form-actions &gt; ul.dropdown-menu &gt; li &gt; button#Greece").click(function(){
          $("#all-photos-div").show() &amp; $("#all_photos").show();
          $(".country_Greece").show();
          $(".country_Germany").hide();
          $(".country_Scotland").hide();
          $(".country_united_states").hide();
      });
  });
  $(function(){
      $("div.dropdown.form-actions &gt; ul.dropdown-menu &gt; li &gt; button#Germany").click(function(){
          $("#all-photos-div").show() &amp; $("#all_photos").show();
          $(".country_Germany").show();
          $(".country_Greece").hide();
          $(".country_Scotland").hide();
          $(".country_united_states").hide();
      });
  });
  $(function(){
      $("div.dropdown.form-actions &gt; ul.dropdown-menu &gt; li &gt; button#Scotland").click(function(){
          $("#all-photos-div").show() &amp; $("#all_photos").show();
          $(".country_scotland").show();
          $(".country_greece").hide();
          $(".country_germany").hide();
          $(".country_united_states").hide();
      });
  });
  $(function(){
      $("div.dropdown.form-actions &gt; ul.dropdown-menu &gt; li &gt; button#Scotland").click(function(){
          $("#all-photos-div").show() &amp; $("#all_photos").show();
          $(".country_scotland").show();
          $(".country_greece").hide();
          $(".country_germany").hide();
          $(".country_united_states").hide();
      });
  });
  $(function(){
      $("#all_photos").click(function(){
          $("#all-photos-div").hide() &amp; $("#all_photos").hide();
          $(".country_greece").show();
          $(".country_germany").show();
          $(".country_scotland").show();
          $(".country_united_states").show();
      });
  });
  $(function(){
      $("#all_countries").click(function(){
          $("#all-photos-div").hide() &amp; $("#all_photos").hide();
          $(".country_greece").show();
          $(".country_germany").show();
          $(".country_scotland").show();
          $(".country_united_states").show();
      });
  });
  </code></pre>
  
  <p>So, I am using templatetags in the html to get the Country names and city names (though I am getting duplicates, which I'll correct after this issue), but am hardcoding the country names(slugs) into the jquery. I have tried using templatetags in the jquery, however this doesnt seem to work. </p>
  
  <p>My question: How can I capture the filter button's value in the <code>$("button#{{ country }}").click(function()</code>... then also show all pictures with that country while hiding the others? I'm going to stick with jquery or js, and not use ajax. Mainly because I dont have enough time to learn ajax, regardless of how simple I hear. I'll look into that next week.</p>