Saludos a todos, tengo un inconveniente con ajax y soy bastante nuevo con js, tengo un sistema de comentarios en laravel, ya he logrado editar los comentarios por medio de ajax pero ahora tengo un problema al momento de crearlos, éste es mi código.
Acá se muestran los comentarios "incluyendo los nuevos" y se editan o eliminan.
<article class="row">
<div class="col-md-3 col-sm-3 hidden-xs">
<figure class="thumbnail">
<img class="img-responsive" src="/uploads/avatars/{{ $comment->user->profilepic }}" />
<figcaption class="text-center">{{ $comment->user->name }}</figcaption>
</figure>
</div>
<div class="col-md-8 col-sm-8">
<div class="panel panel-default arrow left">
<div class="panel-body">
<header class="text-left">
<div class="comment-user"><i class="fa fa-user"></i> {{ $comment->user->name }}</div>
<time class="comment-date" datetime="{{ $comment->created_at->diffForHumans() }}"><i class="fa fa-clock-o"></i> {{ $comment->created_at->diffForHumans() }}</time>
</header>
<div id="comment-post" data-commentid="{{ $comment->id }}">
<p id="display-comment"{{ $comment->id }} class="store-comment">{{ $comment->comment }}</p>
</div>
</div>
<div class="panel-footer list-inline comment-footer">
@if(Auth::guest())
No puedes responder ningún comentario si no has ingresado.
@else
@if(Auth::user() == $comment->user)
<a href="#" data-toggle="modal" data-target="edit-comment" class="edit-comment">Editar</a> <a href="#" data-toggle="modal" data-target="delete-comment" class="delete-comment">Eliminar</a>
@endif
@if(Auth::user() != $comment->user)
<a href="#">Responder</a>
@endif
@endif
</div>
</div>
</div>
</article>
</section>
@endforeach
</div>
Controlador, método store:
public function store(Request $request, $post_id)
{
$this->validate($request, [
'comment' => 'required'
]);
$post = Post::find($post_id);
$comment = new Comment();
$comment->comment = $request->comment;
$comment->approved = true;
$comment->user_id = auth()->id();
$comment->post_id = $request->post_id; // only if included
$comment->save();
return response()->json(['data'=> $comment->comment, $post->slug], 200);
}
JS:
Primero el código que estoy usando para crear el comentario:
var urlCreate = {{ url('comments/store') }};
$('.send').submit(function(){
var comentario = $('#add-comment').val();
$.ajax({
type:'post',
url: urlCreate,
data: {
comentario: comment,
},
success:function(data){
$('#comment-post').append("<p class='store-comment" + data.comentario + "'>" + data.comentario + "</p>");
},
error: function(data){
alert("Error Submitting Record!");
}
});
});
Ahora para aclarar cualquier duda publicaré el JS que uso para editar los comentarios, lo coloco por las variables creadas y los id's usados:
var urlEdit = '{{ url('comments/update') }}';
$('.edit-comment').click(function(event){
event.preventDefault();
divcomment = this.parentNode.parentNode;
commentId = $("#comment-post", event.target.parentNode.parentNode).data('commentid');
var commentBody = $(divcomment).find('#display-comment').text();
$('#comment').val(commentBody);
$('#edit-comment').modal();
});
$('#modal-save').on('click', function(){
var $btn = $(this).button('loading');
var comment = $('#comment').val();
$(this).button('loading');
$.ajax({
method: 'PUT',
url: urlEdit,
data: {
comment: comment,
commentId: commentId,
_token: token,
_method: 'PUT',
},
dataType: 'json'
})
.done(function (msg){
if (msg.success === true) {
$(divcomment).find('#display-comment').text(comment);
}
$btn.button('reset');
$('#edit-comment').modal('hide');
success('Comentario editado.', '.alert .alert-success', {timeOut: 5000});
});
});
Esto también pertenece al JS para editar pero lo coloco por acá porque el editor de código no me deja acomodarlo:
var commentId = 0;
var divcomment = null;
Actualmente cuando presiono el boton para crear el comentario me está enviando a localhost:8000/comments/id donde "id" es el número del comentario y me arroja el contenido que se creó de la siguiente manera:
{"data":"controller","0":"intel-anuncia-core-i9-extreme-edition-el-procesador-de-escritorio-mas-extremo-con-18-nucleos"}
De antemano "intel-anuncia-core-i9-extreme-edition-el-procesador-de-escritorio-mas-extremo-con-18-nucleos" es el slug del post donde está el comentario, en la base de datos no se refleja pero me deja en la relación en que post se encuentra el comentario por medio del "post_id".