Django & HTMX - after GET show only section of html template - django

Question

I want to create an instagram clone. I created a post.html which includes a post-card.html file for all posts and a post-filter.html to filter the posts.
<!-- simple post.html view -->
<div>
<div>
{% include '_includes/bars/post-filter.html' %}
</div>
<div id="more-posts-wrapper">
{% for post in posts %}
{% include '_includes/cards/post-card.html' %}
{% endfor %}
</div>
</div>
Now I added htmx to load more posts after clicking load more button. I tried to load the new posts after the existing one inside the div with id=more-posts-wrapper:
<div>
<div>
{% include '_includes/bars/post-filter.html' %}
</div>
<div hx-get="?page={{ page_obj.next_page_number }}"
hx-trigger="click"
hx-swap="innerHTML"
hx-target="#more-posts-wrapper">
<p>LOAD MORE</p>
</div>
<div id="more-posts-wrapper">
{% for post in posts %}
{% include '_includes/cards/post-card.html' %}
{% endfor %}
</div>
</div>
Unfortunately, if I press the button, the correct reponse post gets delivered but the whole post.html document gets loaded after the div with id=more-posts-wrapper. I only want to load the post-card.html file and not reload the post-filter.html file.
My views.py
class MemesView(ListView):
model = Post
template_name = 'memes.html'
context_object_name = 'posts'
paginate_by = 1
Does anyone know what I can do?

Answer 1

With HTMX we have two types of request:
Full page: when user loads the page we want to show the full template with the filters and the content as well.
Partial page: after the first load, we want to load only the content part via HTMX and update the corresponding part of the page.
We have to structure our templates accordingly, so we can reuse them in these two request.
The full page's template post_page.html:
<div>
<div>
{% include '_includes/bars/post-filter.html' %}
</div>
<div id="more-posts-wrapper">
{% include 'posts_partial.html' %}
</div>
</div>
And the posts_partial.html partial template where we put everything we want to load via HTMX:
<div hx-get="?page={{ page_obj.next_page_number }}"
hx-trigger="click"
hx-swap="innerHTML"
hx-push-url="true"
hx-target="#more-posts-wrapper">
<p>LOAD MORE</p>
</div>
<div id="more-posts-wrapper">
{% for post in posts %}
{% include '_includes/cards/post-card.html' %}
{% endfor %}
</div>
In this template we have the post cards for the selected page, furthermore we have to place our 'Load more' button here as well, because we have to update the page_obj.next_page_number value after each request at the button.
In the view function we can check for HX-Request: true header in order to detect a HTMX request. If the request was made by HTMX, we set the partial template in the get_template_names() method, otherwise we use the full page template.
class MemesView(ListView):
model = Post
context_object_name = 'posts'
paginate_by = 1
def get_template_names(self):
is_htmx = self.request.headers.get('HX-Request') == 'true'
return 'posts_partial.html' if is_htmx else 'post_page.html'
Furthermore I added the hx-push-url="true" so HTMX will update the page number in the URL, so the user can refresh and receive the correct page after a few HTMX request.