Error in paginator link, caused by /livewire/message/services-all?page=2

Hi, everyone! My project uses Laravel + livewire. I'm trying to use paginator with the Livewire component.

The problem is the following, when the page is loaded for the first time, the mount() function is executed, and the paginator works fine, i.e. /user/service/?page=2. If you start switching between services (click on the tabs), the paginator doesn't work. It replaces all links to /livewire/message/services-all?page=2. And outputs error:

The GET method is not supported for this route. Supported methods: POST.

I have 2 tabs where all the services and services used by the user.

 <a wire:click="displayAllServices"
               class="@if($services_status) active @endif "
            >All services</a>
<a
                wire:click="displayUserServices"
                class="@if(!$services_status) active @endif "
            >My services</a>

Accordingly, there are 2 methods

use WithPagination;

    protected $services_obj;
    public $services_status = true;
    public $sort_mode = 'DESC';
    public $sort_state = "latest";

    public function mount()
    {
        $this->services_obj = ServiceAll::paginate(10);
    }
    public function displayAllServices()
    {
        $this->services_obj = ServiceAll::paginate(10);
        $this->services_status = true;
    }

    public function sortUserServices($sort_mode)
    {
        if (!$this->services_status)
            $this->resetPage();

        $this->sort_mode = $sort_mode;
        $this->displayUserServices();
    }

    public function displayUserServices()
    {
        $user = Auth::user();

        if ($this->services_status)
            $this->resetPage();

        if($this->sort_mode === 'ASC') {
            $this->services_obj = Service::where('user_id', $user->user_id)
                ->whereNot('kind', 'analysis')
                ->orderBy('date', 'ASC')
                ->paginate(10);
            $this->sort_state = "oldest";
        }else {
            $this->services_obj = Service::where('user_id', $user->user_id)
                ->whereNot('kind', 'analysis')
                ->orderBy('date', 'DESC')
                ->paginate(10);

            $this->sort_state = "latest";
        }

        $this->services_status = false;
    }
    public function render()
    {
        return view('livewire.services-all',  ['services' => $this->services_obj]);
    }

And pagination in 'livewire.services-all':

    {{ $services->links('vendor.pagination.custom-pagination', ['route' => route('profile.services')]) }}

As well, I have custom pagination, but I guess it's ok, since it worked correctly on vanilla Laravel, without livewire

tisuchi

3 years ago

Level 70

@solomonrei It seems that the issue is related to the way the pagination links are being generated. When you switch between the tabs, the pagination links are being generated with the /livewire/message/services-all?page=2 URL, instead of the desired /user/service/?page=2.

One potential solution is to specify the route in the links() method when generating the pagination links. Instead of using route('profile.services'), you can use route('user.services') or any other route that corresponds to your desired URL.

Another solution is to use the route() helper function to generate the pagination links and pass in the route parameter, like this:

{{ $services->links('vendor.pagination.custom-pagination', ['route' => route('user.services')]) }}

You should also check the routes in your web.php or api.php files to make sure that the route being passed to the route() function is correct and corresponds to the correct controller action.

Also, You can remove the route parameter from the links method

{{ $services->links() }}

1 like

SolomonRei

3 years ago

Level 1

@tisuchi Thanks! I've found the similiar solution and specified the path in the Component

            $this->services_obj = Service::where('user_id', $user->user_id)
                ->whereNot('kind', 'analysis')
                ->orderBy('date', 'DESC')
                ->paginate(10, ['*'], 'mp')
                ->setPath(route('profile.services'));

1 like

imranyahya

2 years ago

Level 1

Using live wire, you can add an attribute of "wire:ignore" to stop the re-rendering of pagination links. e.g.

{{-- Pagination --}}
@if ($users->hasPages())
    <div  class="bg-gray-100 px-4 py-5 sm:px-6 rounded-bl-lg rounded-br-lg flex justify-center border-t-0 border-r border-l border-b">
        {!! $users->links('pagination::tailwind') !!}
    </div>
@endif

change this to:

{{-- Pagination --}}
@if ($users->hasPages())
    <div wire:ignore class="bg-gray-100 px-4 py-5 sm:px-6 rounded-bl-lg rounded-br-lg flex justify-center border-t-0 border-r border-l border-b">
        {!! $users->links('pagination::tailwind') !!}
    </div>
@endif

1 like

danichangt

2 years ago

Level 1

@imranyahya I had the problem with links('pagination::tailwind'). When I open and close a modal, the pagination stop working.

The attribute "wire:ingnore" works perfectly for me. Thank You so much.

Please or to participate in this conversation.