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

Question

I'm trying my hand at infinite scrolling ( based on this tutorial ) of some user-uploaded images on website. The infinite scrolling works just fine when I use ALL the images on my website, however when I refine the query, things start to get buggy.

For testing purposes, I have 12 images. They all have a "categorie" field, titles, etc.

These images are titled: vector1, vector2, vector3, drawing1, drawing2, drawing3, drawing4, interface1, interface2, interface3, interface4, interface5, and they all have their appropriate categories.

So when I do this:

Controller

$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);

Blade

@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

I get 2 images. In this case, drawing4 and drawing3 (since my query is "drawing"), ordered in the way that I want. Great!

So now I want to scroll down the page to trigger my ajax call to fetch some more images.

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

    }
}   

this gets the partial fullview_partial.blade.php :

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

and... oops. Nothing shows up. That's weird. I only have drawing4 and drawing3.

I go back to my controller and I switch

->where('categorie', $query)

to

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

and test it again. This time, I get drawing4 and drawing3. I scroll down and get drawing2 and drawing1.

From what I've concluded (and I might be wrong), it appears that on the ajax call, rather than using the same query, it goes through my controller AGAIN, but this time with no query (since the query comes from the url). This causes me major issues, as I have plenty of conditions dependent on what the query is.

How would I solve this problem?

EDIT

Upon further investigation, it appears that on the ajax append, it does go through my controller once again, but this time without the query. I think all I would need is a way to pass through that variable once again into the controller to make this work, but I don't know how.

EDIT 2

So essentially all I need is just to turn this:

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

into

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

somehow. At least that'll solve the problem for the first call. Then I'd need to add the query to

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

Answer 1

Figured it out.

Passed $query into the view along with everything else.

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);

and also added it to data-next-page:

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

so the URL for the next GET request looks like:

fullview?page=2&query=drawing