How to add a comment to a page using ajax - php

Question

I am trying to allow the user to make a comment in an article but somehow, so that my page is not reloaded, I have to use ajax and I don't have much knowledge about it. This is how my comment section looks like:
<div class="usrcmmnt_list">
#foreach($comments as $comment)
<div class="usrcmmnt flex_box">
<div class="usrcmmnt_pic">
<img src="{{ $comment->user['profile_image'] }}">
</div>
<div class="usrcmmnt_area">
<p class="usrcmmnt_name">{{ $comment->user['name'] }}</p>
<div class="usrcmmnt_box">
<p class="usrcmmnt_text">{{$comment['content']}}</p>
<p class="usrcmmnt_time"><img src="{{ url('/img/icon_time.png') }}">{{ date("m/d H:m", strtotime($comment->created_at)) }}</p>
</div>
</div>
</div>
#endforeach
</div>
<div class="comment_write">
<textarea placeholder="Write a comment" name="comment" id="comment" maxLength="255"></textarea>
<p class="usrcmmnt_text" id="textarea_warning"></p>
<span class="alert"></span>
<button class="btn btn_orange btn_m_2" id="saveComment" type="submit">Post comment</button>
</div>
</div>
In my script part, I have this one but it only copies the existing comments. This is just for my testing:
$('.comment_write button').on('click', function(e){
e.preventDefault();
var tmp = document.createElement('div');
$(tmp).load('myurl', function(data){
// usrcmmnt_list
var tmp2 = document.createElement('div');
$(tmp2).html(data);
var list = $(tmp2).find('.usrcmmnt_list');
$(".usrcmmnt_list").append(list);
});
});
How can I attain my goal using ajax?

Answer 1

There are multiple approaches for this, one of them:
you could move your comments loop (#foreach) into a partial
create an endpoint to save the user comment and return the new comments partial as html
update the DOM
1. Create a new partial \resources\views\partials\comments.blade.php and include it into your comments section:
#if ($comments)
#foreach($comments as $comment)
<div class="usrcmmnt flex_box">
<div class="usrcmmnt_pic">
<img src="{{ $comment->user['profile_image'] }}">
</div>
<div class="usrcmmnt_area">
<p class="usrcmmnt_name">{{ $comment->user['name'] }}</p>
<div class="usrcmmnt_box">
<p class="usrcmmnt_text">{{$comment['content']}}</p>
<p class="usrcmmnt_time"><img src="{{ url('/img/icon_time.png') }}">{{ date("m/d H:m", strtotime($comment->created_at)) }}</p>
</div>
</div>
</div>
#endforeach
#else
No comments
#endif
2. Your comments section should look like this:
<div class="usrcmmnt_list">
<div id="comments-list">
#include('partials.comments')
</div>
<div class="comment_write">
<form method="post" action="{{ route('save.comment') }}" id="saveCommentForm">
<textarea placeholder="Write a comment" name="comment" id="comment" maxLength="255"></textarea>
<p class="usrcmmnt_text" id="textarea_warning"></p>
<span class="alert"></span>
<button class="btn btn_orange btn_m_2" id="saveComment" type="submit">Post comment</button>
</form>
</div>
</div>
3. Create your save comment method in CommentsController (which you will use to save the user comment via your ajax call):
public function save(Request $request)
{
/* we assume that your ajax save route is named comment.save */
/* you might need the postId if you save the comments for a post */
$comment = $request->input('comment');
$user = auth()->user();
$comment = Comment::create([
'user_id'=> $user->id,
'content'=> $comment
]);
$comments = Comment::with('user')->all();
return view('comments.blade');
}
4. Your ajax call:
$(document).ready(function(){
$('#saveCommentForm').on('submit', function(event) {
event.preventDefault(); // prevent the form from submiting
var $form = $(this),
url = $form.attr('action');
$.ajax({
url: url,
method: 'POST',
data: $form.serialize(),
success: function(response) {
$('#comments-list').html(response); //update the dom
},
error: function() {
alert('An error occurred. Please try again later.');
}
});
});
});
I hope this will help you get started.

Answer 2

You must try something like this.
$(document).on('click', '#saveComment', function(){
if($('#comment').val()==''){
alert('Please write a Comment First!');
}
else{
var comment = $('#comment').val();
$.ajax({
type: 'POST',
url: '<your url goes here>',
data: {"comment": comment},
success: function(){
// update comment listing.
},
});
}
});
However here is the complete tutorial you can follow. https://www.sourcecodester.com/tutorials/php/11819/laravel-comment-post-using-ajax.html