Django 1.10 드롭 다운 메뉴를 사용하여 쿼리 필터링

Question

나는 많은 사진과 함께 찍은 데이터베이스가있는 데이터베이스를 가지고 있습니다.이 사이트의 사진 앨범 용입니다. 현재 한 페이지에 모든 사진이 있습니다. 나는 이것을 좋아한다. 이제 특정 국가 또는 도시의 모든 사진을 검색 할 수 있기를 원합니다. 내 디자인 위에는 두 개의 버튼 (국가 별 필터, 도시 별 필터)이 필요하며 필터가 사용되지 않을 때 아래에 표시된 모든 사진이 데이터베이스에 표시됩니다. 이 단추를 모든 국가와 도시의 드롭 다운 목록으로 지정합니다. 사용자가 국가 버튼을 클릭하면 드롭 다운이 호출됩니다 (부트 스트랩 사용). 그런 다음 원하는 국가를 클릭하고 도시에 따라 모든 사진을 볼 수 있습니다. 도시에 대한 드롭 다운을 클릭하면 해당 도시의 모든 사진이 호출됩니다. 국가를 선택한 경우 도시 드롭 다운은 해당 국가의 도시 만 표시합니다. 바로 지금, 나는 이것을하는 방법을 모른다. 나는 드롭 다운을 채울 수있다 - 그러나 나는 모든 사진 국가를 얻는다 - 반복을 의미한다. 어떻게해야합니까?

def photo_album(request): 
    queryset_list = Pictures.objects.all() 
    query = request.GET.get("q") 
    if query: 
     queryset_list = queryset_list.filter(
      Q(pictures__icontains=query) | 
      Q(picture_name__icontains=query) | 
      Q(country__icontains=query) | 
      Q(city__icontains=query) 
     ).distinct() 

    paginator = Paginator(queryset_list, 20) 
    page_request_var = "page" 
    page = request.GET.get(page_request_var) 
    try: 
     queryset = paginator.page(page) 
    except PageNotAnInteger: 
     # If page is not an integer, deliver first page. 
     queryset = paginator.page(1) 
    except EmptyPage: 
     # If page is out of range (e.g. 9999), deliver last page of results. 
     queryset = paginator.page(paginator.num_pages) 

    context = { 
     "object_list": queryset, 
     "title": "List", 
     "page_request_var": page_request_var, 
    } 
    return render(request, "in_country_pics/photo_album.html", context) 

내 HTML :

여기 내 views.py 인 HTML의

<div class="container"> 
    <div class="photo-title"> 
     <h1>Welcome to Our Photo Album</h1> 
    </div> 
    <div class="col-sm-12 photoalbum-buttons"> 
     <form method="GET" action="" class="row"> 
      <div class="col-sm-6"> 
       <div class="input-group"> 
        <input class="form-control" type="text" name="q" placeholder="Search Posts" value="{{ request.GET.q }}"/> 
        <span class="input-group-btn"> 
         <button class="btn btn-default" type="submit">Search <i class="fa fa-search"></i></button> 
        </span> 
       </div> 
      </div> 
     </form> 

     <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"> 
       {% for obj in object_list %} 
        <li ><a href="#">{{ obj.country }}</a></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><a href="#">{{ obj.city }}</a></li> 
       {% endfor %} 
      </ul> 
     </div> 
    </div> 
    <p id="photo-separator">______________________________________________</p> 

    <div class="row photo-post"> 
     {% for obj in object_list %} 
      <div class="col-sm-3"> 
       <div class="thumbnail"> 
        <img src="{{ obj.pictures.url }}" class="img-responsive"/> 
        <div class="caption photo-description"> 
         <p class="photo-location">{{obj.city}}, {{obj.country}}</p> 
         <p class="photo-time">Taken: Aug 04, 2016</p> 
         <p><a href="" class="btn btn-primary" type="button">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> 

{% endblock %} 

, 나는 처음 검색 창 작동하지만, 텍스트로합니다. 아래에 간단한 부트 스트랩 드롭 다운 목록이 있습니다. 아약스 또는 jquery를 사용하는 것이 가장 좋습니다.

Answer 1

이렇게하려면 Ajax가 필요합니다.

this 자습서를 참조하십시오.

당신은 당신이 토큰 관련 장고 오류가 발생합니다 양식을 제출하면, 그렇지 않으면 (이 튜토리얼에있는)을 csrf_token와 함께 당신을 도울 수있는 script을 다운로드해야합니다.

이

$.ajax({ 
     url: "some path/", // endpoint 

같은 아약스 URL로 호출 당신이 당신의 urls.py에 파일에 해당 URL을 만들어야합니다 :

urlpatterns = [ 
    url(r'^path/$', views.your_view_name), 
] 

뷰를 호출 할 수 있습니다이 방법을 (또는이 경우 함수 만) 필요한 정보를 템플릿에 보냅니다.

나중에, JQuery와 함께 당신은 단지 .html 중에서으로 .Append로 변경, 당신은 또한 elementets을 추가 할 수 있습니다이

$('#your_element_id').html("<p>your updated code goes here</p>"); 

같은 id를 뭔가로 요소의 HTML을 변경할 수 있습니다. 차이점은 .html은 가지고있는 코드로 바꾸고 .apend는 그 코드를 가지고있는 코드 만 추가한다는 것입니다.