разместить форму комментирования на той же странице, что и пост в django - PullRequest
Новая
       53

разместить форму комментирования на той же странице, что и пост в django

0 голосов
/ 11 мая 2019

Мне нужна помощь, чтобы разместить форму комментариев для пользователей на той же странице, что и сообщение, в настоящее время у меня есть форма комментариев на другой странице, но мне бы очень хотелось, чтобы пользователи могли оставлять комментарии, как только они закончат читатьпост, прикрепленный ниже, является моим шаблоном для поста `

<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>

, и это мое представление add_comment 

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)

, и это мое forms.py 

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

1 Ответ

0 голосов
/ 11 мая 2019

Неясно на 100%, с какой проблемой вы столкнулись, но если вы хотите добавить комментарии к какому-либо элементу (статье, блогу), я бы, скорее всего, обработал это с помощью сообщения ajax.

1) место обычнополя рядом со статьей (комментарий, кнопка публикации)

2) добавить событие к кнопке (onclick): 

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

3) AddComment должен принимать как минимум два параметра: идентификаторэкземпляра, относящегося к тексту комментария

4), в javascript (jquery) вы обрабатываете сообщение ajax: 

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) создаете методы сохранения в вашем представлении

6) после успешного сохранения передайте данные в один из ваших html-тегов с помощью функции addcommentDetailSuccess: 

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

}

Вы также можете добавить правила проверки, сообщения,и т.д.

Удачи!

...