Geek Answers Handbook

Just trying to use the form that I used in one template, another

so i have this comment form which works fine in post.html and now i am trying to use it in commentThread.html but i have some problems. (it listened to me for three days, any help to be appreciated) I will explain using my code

def post(request, slug): hotCat = Category.objects.get_hotCat() post = get_object_or_404(Post, slug=slug) post.views += 1 # increment the number of views post.save() # and save it profile = post.moderator #path = request.get_full_path() #comments = Comment.objects.filter(path=path) comments_count = Comment.objects.filter(post=post).count() comments = post.commented_post.all() for c in comments: c.get_children() hidden_data = { "post_id" : post.id, "origin_path" : request.get_full_path, "parent_id" : None } comment_form = CommentForm(hidden_data=hidden_data) context_dict = { 'post' :post, 'hotCat' :hotCat, 'comments' : comments, 'comment_form':comment_form, 'comments_count':comments_count, 'profile' :profile, } return render(request, 'main/post.html', context_dict)

above is my function for post.html. which is located in the main directory. Now, to go to the comments directory, I will write my comment

 class CommentForm(forms.Form): comment = forms.CharField( widget=forms.Textarea(attrs={"placeholder": "leave"}) ) #hidden_field = forms.CharField(widget=forms.HiddenInput()) def __init__(self, hidden_data=None, data=None, files=None, **kwargs): super(CommentForm, self).__init__(data, files, kwargs) self.helper = FormHelper() self.helper.form_show_labels = False self.helper.add_input(Submit('submit', 'leave', css_class='btn btn-default')) if hidden_data: self.helper.add_input(Hidden('post_id', hidden_data['post_id'])) self.helper.add_input(Hidden('origin_path', hidden_data['origin_path'])) if hidden_data.get('parent_id', None): self.helper.add_input(Hidden('parent_id', hidden_data['parent_id']))

and in the comments directory this is my view.py for creating comments. It consists of two parts: one for parent_comment and one for responding to parent_comment, which I called child_comment.

Now in my post.html I need both functions. But for commentThread.html parent_comment is displayed, and I need one form that allows users to respond to parent_comment. So what I need in commentThread.html is just a child_comment form.

 @csrf_exempt def comment_create_view(request): if request.method == "POST" and request.user.is_authenticated(): parent_id = request.POST.get('parent_id') post_id = request.POST.get("post_id") origin_path = request.POST.get("origin_path") try: post = Post.objects.get(id=post_id) except: response_dat = {"code":400,"message":"Post does not exists"} return JsonResponse(response_data) parent_comment = None if parent_id is not None: try: parent_comment = Comment.objects.get(id=parent_id) except: parent_comment = None if parent_comment is not None and parent_comment.post is not None: post = parent_comment.post form = CommentForm(data=request.POST) if form.is_valid(): comment_text = form.cleaned_data['comment'] if parent_comment is not None: # parent comments exists new_comment = Comment.objects.create_comment( user=MyProfile.objects.get(user=request.user), path=parent_comment.get_origin, text=comment_text, post = post, parent=parent_comment ) hidden_data = { "post_id" : post.id, "origin_path" : request.get_full_path, "parent_id" : parent_comment.id } comment_form = CommentForm(hidden_data=hidden_data) html = render_to_string('main/child_comment.html', {'comment': [new_comment], 'user': request.user, 'comment_form':comment_form}) response_data = {"status":200, "message":"abc~", "comment":html, 'parent': True, 'parent_id': parent_comment.id, 'comment_count': parent_comment.comment_count()} return JsonResponse(response_data) else: new_comment = Comment.objects.create_comment( user=MyProfile.objects.get(user=request.user), path=origin_path, text=comment_text, post = post ) hidden_data = { "post_id" : post.id, "origin_path" : request.get_full_path, "parent_id" : None } comment_form = CommentForm(hidden_data=hidden_data) html = render_to_string('main/parent_comment.html', {'comment': new_comment, 'user': request.user, 'comment_form':comment_form}) response_data = {"status":200, "message":"abc~", "comment":html, 'parent': False} return JsonResponse(response_data) else: print str(form) messages.error(request, "There was an error with your comment.") response_data = {"status":400,"message":"There was an error with your comment."} return JsonResponse(response_data) else: raise Http404

With the same approach as post.html, I created a view for commentThread.html and below - this is what I did, please let me know what I did wrong here;

 def comment_thread(request, id): hotCat = Category.objects.get_hotCat() comment = Comment.objects.get(id=id) comments = comment.post.commented_post.all() for c in comments: c.get_children() hidden_data = { "post_id" : comment.post.id, "origin_path" : request.get_full_path, "parent_id" : None } comment_form = CommentForm(hidden_data=hidden_data) context = { "comment": comment, 'comment_form':comment_form, "hotCat":hotCat } return render(request, "comments/comment_thread.html", context)

In post.html, I had three templates for displaying comments. post.html, parent_comment.html and child_comment.html. I will also publish them here.

In post.html

 {% if user.is_authenticated %} <!-- <form method="POST" id="commentForAjax" class='form-comment'>{% csrf_token %} <input type='hidden' name='post_id' value='{{ post.id }}'/> <input type='hidden' name='origin_path' value='{{ request.get_full_path }}'/> --> {% crispy comment_form comment_form.helper %} <!-- </form> --> {% endif %} <div class="comment_bottom" style="padding:3px;"> {% if user.is_authenticated %} <div class="make_reply"> <a href='#' class='reply_btn'>reply</a> <div class='reply_comment'> <!-- <form method="POST" id="childCommentForAjax" class='form-comment'>{% csrf_token %} <input type='hidden' name='post_id' id='post_id' value='{{ post.id }}'/> <input type='hidden' name='origin_path' id='origin_path' value='{{ request.get_full_path }}'/> <input type='hidden' name='parent_id' id='parent_id' value='{{ comment.id }}' /> --> {% crispy comment_form comment_form.helper %} <!-- </form> --> </div> </div> {% endif %} <script> $(document).ready(function() { $(document).on('submit', 'form', function(e){ e.preventDefault(); if($(this).parents("tr").length != 0) { parent_id = $(this).parents("tr").attr("id").split("_")[1]; data_str = $(this).serialize() + "&parent_id=" + parent_id; } else { data_str = $(this).serialize(); } $.ajax({ type:'POST', url:'/comment/create/', // make sure , you are calling currect url data:data_str, success:function(json){ alert(json.message); if(json.status==200){ var comment = json.comment.trim(); var user = json.user; /// set `comment` and `user` using jquery to some element if(!json.parent) { $(comment).insertBefore('.table tr:first'); } else { $(comment).insertBefore('#comment_' + json.parent_id + ' #child_comment:first'); $(".replies").text("reply" + json.comment_count + "view all"); } } }, error:function(response){ alert("some error occured. see console for detail"); } }); }); $('#comment-post-form').on('submit', function(event){ event.preventDefault(); console.log("form submitted!"); // sanity check create_post(); }); </script>

For ajax below is my parent_comment.html

 {% load crispy_forms_tags %} <tr id="comment_{{ comment.id }}"> <td> <div class="row"> <div class="col-sm-1"> <a href="{% url 'userena_profile_detail' comment.user.user %}"><img src="{{ comment.user.get_mugshot_url }}" height='48' width='48' /></a> </div> <div class="col-sm-11"> <div class="row"> <div class="col-sm-12"> <p> <a href="{% url 'userena_profile_detail' comment.user.user %}" style="padding:5px;">{{ comment.user.user }}</a>| <small>{{ comment.timestamp|timesince }} </small></p> </div> </div> <div class="row"> <span style="margin:5px; word-break: break-all;"> {{ comment.get_comment }} </span> </div> </div> </div> <div class="comment_bottom" style="padding:3px;"> {% if user.is_authenticated %} <div class="make_reply"> <a href='#' class='reply_btn'>reply</a> <div class='reply_comment'> <form id="childCommentForAjax" method="POST">{% csrf_token %} <input type='hidden' name='post_id' id='post_id' value='{{ post.id }}'/> <input type='hidden' name='origin_path' id='origin_path' value='{{ comment.get_origin }}'/> <input type='hidden' name='parent_id' id='parent_id' value='{{ comment.id }}' /> {% crispy comment_form comment_form.helper %} </form> </div> </div> {% endif %} <div class="replyInfo"> {% if not comment.is_child %} <div class="wholeReply"> {% if comment.comment_count %} <a href='#' class='replies'> {{comment.comment_count}}</a> {% endif %} <div class="got_replies"> <ul id="child_comment" style="list-style-type: none;"> {% for child in comment.get_children %} <hr> <li> <div class="row"> <div class="col-sm-1"> <a href="{% url 'userena_profile_detail' child.user.user %}" style="float:left;"><img src="{{ child.user.get_mugshot_url }}" height='48' width='48'/></a> </div> <div class="col-sm-11"> <div class="row"> <div class="col-sm-12"> <p><a href="{% url 'userena_profile_detail' child.user.user %}" style="float:left;">&nbsp; {{ child.user.user }}</a>| <small>{{ comment.timestamp|timesince }} </small></p> </div> </div> <div class="row"> <div class="col-sm-12"> <span style="word-break: break-all; margin:5px;"> {{ child.get_comment }}</span> </div> </div> </div> </div> </li> {% endfor %} </ul> </div> </div> </div> </div> </div> </div> {% endif %} </td></tr>

and below - my child.html

 {% load crispy_forms_tags %} <ul id="child_comment" style="list-style-type: none;"> {% for child in comment %} <hr> <li> <div class="row"> <div class="col-sm-1"> <a href="{% url 'userena_profile_detail' child.user.user %}" style="float:left;"><img src="{{ child.user.get_mugshot_url }}" height='48' width='48'/></a> </div> <div class="col-sm-11"> <div class="row"> <div class="col-sm-12"> <p><a href="{% url 'userena_profile_detail' child.user.user %}" style="float:left;">&nbsp; {{ child.user.user }}</a>| <small>{{ child.timestamp|timesince }} </small></p> </div> </div> <div class="row"> <div class="col-sm-12"> <span style="word-break: break-all; margin:5px;"> {{ child.get_comment }}</span> </div> </div> </div> </div> </li> {% endfor %} </ul>

so in commentThread.html for the form all i did was

 <div> {% crispy comment_form comment_form.helper %} </div>

I tried to put the same ajax function as there, but no difference.

==> the page is being updated without changing anything ... does not show that it is just being updated ... there is no saved data ....]]

Can someone please help me here? I tried to be as detailed as possible

+7
jquery python ajax django
source share
1 answer

Include the form inside the <form></form> in html, as done in parent_comment.html. And also use the <script> post.html block in your commentThread.html. The problem seems to be due to the absence of the form element in commentThread.html

+2
source share

More articles:


All Articles