我正在使用Laravel创建一个社交网站。我有一个页面,可以加载currentUser关注的用户创建的所有帖子。我在每个帖子上都有一个评论部分。我正在使用ajax发布评论。
这是我的密码。
这是comment-box
的视图。它包含一个部分,我在其中循环浏览每个注释并显示它们。最后是类型字段,这样用户就可以发布新的评论:
<div class="comment-box-container ajax-refresh">
<div class="comment-box">
@if ($type->comments)
@foreach ($type->comments as $comment)
<div class="user-comment-box">
<div class="user-comment">
<p class="comment">
<!-- starts off with users name in blue followed by their comment-->
<span class="tag-user"><a href="{{ route('profile', $comment->owner->id) }}">{{ $comment->owner->first_name }} {{ $comment->owner->last_name }}</a> </span>{{ $comment->body }}
</p>
<!-- Show when the user posted comments-->
<div class="com-details">
<div class="com-time-container">
{{ $comment->created_at->diffForHumans() }} ·
</div>
</div>
</div><!--user-comment end-->
</div><!--user-comment-box end-->
@endforeach
@endif
<!--type box-->
<div class="type-comment">
<div class="type-box">
{{ Form::open(['data-remote', 'route' => ['commentPost', $id], 'class' => 'comments_create-form']) }}
{{ Form::hidden('user_id', $currentUser->id) }}
{{ Form::hidden($idType, $id) }}
{{--{{ Form::hidden('user_id', $currentUser->id) }}--}}
{{ Form::textarea('body', null, ['class' =>'type-box d-light-solid-bg', 'placeholder' => 'Write a comment...', 'rows' => '1']) }}
{{ Form::close() }}
</div><!--type-box end-->
</div><!--type-comment-->
</div><!--comment-box end-->
用户通过按"输入/返回"键提交评论类型框的表格。这是的JS
<script>
$(document).on('keydown', '.comments_create-form', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
$(this).submit();
}
});
</script>
这是我的Ajax
(function(){
$(document).on('submit', 'form[data-remote]', function(e){
e.preventDefault();
var form = $(this)
var target = form.closest('div.ajax-refresh');
var method = form.find('input[name="_method"]').val() || 'POST';
var url = form.prop('action');
$.ajax({
type: method,
url: url,
data: form.serialize(),
success: function(data) {
var tmp = $('<div>');
tmp.html(data);
target.html( tmp.find('.ajax-refresh').html() );
target.find('.type-box').html( tmp.find('.type-box').html() );
tmp.destroy();
}
});
});
})();
当我在第一篇帖子上发表评论时,一切都很好。然而,当我在第二篇、第三篇、第四篇等文章上发表评论时,它只显示第一篇文章的评论。我必须手动刷新页面,然后会显示正确的评论。
我将尝试用图像来说明这个问题。
从新开始,我可以很容易地在POST 1上提交2条评论http://s27.postimg.org/6ej76hunn/comment1.jpg
当我向下滚动到帖子2时,我看到它已经有评论了,我会提交一个新的评论http://s23.postimg.org/x65ui2ryz/comment_2.jpg
问题是:当我在post2上提交评论时,post2中的评论消失了,取而代之的是post1中的评论。http://s30.postimg.org/ugl08oz01/comment_3.jpg
后端仍然有效,因为当我重新加载页面时,一切都是应该的http://s9.postimg.org/w51fgyzen/comment_4.jpg
当我检查控制台时,Ajax正在返回整个页面。
我完全被卡住了。有人知道为什么会发生这种情况以及如何解决吗?
编辑
这是我的控制器,它正在加载带有帖子的页面:
public function index()
{
// load posts into the view.
$posts = $this->postRepository->getFeedForUser(Auth::user());
return View::make('newsfeed', compact('posts'));
}
getFeedForUser()
是这样的:
public function getFeedForUser(User $user)
{
// get a list of all the ids the user follows
$userIds = $user->followedUsers()->lists('followed_id');
// add in the current users posts as well
$userIds[] = $user->id;
// Resource is the posts
return Resource::with('messages', 'media', 'user', 'videos', 'comments', 'locations')->whereIn('user_id', $userIds)->latest()->get();
}
该Resource
模型具有用于注释的关系。它看起来像这样:
class Resource extends Eloquent {
public function comments()
{
return $this->hasMany('Duuer'Comments'Comment');
}
}
将注释保存到DB的路径如下:
Route::post('post/{id}/comment', ['as' => 'commentPost', 'uses' => 'CommentsController@postComment']);
CommentsController
看起来像这样:
class CommentsController extends 'BaseController {
use CommanderTrait;
/**
* Leave a new comment
* @return Response
*/
public function postComment()
{
extract(Input::only('user_id', 'resource_id', 'body'));
$this->execute(new PostCommentCommand($user_id, $resource_id, $body));
return Redirect::back();
}
public function deleteComment()
{
$comment = new Comment;
$user = Auth::user();
$id = Input::only('id');
$comment->where('user_id', $user->id)->where('id', $id)->first()->delete();
return Redirect::back();
}
}
我使用的是命令总线,所以我的处理程序类看起来像这样:
public function handle($command)
{
$comment = $this->postRepository->leaveComment($command->user_id, $command->resource_id, $command->body);
return $comment;
}
leaveComment()
方法如下:
public function leaveComment($user_id, $resource_id, $body)
{
$comment = Comment::leavePostComment($resource_id, $body);
User::findOrFail($user_id)->comments()->save($comment);
return $comment;
}
Comment模型中的leavePostComment()
方法如下所示:
public static function leavePostComment($resource_id, $body)
{
return new static([
'resource_id' => $resource_id,
'body' => $body
]);
}
您必须提交表单,但在输入/文本区域绑定keydown事件(JS对您来说更好的IMHO)。
对于您的AJAX请求,我建议只获取一个JSON,使用Laravel,您可以使用if(Request::ajax())
,只返回JSON而不是整个页面,然后,您只需要将新消息附加到DOM中。