簡體   English   中英

Laravel的分頁渲染未在ajax請求上傳遞變量(無限滾動)

[英]Laravel's pagination rendering not passing variables on ajax request (infinite scrolling)

我正在嘗試無限滾動( 基於本教程 )網站上一些用戶上傳的圖像。 當我使用網站上的所有圖像時,無限滾動效果很好,但是當我優化查詢時,事情開始變得麻煩了。

出於測試目的,我有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(因為我的查詢是“ drawing”),以我想要的方式排序。 大!

因此,現在我想向下滾動頁面以觸發我的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,但是這次沒有查詢(因為查詢來自url) )。 這給我帶來了主要問題,因為我有很多條件取決於查詢的內容。

我該如何解決這個問題?

編輯

經過進一步調查,似乎在ajax附加項上,它確實再次通過了我的控制器,但是這次沒有查詢。 我想我所需要的只是一種將變量再次傳遞到控制器中以使其工作的方法,但是我不知道如何做。

編輯2

因此,基本上我只需要打開此按鈕即可:

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

進入

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

不知何故。 至少可以解決第一個電話的問題。 然后我需要將查詢添加到

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

弄清楚了。

將$ 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:

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

因此下一個GET請求的網址如下所示:

fullview?page=2&query=drawing

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM