Robby Robby - 1 month ago 7
HTML Question

django templatetags for jquery to get item from html templatetag

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.

<div class="container">
<div class="photo-title">
<h1>Welcome to Our Photo Album</h1>
</div>
<div class="col-sm-12 photoalbum-buttons">

<div class="dropdown form-actions">
<button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-search"></i>
By Country
</button>
<ul class="dropdown-menu">
<li><button id="all_countries" value="all_countries">All Countries</button></li>
{% for obj in object_list %}
<li><button id="{{ obj.country }}" value="{{ obj.country }}">{{ obj.country }}</button></li>
{% endfor %}
</ul>
</div>

<div class="dropdown form-actions">
<button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-search"></i>
By City
</button>
<ul class="dropdown-menu">
{% for obj in object_list %}
<li><button id="{{ obj.city }}" value="{{ obj.city }}">{{ obj.city }}</button></li>
{% endfor %}
</ul>
</div>

</div>

<div id="all-photos-div">
<div class="dropdown form-actions hidden-div">
<button id="all_photos" class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
<i class="fa fa-search"></i>
All Photos
</button>
</div>
</div>

<p id="photo-separator">______________________________________________</p>

<div class="row">
<div class="row photo-post">
{% for obj in object_list %}
<div class="col-sm-3 country_{{obj.slug}}">
<div class="thumbnail">
<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">
<img class="img-responsive pic-height" src="{{ obj.pictures.url }}" alt="Short alt text">
</a>
<div class="caption photo-description">
<p class="photo-location">{{obj.city}}, {{obj.country}}</p>
<p class="photo-time">{% if obj.picture_taken %}{{ obj.picture_taken }}{% else %}{% endif %}</p>
<p>
<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">
View
</a>
</p>
</div>
</div>
</div>
{% if forloop.counter|divisibleby:4 %}
<div class='col-sm-12'><hr/></div></div><div></div><div class='row'>
{% endif %}
{% endfor %}
</div>
</div>
...


And my jquery to filter:

$(function(){
$("div.dropdown.form-actions > ul.dropdown-menu > li > button#Greece").click(function(){
$("#all-photos-div").show() & $("#all_photos").show();
$(".country_Greece").show();
$(".country_Germany").hide();
$(".country_Scotland").hide();
$(".country_united_states").hide();
});
});
$(function(){
$("div.dropdown.form-actions > ul.dropdown-menu > li > button#Germany").click(function(){
$("#all-photos-div").show() & $("#all_photos").show();
$(".country_Germany").show();
$(".country_Greece").hide();
$(".country_Scotland").hide();
$(".country_united_states").hide();
});
});
$(function(){
$("div.dropdown.form-actions > ul.dropdown-menu > li > button#Scotland").click(function(){
$("#all-photos-div").show() & $("#all_photos").show();
$(".country_scotland").show();
$(".country_greece").hide();
$(".country_germany").hide();
$(".country_united_states").hide();
});
});
$(function(){
$("div.dropdown.form-actions > ul.dropdown-menu > li > button#Scotland").click(function(){
$("#all-photos-div").show() & $("#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() & $("#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() & $("#all_photos").hide();
$(".country_greece").show();
$(".country_germany").show();
$(".country_scotland").show();
$(".country_united_states").show();
});
});


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.

My question: How can I capture the filter button's value in the
$("button#{{ country }}").click(function()
... 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.

Answer

You can use ID tags to identify your image blocks and give them the same class name.

So your HTML could look like this with changes to the button tag and your photo-post class.

<div class="container">
    <div class="photo-title">
        <h1>Welcome to Our Photo Album</h1>
    </div>
    <div class="col-sm-12 photoalbum-buttons">

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By Country
            </button>
            <ul class="dropdown-menu">
                <li><button id="all_countries" value="all_countries">All Countries</button></li>
                {% for obj in object_list %}
                    <li><button id="{{ obj.country }}" value="{{ obj.country }}">{{ obj.country }}</button></li>
                {% endfor %}
            </ul>
        </div>

        <div class="dropdown form-actions">
            <button class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                By City
            </button>
            <ul class="dropdown-menu">
                {% for obj in object_list %}
                    <li><button id="{{ obj.city }}" value="{{ obj.city }}">{{ obj.city }}</button></li>
                {% endfor %}
            </ul>
        </div>

    </div>

    <div id="all-photos-div">
        <div class="dropdown form-actions hidden-div">
            <button id="all_photos" class="btn btn-primary gradient dropdown-toggle" type="button" data-toggle="dropdown">
                <i class="fa fa-search"></i>
                All Photos
            </button>
        </div>
    </div>

    <p id="photo-separator">______________________________________________</p>

    <div class="row">
       <div class="row photo-post">
            {% for obj in object_list %}
                <div class="col-sm-3 country-name-class" id="country_{{obj.slug}}">
                    <div class="thumbnail">
                        <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">
                            <img class="img-responsive pic-height" src="{{ obj.pictures.url }}" alt="Short alt text">
                        </a>
                        <div class="caption photo-description">
                            <p class="photo-location">{{obj.city}}, {{obj.country}}</p>
                            <p class="photo-time">{% if obj.picture_taken %}{{ obj.picture_taken }}{% else %}{% endif %}</p>
                             <p>
                                 <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">
                                    View
                                 </a>
                             </p>
                        </div>
                    </div>
                </div>
                {% if forloop.counter|divisibleby:4 %}
                    <div class='col-sm-12'><hr/></div></div><div></div><div class='row'>
                {% endif %}
            {% endfor %}
        </div>
    </div>
...

Change jquery to this

$(function(){
    $("div.dropdown.form-actions > ul.dropdown-menu > li > button").click(function(){
        var country = $(this).attr(id);
        $(".country-name.class").hide();
        $("#country_"+country).show();
});
Comments