Laravel的分页渲染不能在ajax请求上传递变量(无限滚动)

时间:2017-02-03 04:44:13

标签: php ajax laravel pagination laravel-5.1

我正在尝试无限滚动(based on this tutorial)网站上一些用户上传的图片。当我在我的网站上使用所有图像时,无限滚动工作正常,但是当我改进查询时,事情开始变得越来越糟糕。

出于测试目的,我有12张图片。他们都有“类别”字段,标题等。

这些图像标题为:vector1,vector2,vector3,drawing1,drawing2,drawing3,drawing4,interface1,interface2,interface3,interface4,interface5,它们都有适当的类别。

所以当我这样做时:

控制器

$query = $request->input('query');
$images = Status::where('is_image', 1)
->where('categorie', $query)
->where($orderByString, '>' , 0)
->whereIn('is_mature', [0, $mature])
->where('created_at', '>=', Carbon::now()->subHours($withinHours))
->orderBy($orderByString, 'desc')
->Paginate(2);

if($request->ajax()) {
    return [
        'images' => view('browse.partials.fullview_partial')->with(compact('images'))->render(),
        'next_page' => $images->nextPageUrl()
    ];
}       
return view('browse.fullview_results', ['categorie' => $categorie, 'orderBy' => $orderBy, 'orderText' => $orderText, 'orderURL' => $orderURL, 'queryString' => $queryString, 'withinText' => $withinText, 'withinURL' => $withinURL  ])->with('images', $images);

刀片

@if ($images->count())
<div class="endless-pagination" data-next-page={{ $images->nextPageUrl() }}>
    @foreach ($images as $status)
        <h4>{{ $status->title }}</h4>   
    @endforeach
    {{--{!! $images->render() !!}--}}
</div>
@endif

我得到2张图片。在这种情况下,drawing4和drawing3(因为我的查询是“绘图”),按我想要的方式排序。太好了!

所以现在我想向下滚动页面以触发我的ajax调用以获取更多图像。

$(window).scroll(fetchImages);

function fetchImages() {

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

    if(page !== null) {

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

        $.data( this, "scrollCheck", setTimeout(function() {
            var scroll_position_for_images_load = $(window).height() + $(window).scrollTop() + 900;

            if(scroll_position_for_images_load >= $(document).height()) {
                $.get(page, function(data){
                    $('.endless-pagination').append(data.images);
                    $('.endless-pagination').data('next-page', data.next_page);
                });     
            }
        }, 350))

    }
}   

这会得到部分 fullview_partial.blade.php

@foreach ($images as $status)
    <h4>{{ $status->title }}</h4>   
@endforeach

和......哎呀。什么都没有出现。那真是怪了。我只有drawing4和drawing3。

我回到我的控制器并切换

->where('categorie', $query)

->where('categorie', "drawing")

再次测试。这次,我得到drawing4和drawing3。我向下滚动并获得drawing2和drawing1。

从我的结论(我可能是错的),似乎在ajax调用,而不是使用相同的查询,它通过我的控制器AGAIN,但这次没有查询(因为查询来了)来自网址)。这导致了我的主要问题,因为我有很多条件取决于查询的内容。

我该如何解决这个问题?

修改

经过进一步调查,似乎在ajax附加,它确实再次通过我的控制器,但这次没有查询。我认为我需要的是一种方法,再次将该变量传递给控制器​​以使其工作,但我不知道如何。

编辑2

基本上我只需要解决这个问题:

 data-next-page={{ $images->nextPageUrl() }}

 data-next-page={{ $images->nextPageUrl() + query }}

不知。至少那将解决第一次通话的问题。然后我需要将查询添加到

$('.endless-pagination').data('next-page', data.next_page);

1 个答案:

答案 0 :(得分:0)

想出来。

将$ query与其他所有内容一起传递给视图。

return view('browse.fullview_results', ['categorie' => $categorie, 'orderBy' => $orderBy, 'orderText' => $orderText, 'orderURL' => $orderURL, 'queryString' => $queryString, 'withinText' => $withinText, 'withinURL' => $withinURL  ])->with('images', $images)->with('query', $query);

并将其添加到数据下一页:

data-next-page={{ $images->nextPageUrl() }}&query={{$query}}

所以下一个GET请求的URL如下所示:

fullview?page=2&query=drawing