Display a Django form on a page

Question

I am trying to display a comment form on a page. So far I have created a link and I want that each time that link is clicked it displays the form on the same page as where the link is but my problem here is that the link redirects me to another page, which I don't want.

urls.py

url(r'^all/$', 'posts.views.articles'),
        url(r'^get/(?P<post_id>\d+)/$', 'posts.views.article'),
        url(r'^articles/$', 'posts.views.create'),
        url(r'^like/(?P<post_id>\d+)/$', 'posts.views.like_article'),
        url(r'^article/(?P<post_id>\d+)/$', 'posts.views.add_comment'),

views.py

    def articles(request):
        args = {}
        args.update(csrf(request))
        args ['posts'] = post.objects.filter(user = request.user)
        args ['full_name'] = User.objects.get(username = request.user.username)
        args ['form'] = PostForm()



        return render_to_response('articles.html', args)

    def article(request, post_id=1):

        return render(request, 'article.html', 
                      {'post': post.objects.get(id=post_id) })
def add_comment(request, post_id):
    a = post.objects.get(id=post_id)

    if request.method == "POST":
        f = CommentForm(request.POST)
        if f.is_valid():
            c = f.save(commit=False)
            c.pub_date = timezone.now()
            c.article = a
            c.save()

            messages.success(request, "You Comment was added")

            return HttpResponseRedirect('/posts/get/%s' % post_id)

    else:
        f = CommentForm()

    args = {}
    args.update(csrf(request))

    args['post'] = a
    args['form'] = f

    return render_to_response('article.html', args)
    #return HttpResponseRedirect('/posts/all')

article.html

<h2>Comments</h2>
{% for c in post.comment_set.all %}
<p>{{c.name}} : {{c.body}}</p>
{% endfor %}


<form action="/posts/article/{{post.id}}/" method="post">{% csrf_token %}
<ul>
{{form.as_ul}}
</ul>

<input type="submit" name="submit" value="Post Comment">
</form>

{% endblock %}

Answer 1

As from your question you want submit a comment in your article and when you submit the comment you want to redirect it to the same article page... If you are willing to do this then here is example:

First create a comment submit form either using model form or just form:

class CommentCreationForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ('comment_body',) # Set your field for comment

Now pass this form as context in ur article view. Like you did above.

def articles(request):
    args = {}
    args.update(csrf(request))
    args ['posts'] = post.objects.filter(user = request.user)
    args ['full_name'] = User.objects.get(username = request.user.username)
    args ['comment_form'] = CommentCreationForm
    return render_to_response('articles.html', args)

Your article.html

<h2>Comments</h2>
{% for c in post.comment_set.all %}
<p>{{c.name}} : {{c.body}}</p>
{% endfor %}


<form action=""{% url "comment_submit" post.id %}"" method="get">{% csrf_token %}
<ul>
{{form.as_ul}}
</ul>

<input type="submit" name="submit" value="Post Comment">
</form>

{% endblock %}

Catch the url with url(r'^comment/(?P<pk>\d+)/',CommentSubmitView, name="comment_submit"), and write a view.

def AnswerSubmitView(request, pk):


post = Post.objects.get(id=pk) # Get what you have set for your article
comment_text = request.GET.get('comment_body',False)

com = Comment()
post = post # or anything that you have named for your article..
com.comment_body = comment_text
com.save()


return HttpResponseRedirect('/post/%s' % pk) # Your url for your article I guess...

Enjoy...

Answer 2

Use an ajax call to fetch the form from the server without refreshing the page. This requires jQuery. Replace the placeholder selectors I've used with whatever you need for your app. I'd recommend wrapping all of article.html in a div and give that an id tag (and refer to this tag where I use '#form-id' selector below), so you know when the form is already displayed and you can access the entire chunk.

Also note that I'm not entirely sure how to get the html from render_to_response. Just figure out what kind of object is sent back to the ajax caller and how to get the html from that object. Shouldn't be hard.

Adapt and add the following to the bottom of the template containing the link to add the form

<script>
var showForm = function(url) {
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: url,
                success: function(data, status, xhr) {
                    // Not positive if this is how things work with render_to_response
                    // I usually use render_to_string for this and just return pure HTML
                    $('#div-to-display-form-in').append(data);
                },
                error: function(error) {
                    // Handle error
                }
            });
        }

    $(document).ready(function() {

       $('#link-to-show-form').click(function(event) {
            event.preventDefault();

            // The conditionals check if form is already showing
            // If form already showing and link clicked again, form is removed
            if ($('#form-id').length === 0) {
                showForm($(this).attr('href'));
            } else {
                $('#form-id').remove();
            }
        });

    });
</script>