我正在使用Laravel创建一个社交网站。我有一个页面,可以加载currentUser关注的用户创建的所有帖子。我在每个帖子上都有一个评论部分。我希望用户能够在不重新加载页面的情况下对任何帖子发表评论,这样用户就不必重新滚动页面。
没有ajax(减去重新加载页面),我的一切都可以正常工作。我可以发布评论,页面会重新加载,并显示新的评论。然而,当我尝试使用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>
$('.comments_create-form').on('keydown', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
$(this).submit();
}
});
</script>
这是我的Ajax
(function(){
$('form[data-remote]').on('submit', function(e){
var form = $(this);
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);
$('.ajax-refresh').html(tmp.find('.ajax-refresh').html());
$('.type-box').html(tmp.find('.type-box').html());
tmp.destroy();
}
});
e.preventDefault();
});
})();
我在使用此代码时遇到了一些问题。评论会显示在任何一篇帖子上,直到我手动刷新页面,然后它只显示在正确的帖子上。我觉得每个帖子的comment-box
都需要它自己独特的ID
来解决这个问题,但我不知道如何使用Laravel来做到这一点,并使JavaScript发挥作用。
此外,
在我提交一条评论后,我无法再提交第二条评论,因为我的"输入/返回键提交"功能不再有效。我的光标刚刚移到一行,无法再发表评论。
有人知道解决这些问题的方法吗?
编辑
这是我迄今为止的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();
}
});
});
})();
请使用以下方法解决问题:
$(document).on('submit', 'form[data-remote]', function(e){
e.preventDefault();
var form = $(this),
var target = form.closest('div.ajax-refresh');
var method = form.find('in......
......
.....
tmp.html(data);
target.html( tmp.find('.ajax-refresh').html() );
target.find('.type-box').html( tmp.find('.type-box').html() );
tmp.destroy();
}
});
});
变量target
将帮助您确定添加ajax响应的正确div。
此外,您只需要重置相关的表单,而不是替换表单标记。否则,每个表单只能工作一次。
更新
上面的代码已经更新为使用委托的submit
事件——$(document).on('submit', '.selector', ...)
而不是$('.selector').on('submit', .....)
,因为表单内容在每个注释之后都被替换。
更新2
以下委派的keydown
事件应使您能够通过按回车键提交:
$(document).on('keydown', '.comments_create-form', function(e) {
if (e.keyCode == 13) {
e.preventDefault();
$(this).submit();
}
});