Question

我正在使用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 }}&nbsp;{{ $comment->owner->last_name }}</a>&nbsp;</span>{{ $comment->body }}
            </p>
<!-- Show when the user posted comments-->
          <div class="com-details">
            <div class="com-time-container">
              &nbsp;{{ $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-->

用户通过按＆＃34;输入/返回＆＃34;提交评论类型框的表单。键。这是 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工作。< / p>

也

在我提交一条评论后，我再也无法提交第二条评论，因为我的提交输入/返回密钥＆＃34;在功能上不再有效。我的光标只是移动到一个新行，我无法发布另一条评论。

有没有人知道解决这些问题的方法？

修改

到目前为止，这是我的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();
            }
    });
});
})();

Answer 1

请使用以下方法解决问题：

$(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将帮助您定位正确的div以添加ajax响应。

此外，您只需重置相关表单而不是替换表单标记。否则每个表单只能工作一次。

<强>更新

上述代码已更新为使用委派的submit事件 - $(document).on('submit', '.selector', ...)而不是$('.selector').on('submit', .....)，因为每次评论后都会替换表单内容。

更新2

以下委派的keydown事件可让您按Enter键提交：

$(document).on('keydown', '.comments_create-form', function(e) {
    if (e.keyCode == 13) {
        e.preventDefault();
        $(this).submit();
    }
});

如何使用Laravel进行动态Ajax请求

1 个答案: