I'm implemeneting a comment system where a users can reply to each others comments. To do this I'm using MPTT and following along with this very good tutorial (https://www.youtube.com/watch?v=j7vj4k13xDY&list=WL&index=5).
The problem I've come across is that I want to load the replies to comments dynamically, when someone presses a button, rather than load all the replies to every comment when the page first loads. The way the tutorial shows how to load comment replies is like so:
{% if comments %}
{% load mptt_tags %}
{% recursetree comments %}
#Use comment objects here, e.g {{ comment.description }}
{% if not node.is_leaf_node %} #Displays the child elements
<div class="pl-2">{{ children }}</div>
{% endif %}
{% endrecursetree %}
This works fine when I was loading all the comments and replies at once, however as I'm now moving to loading the replies when a user clicks a button on the parent comment I'm having problems.
I'm trying to use HTMX to load in the replies once this button is clicked but am having trouble accessing all the children. It's hard to figure out what to do as it just magically "works" with using the {{ children }} variable above.
When I try and access the {{ children }} variable in my new html file (load_replies_partial) nothing is displayed, code here:
{% load mptt_tags %}
{% recursetree comments %}
{% if not node.is_leaf_node %}
<div>{{ node.body }}</div>
<div class="pl-2">{{ children }}</div>
{% endif %}
{% endrecursetree %}
I have managed to access the first level of children (replies to the parent comment) but not the lower level children through the below:
{% load mptt_tags %}
{% recursetree comments %}
{% if not node.is_leaf_node %}
{% for child in node.get_children %}
<div class="pl-2">{{ child.author }}</div>
<div class="pl-2">{{ child.description }}</div>
{% endfor %}
{% endif %}
{% endrecursetree %}
How do I recreate just using the {{ children }} variable to access all information of the child nodes?
My views.py function:
def LoadRepliesView(request, id, pk, *args, **kwargs):
if request.method == "GET":
post = Post.objects.get(pk=pk)
post_comments = post.comments.all()
context = {
'comments': post_comments,
'nodes': id,
'post': pk
}
return render(request, "load_replies_partial.html", context)