Why does the form not appear on my Django Webpage?

35 views Asked by At

I am trying to display a search form on a Django webpage, I've included the search view function, the search form and DHTML. The form simply will not appear on the page, instead I only see the base.html template.

I have disabled all CSS that could interfere and verified that base.html does not effect it. Additionally I've verified that the form is correctly passing to the view function and html. Help would really be appreciated as I feel my head is about to explode.

HTML

{% extends 'base.html' %}

{%block title%}
    {% if form.is_valid and search_text%}
        Search Results for "{{ search_text }}"
    {% else %}
        UrMix Search
    {% endif %}
{% endblock %}
{% block content %}
<h2> Search for Songs </h2>
<form method="GET" action="{% url 'song_search' %}">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Search</button>
</form>
{% if form.is_valid and search_text %}
<h3> Search results for <em> {{search_text}}</em></h3>
<ul class = "list-group">
    {% for song in songs%}
    <li class="list-group-item">
        <span class="text-info">Name: </span> <a href="{%url 'song_detail' song.pk%}"> {{song}}</a>
        <br/>
    </li>
    {% empty %}
        <li class = "list-group-item">No result</li>
    {% endfor %}
</ul>
{% endif %}
{% endblock %}

Search View

def song_search(request):
    search_text = request.GET.get("search", "")
    form = SearchForm(request.GET or None)
    songs = set()

    if form.is_valid() and form.cleaned_data["search"]:
        search = form.cleaned_data['search']
        search_in = form.cleaned_data.get("search_in") or "name"

        if search_in == "name":
            songs = Song.objects.filter(name__icontains=search)

        elif search_in == "album":
            song_al = Song.objects.filter(song_album__icontains=search)

            for song in song_al:
                related_songs = song.song_album.all()
                songs.add(related_songs)

        elif search_in == "genre":
            song_g = Song.objects.filter(song_genre__icontains=search)

            for song in song_g:
                related_songs = song.song_genre.all()
                songs.add(related_songs)

        elif search_in == "artist":
            song_art = Song.objects.filter(song_aritst__icontains=search)

            for song in song_art:
                related_songs = song.song_artist.all()
                songs.add(related_songs)
    print(form.as_p())
    return render(request, "song_search.html", {"form": form, "search_text": search_text, "songs": songs})

Form Code

class SearchForm(forms.Form):
    search = forms.CharField(required=False, min_length=1)
    search_in = forms.ChoiceField(required=False,
                                  choices=(
                                      ("name", "Name"),
                                      ("album", "Album"),
                                      ("genre", "Genre"),
                                      ("artist", "Artist")
                                  ))

base.html

<!doctype html>

{% load static %}
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title> UrMix </title>
    <link rel = "stylesheet" href = "{% static 'css/main.css' %}">
  </head>

  <body>
    <nav class = "navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
      <a class = "navbar-brand"> <img src = "{% static 'images/urmixlogo.png'%}"></a>

      <button class = "navbar-toggler" type = "button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">
        <span class = "navbar-toggler-icon"></span>
      </button>
      <div class = "collapse navbar-collapse" id="navbarSupportedContent">
        <ul class = "navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="/UrMix/home">Home<span class="sr-only">(current)</span></a>
            <form action="{%url 'song_search' %}" class="form-inline my2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search" value="{{search_text}}" minlength="1">
              <button class="btn btn-outline-success my2 my-sm-0" type="submit">Search</button>
            </form>
          </li>


        </ul>

      </div>
    </nav>
  </body>
</html>

1

There are 1 answers

0
John Gordon On

base.html does not define any page blocks.

So when the view html has {%block title%} and {% block content %}, the content in those blocks has nowhere to go.

Your base.html template needs to define those blocks.

Maybe you should look at a django template tutorial?