Django page navigation- home list not visible - django

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'),
]
enter code here
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">
{{ note.title }}
</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">
{{ note.title }}
</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">
{{ note.title }}
</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>