加载标志显示2条评论后

时间:2017-04-03 13:18:50

标签: jquery laravel laravel-5

我正在尝试创建一个评论部分,当您向下滚动时,会显示更多评论。我遇到的问题是我 似乎无法在评论之后获得加载。发生的事情是每2条评论后会出现加载(其中 是我设定的限制)。

我的OpenController.php

public function slug(Request $request, $slug){
    $menus_child = Menu::where('menu_id', 0)->with('menusP')->get();
    $stories = Story::where('slug', $slug)->get();

    $slug = $slug;

    $story = Story::with('author')->where('slug', $slug)->first();

    $name = $story->author->first()->name;
    $surname = $story->author->first()->surname;

    $story = Story::where('slug', $slug)->first();
    $comments = $story->comment()->paginate(2);

    $pdf = Story::all();


    // THIS ALLOWS THE COMMENTS TO BE SHOWN WHEN SCROLLING DOWN
    if($request->ajax())
    {
        return [
            'comments' => view('open::public.ajax.comments')->with(compact('comments'))->render(),
            'next_page' => $comments->nextPageUrl()
        ];
    }


    return view('open::public.single-story', compact('menus_child', 'gh', 'object', 'pdf1', 'pdf_sigh', 'load', 'stories', 'slug', 'test', 'name', 'surname', 'comments'));
}

我的单篇故事.blade.php

@extends('templates::layouts.public')
@section('content')

    @foreach($stories as $story)
        <h1>{!! $story->title !!}</h1>
    @endforeach

    <h5>{!! $name !!} {!! $surname !!}</h5>

    @foreach($stories as $story)
        <p>{!! $story->content !!}</p>

        <?php
            $image = getImagesArray($story->image);
        ?>

        @if(!empty($image))
            @foreach($image as $f)
                <iframe src="{!! URL::to('authors_image/'.$f) !!}" width="100%" height="600"></iframe>
            @endforeach
        @endif
    @endforeach

    <hr>

    <div class="row">
        <div class="col-lg-12">
            <div class="comment_form">
                {!! Form::open(array('url' => '/stories/'.$slug, 'id' => 'comment_form')) !!}
                    <input type="hidden" name="story_id" id="story_id" value={!! $story->id !!}>

                    <div class="form_group">
                        {!! Form::label('name', 'Name') !!}
                        {!! Form::text('name', '' , array("class" => "form-control")) !!}
                    </div>

                    <div class="form_group">
                        {!! Form::label('comment', 'Comment') !!}
                        {!! Form::textarea('comment', '' , array("class" => "form-control")) !!}
                    </div>

                    <div class="form_group submit_button">
                        {!! Form::submit('Submit', array("class" =>"btn btn-info submit", "role" => "button")) !!}
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <hr>

    <div class="row">
        <div class="col lg-12">
            <div class="comments endless-pagination" data-next-page="{!! $comments->nextPageUrl() !!}">
                @foreach($comments as $t)
                    <h1>{!! $t['name'] !!}</h1>
                    <p>{!! $t['comment'] !!}</p>
                    <hr>
                @endforeach

                <span class="loding" style="display: none;"><span class="loding_txt">Loading....</span></span>
                {{-- {!! $comments->render() !!} --}}
            </div>
        </div>
    </div>

@stop

my comments.blade.php

@foreach($comments as $t)
    <h1>{!! $t['name'] !!}</h1>
    <p>{!! $t['comment'] !!}</p>
    <hr>
@endforeach
<span class="loding" style="display: none;"><span class="loding_txt">Loading....</span></span>

我的main.js     $(文件)。就绪(函数(){

        /* BEGIN SCROLL FOR MORE COMMENTS */
    $(window).scroll(fetchPosts);

    function fetchPosts() {

        var page = $('.endless-pagination').data('next-page');

        if(page !== null) {

            clearTimeout( $.data( this, "scrollCheck" ) );

            $.data( this, "scrollCheck", setTimeout(function() {
                $('.loding').show();
                var scroll_position_for_comments_load = $(window).height() + $(window).scrollTop() + 100;

                if(scroll_position_for_comments_load >= $(document).height()) {
                    $.get(page, function(data){
                        $('.comments').append(data.comments);
                        $('.endless-pagination').data('next-page', data.next_page);
                    });
                }
            }, 350))    
        }
    }
        /* END SCROLL FOR MORE COMMENTS */
});             

希望我有道理

0 个答案:

没有答案