thkafadaris1's avatar

Laravel Infinite Scroll using AJAX and livewire component

Hello, I have implemented a Laravel pagination according to the below way of implementation.

 public function index(Request $request)
    {
        $posts = Post::paginate(10);
  
        if ($request->ajax()) {
            $view = view('data', compact('posts'))->render();
  
            return response()->json(['html' => $view]);
        }
  
        return view('posts', compact('posts'));
    }

Inside the data view I have a livewire component that after the first page, it is rendering fine as far as view but it doesn't work. I think this is happening due to the way that the new data is going to the view using render and json. Do you have any alternative way of implementation of this?

Thanks Theo!

0 likes
5 replies
thkafadaris1's avatar

The case here that I cannot switch to Laravel component to have the pagination through livewire component. I need to stay with Laravel controller

PovilasKorop's avatar

My first question would be do you really need to mix it all together in one?

  • Laravel web controller
  • AJAX
  • Livewire

They are in conflict for all parameters, so you're trying to solve a problem that you created for yourself by trying to create such 3in1 Frankenstein

thkafadaris1's avatar

I have mixed this, because it was initial build it with nested livewire components and now the parent component replaced by the normal blade with laravel pagination but having inside the other livewire component. So with the way that I did it above, the livewire component is not working after the second page. I am thinking to replace the infinite scrolling with normal pagination to overcome the issue but I was wondering if I can do it in a different way keeping the infinite scrolling functionality.

PovilasKorop's avatar

@thkafadaris1 I don't think it's possible. Or, at least, after a "hacky" solution someone would need to debug and triple test the code that it wohld work from all angles.

Please or to participate in this conversation.