У меня есть система комментариев в моем приложении в laravel, и я могу редактировать свои комментарии с помощью ajax, но после ее редактирования он автоматически не загружает отредактированный комментарий. Чтобы просмотреть отредактированный комментарий, мне нужно перезагрузить страницу вручную. Здесь я поставлю код.
Это JS:
var commentId = 0; var divcomment = null; $('.edit-comment').click(function(event){ event.preventDefault(); /* Accedemos al Div Que contiene el Panel*/ var divcomment = this.parentNode.parentNode; /* Buscamos el Contenido con Id display-text */ commentId = $("#comment-post", event.target.parentNode.parentNode).data('commentid'); var commentBody = $(divcomment).find('#display-comment').text(); $('#comment').val(commentBody); $('#edit-comment').modal(); /* Asignas a tu modal */ }); $('#modal-save').on('click', function(){ $.ajax({ method: 'PUT', url: urlEdit, data: { comment: $('#comment').val(), commentId: commentId, _token: token, _method: 'PUT', dataType: 'json', } }) .done(function (msg){ $(divcomment).text(msg['new_comment']); $('#edit-comment').modal('hide'); }); }); Это Html:
<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->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>
2 переменных, созданных в представлении
var token = '{{ Session::token() }}'; var urlEdit = '{{ url('comments/update') }}';
и, наконец, модальный, где я редактирую комментарий:
<div class="modal fade" id="edit-comment" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" style="color:#000;">Editar Comentario</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="comment">Editar comentario</label> <textarea class="form-control" name="comment" id="comment"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn-comment-dismiss btn-comment-modal" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cerrar</button> <button type="button" class="btn-comment-edit btn-comment-modal" id="modal-save"><span class="glyphicon glyphicon-ok"></span> Editar</button> </div> </div> </div> </div>
Все работает, но единственное, что мне нужно – это загрузить отредактированный комментарий без обновления всей страницы, btw я использовал $ ('# display-comment'). Load (document.URL + '# display-comment'); и с этой строкой я успешно загружаю отредактированный комментарий, но он загружает все комментарии на отредактированном, поэтому мне нужно обновить всю страницу, чтобы показать только отредактированный.
Предполагая, что данные, отправленные на сторону php вещей, – это те же данные, которые вы хотите обновить, следующие должны работать:
$('#modal-save').on('click', function(){ var comment = $('#comment').val(); // shove the edited comment into a variable local to the modal handler $.ajax({ method: 'PUT', url: urlEdit, data: { comment: comment, // reference said variable for ajax data commentId: commentId, _token: token, _method: 'PUT' }, dataType: 'json' }) .done(function (msg){ //$(divcomment).text(msg['new_comment']); // I commented out the above line as it clears the // divcomment div's text entirely. // Comment out the below 'if check' if it is not needed. if (msg.success === true) { $(divcomment).find('#display-comment').text(comment); // And overwrite the #display-comment div with the new // data if the user was successful in editing the comment } $('#edit-comment').modal('hide'); }); });
В предыдущем вопросе у вас был метод контроллера на стороне php вещей, которые обрабатывали ajax. Вместо перенаправления (поскольку это ajax, нет перенаправления), вместо этого вы должны вернуть json, чтобы указать, было ли действие успешным или нет. Вот пример этого:
public function update(Request $request) { //... $comment = Comment::find($request['commentId']); if (Auth::user() != $comment->user) { return response()->json(['success' => false], 200); } //... return response()->json(['new_comment' => $comment->comment, 'success' => true], 200); }
Я ссылался на вышеупомянутый json в своем ответе на стороне javascript; если вы не собираетесь использовать ответ json, тогда просто закомментируйте строку (как я также отметил в коде).
Обновление : я пропустил что-то в вашем предыдущем блоке кода; вы объявляете divcomment вне обработчика ссылки редактирования, но затем вы снова объявляете его внутри этого обработчика. Я пропустил это в своем более раннем ответе, поэтому просто удалив var из него, поэтому он использует внешнюю декларацию, исправляет ваш код:
var commentId = 0; var divcomment = null; //this is already declared, no reason to declare it // again $('.edit-comment').click(function(event){ event.preventDefault(); /* Accedemos al Div Que contiene el Panel*/ divcomment = this.parentNode.parentNode; // ^ remove the var, making this use the global variable you already // made above /* Buscamos el Contenido con Id display-text */ commentId = $("#comment-post", event.target.parentNode.parentNode).data('commentid'); var commentBody = $(divcomment).find('#display-comment').text(); $('#comment').val(commentBody); $('#edit-comment').modal(); /* Asignas a tu modal */ });