putting commenting form on the same page as the post in django

Question

I need help putting the commenting form for users on the same page as the post, currently i have the commenting form on another page but i'd really like the users to be able to post comments as soon as they are done reading the post, attached below is my template for the post `

<section class="main">
        <div class="container">
            <div class="row">
                <section class="posts-wrapper col-sm-12 col-md-8">
                    <div class="posts">
                        <p class="movie-details"><a href="" class="date">{{articles.postdate}}</a> | {% for a in articles.category.all %}<a href="{{a.get_absoulte_url}}" class="genre">{{a}}, </a>{% endfor %}  </p>
                        <p class="movie-details pt-0"><b>Staring : </b> {% for c in articles.star.all %}<a href="{{c.get_absoulte_url}}" class="genre">{{c}}, </a>{% endfor %}</p>
                            <p class="movie-details pt-0"><b>Directors : </b> {% for d in articles.director.all %}<a href="{{d.get_absoulte_url}}" class="genre">{{d}}, </a>{% endfor %}</p>
                        <h3 class="title my-3">{{articles.title}}</h3>
                        <p><b>Released:</b> {{articles.releasedate}}</p>
                        <p><b>Seen:</b> {{articles.dateseen}}</p>
                        <p class="text">{{articles.body | safe}}</p>
                    </div><hr>
                    <div class="comments-wrapper">
                        <h2 class="mt-5"><a href="{% url 'add_comment' slug=articles.slug %}">Leave a Comment</a></h2>
                        <p>Total number of comments <span class="text-danger">{{articles.comments.count}}</span></p>
                        <form action="" method="POST">
                                <button type="submit">Submit</button>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <input type="text" class="form-control" placeholder="username">
                                </div>
                                <div class="form-group col-md-6">
                                    <input type="email" class="form-control" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group">
                                <textarea name="" class="form-control" id="" rows="10"></textarea>
                            </div>
                        </form>
                        <hr>
                        <h2 class="mb-4">COMMENTS</h2>
                        {% for comment in articles.comments.all %}
                            <div class="comments py-2 my-3">
                                <div class="comments-img-wrapper">
                                    <img src="" class="comment-image" alt="">
                                </div>
                                <div class="comments-details">
                                    <h5 class="comment-user-name">{{comment.user}} <span class="float-right date">{{comment.created}}</span></h5>
                                    <p>{{comment.body}}</p>
                                </div>
                            </div>
                        {% empty %}
                            <p>there are no comments</p>
                        {% endfor %}
                    </div>
                </section>
                <section class="side-bar col-sm-12 col-md-4">
                    <div class="search-bar-mini p-3 my-2">
                        <h3>Search</h3>
                        <form action="">
                            <input type="text" class="form-control" placeholder="SEARCH">
                        </form>
                    </div>
                    <div class="search-bar-mini p-3 my-3">
                        <h3>Info</h3>
                        <p>This is a place where I’ll be putting quick reviews of movies I’ve seen</p>
                    </div>
                    <div class="search-bar-mini p-3 my-3">
                        <h3>Follow on social media</h3>
                        <p><a href="" class="mx-2"><i class="fa fa-twitter-square" style="font-size: 25px;"></i></a> <a href="" class="mx-2"><i class="fa fa-instagram" style="font-size: 25px;"></i></a></p>
                    </div>
                    {% for ads in adverts %}
                        <a href="{{ads.link}}" target="_blank">
                            <div class="search-bar-mini p-3 my-3">
                                <img src="{{ads.image.url}}" alt="">
                            </div>
                        </a>
                    {% empty %}
                        <p>no ads</p>
                    {% endfor %}
                </section>
            </div>
        </div>
    </section>

and this is my add_comment view

def add_comment(request, slug):
    post = get_object_or_404(Article, slug=slug)
    if request.method == 'POST':
        form =  CommentForm(request.POST)
        if form.is_valid():
            comment = form.save(commit=False)
            comment.post = post
            comment.save()
            return redirect('details', slug=post.slug)
    else:
        form = CommentForm()
    template = 'articles/add-comment.html'
    context = {'form':form}
    return render(request, template, context)

and this is my forms.py

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ('user', 'email', 'body')

add `name` in your input fields like- ``, your question is unclear about what problem are you facing in that code ? — Pankaj Sharma, May 11 '19 at 11:54
i want to print the comment form on the same page i have my post details on — Dafom Chollom, May 12 '19 at 08:07

score 0 · Answer 1 · answered May 11 '19 at 13:17

It's not 100% clear what problem you are facing, but if you want to add comments to any item (article,blog), I would most likely handle it with ajax post.

1) place usual fields next to the article (comment, post button)

2) add a event to the button (onclick):

onclick="AddComment(blog.id, comment.value)"

3) AddComment should take at least two parameters: the id of the instance relating to, and the text of the comment

4) in javascript (jquery) you handle the ajax post:

function AddComment(blog_id, comment){
// validation checks
    $.ajax({
        type: "POST",
        url: "/blog/add_comment/",
        data: {
            'blog_id' : blog_id,
            'comment' : comment,
            'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
        },
        success: addcommentDetailSuccess,
        dataType: 'html'
    });

5) create the save methods in your view

6) after successful save pass the data to one of your html tag with addcommentDetailSuccess function:

function addcommentDetailSuccess(data, textStatus, jqXHR){
$('#comments_tbody').html(data);

}

You may also want to add validation rules, messages, etc.

Good luck!

putting commenting form on the same page as the post in django

1 Answers1