2017-02-03 17 views
0

我正在嘗試在網站上用戶上傳圖片的無限滾動(based on this tutorial)。當我使用我網站上的所有圖像時,無限滾動工作得很好,但是當我改進查詢時,事情開始變得越來越麻煩。Laravel的分頁渲染不會在ajax請求上傳遞變量(無限滾動)

出於測試目的,我有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。

我回到我的控制器和I開關

->where('categorie', $query) 

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

,並再次測試。這一次,我得到了drawing4和drawing3。我向下滾動並獲取drawing2和drawing1。

從我的結論(我可能是錯的),它似乎在ajax調用,而不是使用相同的查詢,它通過我的控制器AGAIN,但這次沒有查詢(因爲查詢來自url)。這導致我的主要問題,因爲我有很多條件依賴於查詢是什麼。

我該如何解決這個問題?

編輯

經進一步調查,看來在AJAX追加,但它經過我的控制器再次,但這次沒有查詢。我想我所需要的只是一種將這個變量再次傳遞給控制器​​來完成這項工作的方式,但我不知道如何。

EDIT 2

所以基本上所有我需要的只是把這個:

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

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

莫名其妙。至少這會解決第一個電話的問題。然後,我需要將查詢添加到

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

回答

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