Django page navigation- home list not visible

Question

I am super new to Dango; pardon me for a rookie question :)

I am learning Django by creating a "Note taking app". This is how the application home page looks.

When I click on any of the notes from the note list, it opens the details on the right-side page. But the problem is it wipes-out the left-hand side note list. To reload the list I need to click on the Home link again. The expected behavior is, it should retain the note-list on the left side as well as show the details on the right frame.

urls.py

from django.urls import path
from .views import NoteListView, NoteDetailView, NoteCreateView, NoteUpdateView, NoteDeleteView
from . import views

urlpatterns = [
    path('', NoteListView.as_view(), name='lekha-home'),
    path('note/<int:pk>/', NoteDetailView.as_view(), name='note-detail'),
    path('note/new/', NoteCreateView.as_view(), name='note-create'),
    path('note/<int:pk>/update', NoteUpdateView.as_view(), name='note-update'),
    path('note/<int:pk>/delete', NoteDeleteView.as_view(), name='note-delete'),
    path('about/', views.about, name='lekha-about'),
]

views.py

class NoteListView(ListView):
    model = Note
    template_name = 'lekha/home.html'
    context_object_name = 'notes'
    ordering = ['-date_created']


class NoteDetailView(DetailView):
    model = Note
    # success_url = 'lekha/note_detail.html'

class NoteCreateView(LoginRequiredMixin, CreateView):
    model = Note
    fields = ['title', 'content']

    def form_valid(self, form):
        form.instance.author = self.request.user
        return super().form_valid(form)

home.html

{% extends "lekha/base.html" %}
{% block content %}
    {% for note in notes %}

<div class="list-group">
  <a href="{% url 'note-detail' note.id %}" class="list-group-item list-group-item-action">{{ note.title }}</a>
</div>

    {% endfor %}
{% endblock content %}

note_detail.html

{% extends "lekha/base.html" %}
{% block content2 %}
    <article class="media content-section">
      <div class="media-body">
        <div class="article-metadata">
          <a class="mr-8" href="#">{{ object.author }}</a>
          <small class="text-muted">{{ object.date_created|date:"F d, Y" }}</small>
            {% if object.author == user %}
                <a class="btn float-right btn-secondary ml-1 btn-sm" href="{% url 'note-update' object.id %} ">Update</a>
                <a class="btn float-right btn-danger ml-1 btn-sm" href="{% url 'note-delete' object.id %} ">Delete</a>
            {% endif %}
        </div>
        <h4 class="article-title">{{ object.title }}</h4>
          <hr>
        <p class="article-content">{{ object.content }}</p>
      </div>
    </article>
{% endblock content2 %}

And this is how I am calling it in base.html

   <main role="main" class="container-fluid px-2">
      <div class="row">
        <div class="col-md-3">
          <div class="content-section">
            <h4>Notes</h4>
                {% block content %}{% endblock %}
         </div>
        </div>
        <div class="col-md-8">
            {% block content2 %}{% endblock %}
        </div>
      </div>
    </main>

Sorry for the detailed post. I would appreciate any pointers. Thanks!

Answer 1

Welcome to Django!

Your template note_detail.html extends base.html, which doesn't contain the HTML for the list of notes, and note_detail.html doesn't add the list, so that's why it's not showing up - you haven't added it!

To do this, you need the same {% block content %} from home.html in note_detail.html, and you also need to manually pass a notes context variable to the template. You get that for free with the ListView class.

First, the change to the template:

note_detail.html

{% extends "lekha/base.html" %}

{% block content %}
  {% for note in notes %}

  <div class="list-group">
    <a href="{% url 'note-detail' note.id %}" class="list-group-item list-group-item-action">{{ note.title }}</a>
  </div>

  {% endfor %}
{% endblock content %}
{% block content2 %}
    <article class="media content-section">
      <div class="media-body">
        <div class="article-metadata">
          <a class="mr-8" href="#">{{ object.author }}</a>
          <small class="text-muted">{{ object.date_created|date:"F d, Y" }}</small>
            {% if object.author == user %}
                <a class="btn float-right btn-secondary ml-1 btn-sm" href="{% url 'note-update' object.id %} ">Update</a>
                <a class="btn float-right btn-danger ml-1 btn-sm" href="{% url 'note-delete' object.id %} ">Delete</a>
            {% endif %}
        </div>
        <h4 class="article-title">{{ object.title }}</h4>
          <hr>
        <p class="article-content">{{ object.content }}</p>
      </div>
    </article>
{% endblock content2 %}

And the change to the view:

views.py

class NoteListView(ListView):
    model = Note
    template_name = 'lekha/home.html'
    context_object_name = 'notes'
    ordering = ['-date_created']


class NoteDetailView(DetailView):
    model = Note

    def get_context_data(self):
        data = super().get_context_data
        data['notes'] = Note.objects.all().order_by('-date_created')

One last tip: to keep your HTML templates "DRY," you should really extract the list of notes into a separate html template (often called a partial) that you can plug into multiple other templates. Your template setup would look like this:

partials/all_notes.html {% for note in notes %}

<div class="list-group">
  <a href="{% url 'note-detail' note.id %}" class="list-group-item list-group-item-action">{{ note.title }}</a>
</div>

{% endfor %}

home.html

{% extends "lekha/base.html" %}

{% block content %}
{% include 'lekha/partials/all_notes.html' %}
{% endblock content %}

note_detail.html

{% extends "lekha/base.html" %}

{% block content %}
{% include 'lekha/partials/all_notes.html' %}
{% endblock content %}

{% block content2 %}
    <article class="media content-section">
      <div class="media-body">
        <div class="article-metadata">
          <a class="mr-8" href="#">{{ object.author }}</a>
          <small class="text-muted">{{ object.date_created|date:"F d, Y" }}</small>
            {% if object.author == user %}
                <a class="btn float-right btn-secondary ml-1 btn-sm" href="{% url 'note-update' object.id %} ">Update</a>
                <a class="btn float-right btn-danger ml-1 btn-sm" href="{% url 'note-delete' object.id %} ">Delete</a>
            {% endif %}
        </div>
        <h4 class="article-title">{{ object.title }}</h4>
          <hr>
        <p class="article-content">{{ object.content }}</p>
      </div>
    </article>
{% endblock content2 %}

base.html

   <main role="main" class="container-fluid px-2">
      <div class="row">
        <div class="col-md-3">
          <div class="content-section">
            <h4>Notes</h4>
                {% block content %}{% endblock %}
         </div>
        </div>
        <div class="col-md-8">
            {% block content2 %}{% endblock %}
        </div>
      </div>
    </main>