Обновить часть страницы, а не целую страницу, как только Ajax будет успешным. Laravel

Question

Я использую Laravel 4 для моего проекта. У меня есть «новостная лента» сообщений. Каждый пост можно прокомментировать. Когда пользователь комментирует сообщение, страница перезагружается, а новый комментарий отображается в поле комментария. Как бы то ни было, я не хочу, чтобы вся страница перезагружалась. Итак, я могу отправить сообщение с помощью ajax. Я отправляю форму и не обновляю страницу. Однако, теперь я не знаю, как получить комментарий, чтобы появиться в сообщении без ручного обновления страницы?

Вот мой маршрут для размещения комментариев:

Route::post('post/{id}/comment', ['as' => 'commentPost', 'uses' => 'CommentsController@postComment']); 

контроллер, что сообщения об этом комментарии к БД:

public function postComment() 
{ 
    extract(Input::only('user_id', 'resource_id', 'body')); 
    $this->execute(new PostCommentCommand($user_id, $resource_id, $body)); 

    return Redirect::back(); 
} 

Im используя командную шину, которая в конечном счете сохраняет свой комментарий к БД следующим образом:

public function leaveComment($user_id, $resource_id, $body) 
{ 
    $comment = Comment::leavePostComment($resource_id, $body); 

    User::findOrFail($user_id)->comments()->save($comment); 

    return $comment; 
} 

комментарий модель:

public static function leavePostComment($resource_id, $body) 
{ 
    return new static([ 
     'resource_id' => $resource_id, 
     'body' => $body 
    ]); 
} 

Вот вид, который загружает в поле для комментариев (содержит все комментарии, относящиеся к сообщению и коробки типа для размещения новых комментариев. Я использую JS, чтобы получить возможность отправлять комментарии когда пользователь нажимает кнопку "Enter/Return" ключ):

<div class="comment-box-container"> 
<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--> 

и вот мой Javascript для Аякса:

(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() { 

       ** I DON'T KNOW WHAT TO PUT HERE TO MAKE THE 
       COMMENT-BOX RELOAD AND DISPLAY THE NEWLY 
       POSTED COMMENT ** 

      } 
    }); 

    e.preventDefault(); 
}); 
})(); 

Пожалуйста, обратите внимание, я «Очень новый для JavaScript и еще более новый для Ajax. Любая помощь будет принята с благодарностью!

Answer 1

Что-то вдоль линий:

$.ajax({ 
    type: method, 
    url: url, 
    data: form.serialize(), 
    success: function(data) { 
     // use a temp wrapper element to workaround weak jQuery HTML parser 
     var tmp = $('<div>'); 
     tmp.html(data); 
     // update the comment box with the new one 
     $('.comment-box').html(tmp.find('.comment-box').html()); 
     // update the form (so it eventually shows validations errors) 
     // don't forget to empty it via PHP if the submission was 
     // successful 
     $('.type-box').html(tmp.find('.type-box').html()); 
     tmp.destroy(); 
    } 
});