Major issues with Pagination
Hey guys,
This is not necessarily about Wave, but I need help with pagination for Laravel Wave.
I am experiencing a problem with pagination on just one of my pages while it works just fine on others.
If you visit this route Stores Pagination and go down to pagination on a desktop, you can see that the proper pagination is displayed.
Now, visit this route Categories Pagination and you will see that the pagination is different. I will say that I altered the viewport for when it switches to mobile view, which could be the cause because my stores page does not do it.
Do you have any idea why it does this? Obviously, pagination is working properly or the stores route would not work either or it stands to reason lol.
Below is my var_dump output which seems fine to me, unless I missed something?
I also noticed that the pagination the blog page uses does not change for the viewport? When viewing the blog from a mobile viewport, the blog categories extend beyond the screen? I never altered that.
I also noticed that if you delete a category before deleting the post, it crashes the blog page. Alpine.js has multiple warnings in the generated HTML when inspecting the console which I doubt has an impact on the pagination, I just wanted to bring it to the attention of the creators.
Thank you!
object(Illuminate\Pagination\LengthAwarePaginator)#410 (11) { ["items":protected]=> object(Illuminate\Database\Eloquent\Collection)#404 (2) { ["items":protected]=> array(6) { [0]=> object(App\Models\Category)#402 (30) { ["connection":protected]=> string(5) "mysql" ["table":protected]=> string(11) "category_id" ["primaryKey":protected]=> string(2) "id" ["keyType":protected]=> string(3) "int" ["incrementing"]=> bool(true) ["with":protected]=> array(0) { } ["withCount":protected]=> array(0) { } ["preventsLazyLoading"]=> bool(false) ["perPage":protected]=> int(15) ["exists"]=> bool(true) ["wasRecentlyCreated"]=> bool(false) ["escapeWhenCastingToString":protected]=> bool(false) ["attributes":protected]=> array(8) { ["id"]=> int(2) ["name"]=> string(7) "Flowers" ["slug"]=> string(7) "flowers" ["image"]=> string(3) "n/a" ["created_at"]=> string(19) "2023-09-05 19:17:00" ["updated_at"]=> string(19) "2023-09-05 19:17:00" ["deleted_at"]=> string(19) "2023-09-28 02:43:00" ["description"]=> string(68) "This store category features flowers of all varying kinds and gifts!" } ["original":protected]=> array(8) { ["id"]=> int(2) ["name"]=> string(7) "Flowers" ["slug"]=> string(7) "flowers" ["image"]=> string(3) "n/a" ["created_at"]=> string(19) "2023-09-05 19:17:00" ["updated_at"]=> string(19) "2023-09-05 19:17:00" ["deleted_at"]=> string(19) "2023-09-28 02:43:00" ["description"]=> string(68) "This store category features flowers of all varying kinds and gifts!" } ["changes":protected]=> array(0) { } ["casts":protected]=> array(0) { } ["classCastCache":protected]=> array(0) { } ["attributeCastCache":protected]=> array(0) { } ["dates":protected]=> array(0) { } ["dateFormat":protected]=> NULL ["appends":protected]=> array(0) { } ["dispatchesEvents":protected]=> array(0) { } ["observables":protected]=> array(0) { } ["relations":protected]=> array(0) { } ["touches":protected]=> array(0) { } ["timestamps"]=> bool(true) ["hidden":protected]=> array(0) { } ["visible":protected]=> array(0) { } ["fillable":protected]=> array(6) { [0]=> string(4) "name" [1]=> string(4) "slug" [2]=> string(10) "created_at" [3]=> string(10) "updated_at" [4]=> string(11) "description" [5]=> string(5) "image" } ["guarded":protected]=> array(1) { [0]=> string(1) "*" } } [1]=> object(App\Models\Category)#401 (30) { ["connection":protected]=> string(5) "mysql" ["table":protected]=> string(11) "category_id" ["primaryKey":protected]=> string(2) "id" ["keyType":protected]=> string(3) "int" ["incrementing"]=> bool(true) ["with":protected]=> array(0) { } ["withCount":protected]=> array(0) { } ["preventsLazyLoading"]=> bool(false) ["perPage":protected]=> int(15) ["exists"]=> bool(true) ["wasRecentlyCreated"]=> bool(false) ["escapeWhenCastingToString":protected]=> bool(false) ["attributes":protected]=> array(8) { ["id"]=> int(3) ["name"]=> string(15) "Online-Services" ["slug"]=> string(15) "online-services" ["image"]=> string(3) "n/a" ["created_at"]=> string(19) "2023-09-17 01:42:00" ["updated_at"]=> string(19) "2023-09-17 01:42:00" ["deleted_at"]=> string(19) "2023-09-28 02:43:00" ["description"]=> string(186) "This store category features, Blogs, Broadband Internet, Domain Registrations, Email Marketing, Internet Service Providers, Search Engine, Web Design, Web Hosting/Servers, and Web Tools!" } ["original":protected]=> array(8) { ["id"]=> int(3) ["name"]=> string(15) "Online-Services" ["slug"]=> string(15) "online-services" ["image"]=> string(3) "n/a" ["created_at"]=> string(19) "2023-09-17 01:42:00" ["updated_at"]=> string(19) "2023-09-17 01:42:00" ["deleted_at"]=> string(19) "2023-09-28 02:43:00" ["description"]=> string(186) "This store category features, Blogs, Broadband Internet, Domain Registrations, Email Marketing, Internet Service Providers, Search Engine, Web Design, Web Hosting/Servers, and Web Tools!" } ["changes":protected]=> array(0) { } ["casts":protected]=> array(0) { } ["classCastCache":protected]=> array(0) { } ["attributeCastCache":protected]=> array(0) { } ["dates":protected]=> array(0) { } ["dateFormat":protected]=> NULL ["appends":protected]=> array(0) { } ["dispatchesEvents":protected]=> array(0) { } ["observables":protected]=> array(0) { } ["relations":protected]=> array(0) { } ["touches":protected]=> array(0) { } ["timestamps"]=> bool(true) ["hidden":protected]=> array(0) { } ["visible":protected]=> array(0) { } ["fillable":protected]=> array(6) { [0]=> string(4) "name" [1]=> string(4) "slug" [2]=> string(10) "created_at" [3]=> string(10) "updated_at" [4]=> string(11) "description" [5]=> string(5) "image" } ["guarded":protected]=> array(1) { [0]=> string(1) "*" } } [2]=> object(App\Models\Category)#400 (30) { ["connection":protected]=> string(5) "mysql" ["table":protected]=> string(11) "category_id" ["primaryKey":protected]=> string(2) "id" ["keyType":protected]=> string(3) "int" ["incrementing"]=> bool(true) ["with":protected]=> array(0) { } ["withCount":protected]=> array(0) { } ["preventsLazyLoading"]=> bool(false) ["perPage":protected]=> int(15) ["exists"]=> bool(true) ["wasRecentlyCreated"]=> bool(false) ["escapeWhenCastingToString":protected]=> bool(false) ["attributes":protected]=> array(8) { ["id"]=> int(6) ["name"]=> string(15) "Health-Wellness" ["slug"]=> string(15) "health-wellness" ["image"]=> string(3) "n/a" ["created_at"]=> string(19) "2023-09-18 05:26:00" ["updated_at"]=> string(19) "2023-09-18 05:26:00" ["deleted_at"]=> string(19) "2023-09-28 02:43:00" ["description"]=> string(188) "This store category features varying health and wellness Equipment, Green Living, Healthy Food, Nutritional Supplements, Pharmaceuticals ,Self Help, Vision Care, Weight Loss, and Wellness!" } ["original":protected]=> array(8) { ["id"]=> int(6) ["name"]=> string(15) "Health-Wellness" ["slug"]=> string(15) "health-wellness" ["image"]=> string(3) "n/a" ["created_at"]=> string(19) "2023-09-18 05:26:00" ["updated_at"]=> string(19) "2023-09-18 05:26:00" ["deleted_at"]=> string(19) "2023-09-28 02:43:00" ["description"]=> string(188) "This store category features varying health and wellness Equipment, Green Living, Healthy Food, Nutritional Supplements, Pharmaceuticals ,Self Help, Vision Care, Weight Loss, and Wellness!" } ["changes":protected]=> array(0) { } ["casts":protected]=> array(0) { } ["classCastCache":protected]=> array(0) { } ["attributeCastCache":protected]=> array(0) { } ["dates":protected]=> array(0) { } ["dateFormat":protected]=> NULL ["appends":protected]=> array(0) { } ["dispatchesEvents":protected]=> array(0) { } ["observables":protected]=> array(0) { } ["relations":protected]=> array(0) { } ["touches":protected]=> array(0) { } ["timestamps"]=> bool(true) ["hidden":protected]=> array(0) { } ["visible":protected]=> array(0) { } ["fillable":protected]=> array(6) { [0]=> string(4) "name" [1]=> string(4) "slug" [2]=> string(10) "created_at" [3]=> string(10) "updated_at" [4]=> string(11) "description" [5]=> string(5) "image" } ["guarded":protected]=> array(1) { [0]=> string(1) "*" } } [3]=> object(App\Models\Category)#399 (30) { ["connection":protected]=> string(5) "mysql" ["table":protected]=> string(11) "category_id" ["primaryKey":protected]=> string(2) "id" ["keyType":protected]=> string(3) "int" ["incrementing"]=> bool(true) ["with":protected]=> array(0) { } ["withCount":protected]=> array(0) { } ["preventsLazyLoading"]=> bool(false) ["perPage":protected]=> int(15) ["exists"]=> bool(true) ["wasRecentlyCreated"]=> bool(false) ["escapeWhenCastingToString":protected]=> bool(false) ["attributes":protected]=> array(8) { ["id"]=> int(7) ["name"]=> string(20) "Computer-Electronics" ["slug"]=> string(20) "computer-electronics" ["image"]=> string(3) "n/a" ["created_at"]=> string(19) "2023-09-18 05:27:00" ["updated_at"]=> string(19) "2023-09-18 05:27:00" ["deleted_at"]=> string(19) "2023-09-28 02:43:00" ["description"]=> string(185) "This category features a wide range of computers and electronics including but not limited too, Computer HW, Computer SW, Computer Support,Consumer Electronics, Green, and, Peripherals!" } ["original":protected]=> array(8) { ["id"]=> int(7) ["name"]=> string(20) "Computer-Electronics" ["slug"]=> string(20) "computer-electronics" ["image"]=> string(3) "n/a" ["created_at"]=> string(19) "2023-09-18 05:27:00" ["updated_at"]=> string(19) "2023-09-18 05:27:00" ["deleted_at"]=> string(19) "2023-09-28 02:43:00" ["description"]=> string(185) "This category features a wide range of computers and electronics including but not limited too, Computer HW, Computer SW, Computer Support,Consumer Electronics, Green, and, Peripherals!" } ["changes":protected]=> array(0) { } ["casts":protected]=> array(0) { } ["classCastCache":protected]=> array(0) { } ["attributeCastCache":protected]=> array(0) { } ["dates":protected]=> array(0) { } ["dateFormat":protected]=> NULL ["appends":protected]=> array(0) { } ["dispatchesEvents":protected]=> array(0) { } ["observables":protected]=> array(0) { } ["relations":protected]=> array(0) { } ["touches":protected]=> array(0) { } ["timestamps"]=> bool(true) ["hidden":protected]=> array(0) { } ["visible":protected]=> array(0) { } ["fillable":protected]=> array(6) { [0]=> string(4) "name" [1]=> string(4) "slug" [2]=> string(10) "created_at" [3]=> string(10) "updated_at" [4]=> string(11) "description" [5]=> string(5) "image" } ["guarded":protected]=> array(1) { [0]=> string(1) "*" } } [4]=> object(App\Models\Category)#398 (30) { ["connection":protected]=> string(5) "mysql" ["table":protected]=> string(11) "category_id" ["primaryKey":protected]=> string(2) "id" ["keyType":protected]=> string(3) "int" ["incrementing"]=> bool(true) ["with":protected]=> array(0) { } ["withCount":protected]=> array(0) { } ["preventsLazyLoading"]=> bool(false) ["perPage":protected]=> int(15) ["exists"]=> bool(true) ["wasRecentlyCreated"]=> bool(false) ["escapeWhenCastingToString":protected]=> bool(false) ["attributes":protected]=> array(8) { ["id"]=> int(8) ["name"]=> string(7) "Gourmet" ["slug"]=> string(7) "gourmet" ["image"]=> string(0) "" ["created_at"]=> string(19) "2023-09-18 05:28:44" ["updated_at"]=> string(19) "2023-09-18 05:28:45" ["deleted_at"]=> string(19) "2023-09-28 02:43:02" ["description"]=> string(1) "0" } ["original":protected]=> array(8) { ["id"]=> int(8) ["name"]=> string(7) "Gourmet" ["slug"]=> string(7) "gourmet" ["image"]=> string(0) "" ["created_at"]=> string(19) "2023-09-18 05:28:44" ["updated_at"]=> string(19) "2023-09-18 05:28:45" ["deleted_at"]=> string(19) "2023-09-28 02:43:02" ["description"]=> string(1) "0" } ["changes":protected]=> array(0) { } ["casts":protected]=> array(0) { } ["classCastCache":protected]=> array(0) { } ["attributeCastCache":protected]=> array(0) { } ["dates":protected]=> array(0) { } ["dateFormat":protected]=> NULL ["appends":protected]=> array(0) { } ["dispatchesEvents":protected]=> array(0) { } ["observables":protected]=> array(0) { } ["relations":protected]=> array(0) { } ["touches":protected]=> array(0) { } ["timestamps"]=> bool(true) ["hidden":protected]=> array(0) { } ["visible":protected]=> array(0) { } ["fillable":protected]=> array(6) { [0]=> string(4) "name" [1]=> string(4) "slug" [2]=> string(10) "created_at" [3]=> string(10) "updated_at" [4]=> string(11) "description" [5]=> string(5) "image" } ["guarded":protected]=> array(1) { [0]=> string(1) "*" } } [5]=> object(App\Models\Category)#397 (30) { ["connection":protected]=> string(5) "mysql" ["table":protected]=> string(11) "category_id" ["primaryKey":protected]=> string(2) "id" ["keyType":protected]=> string(3) "int" ["incrementing"]=> bool(true) ["with":protected]=> array(0) { } ["withCount":protected]=> array(0) { } ["preventsLazyLoading"]=> bool(false) ["perPage":protected]=> int(15) ["exists"]=> bool(true) ["wasRecentlyCreated"]=> bool(false) ["escapeWhenCastingToString":protected]=> bool(false) ["attributes":protected]=> array(8) { ["id"]=> int(9) ["name"]=> string(5) "Music" ["slug"]=> string(5) "music" ["image"]=> string(0) "" ["created_at"]=> string(19) "2023-09-18 05:29:10" ["updated_at"]=> string(19) "2023-09-18 05:29:11" ["deleted_at"]=> string(19) "2023-09-28 02:43:02" ["description"]=> string(1) "0" } ["original":protected]=> array(8) { ["id"]=> int(9) ["name"]=> string(5) "Music" ["slug"]=> string(5) "music" ["image"]=> string(0) "" ["created_at"]=> string(19) "2023-09-18 05:29:10" ["updated_at"]=> string(19) "2023-09-18 05:29:11" ["deleted_at"]=> string(19) "2023-09-28 02:43:02" ["description"]=> string(1) "0" } ["changes":protected]=> array(0) { } ["casts":protected]=> array(0) { } ["classCastCache":protected]=> array(0) { } ["attributeCastCache":protected]=> array(0) { } ["dates":protected]=> array(0) { } ["dateFormat":protected]=> NULL ["appends":protected]=> array(0) { } ["dispatchesEvents":protected]=> array(0) { } ["observables":protected]=> array(0) { } ["relations":protected]=> array(0) { } ["touches":protected]=> array(0) { } ["timestamps"]=> bool(true) ["hidden":protected]=> array(0) { } ["visible":protected]=> array(0) { } ["fillable":protected]=> array(6) { [0]=> string(4) "name" [1]=> string(4) "slug" [2]=> string(10) "created_at" [3]=> string(10) "updated_at" [4]=> string(11) "description" [5]=> string(5) "image" } ["guarded":protected]=> array(1) { [0]=> string(1) "*" } } } ["escapeWhenCastingToString":protected]=> bool(false) } ["perPage":protected]=> int(6) ["currentPage":protected]=> int(1) ["path":protected]=> string(37) "https://shop4charities.org/categories" ["query":protected]=> array(0) { } ["fragment":protected]=> string(10) "categories" ["pageName":protected]=> string(4) "page" ["onEachSide"]=> int(3) ["options":protected]=> array(2) { ["path"]=> string(37) "https://shop4charities.org/categories" ["pageName"]=> string(4) "page" } ["total":protected]=> int(35) ["lastPage":protected]=> int(6) }
Hi there,
It seems like that the category pagination is working as expected at the moment for both mobile and desktop:
Regarding the display problem, indeed it looks like that on desktop you have both the mobile and the desktop paginations displayed. It still works but visually you have 2 sets of buttons.
Can you share the blade view for that problematic page so I can try to spot anything? The var dump output does not show anything suspicious.
Here you go Bobby,
<!DOCTYPE html>
<comment Categories index.blade.php file>
@extends('theme::layouts.app')
@section('title', 'Category Index')
@section('content')
<div class="container mx-auto py-10 flex flex-col items-center justify-center">
<h1 class="text-5xl font-bold mb-8 text-black">Shop 4 Charities</h1>
<p class="text-base flex flex-wrap text-green-900 mb-8">This is the 28th Year the United States has recognized and celebrated March as National Disability Awareness Month! On February 26, 1987, President Ronald Reagan officially declared Proclamation 5613 making March National Disabilities Awareness Month.</p>
</div>
<div id="categories">
<div class="flex grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 p-2 shadow">
@foreach($categories as $category)
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<div class="mx-auto justify-center">
<div class="p-2">
<h2 class="text-lg font-semi-bold flex justify-center">{{ ucfirst($category->slug) }}</h2>
<h3 class="">{{ ucfirst($category->description) }}</h3>
<a href="{{ route('categories.show', $category->slug) }}" class="mt-2 inline-block bg-wave-400 hover:bg-blue-200 text-blue-800 py-2 px-4 rounded transition duration-300 ease-in-out flex justify-center">
View Category
</a>
</div>
</div>
</div>
@endforeach
</div>
<div class="pagination">
{{ $categories->fragment('categories')->links() }}
</div>
@endsection
Yeah I thought the var_dump looked fine. I was not sure if it was the viewport causing this or the HTML in my blade file. The HTML is different for my stores blade file. Below is the stores blade file.
<!DOCTYPE html>
<comment Stores index.blade.php file>
@extends('theme::layouts.app')
@section('title', 'Store Index')
@section('content')
@include('theme::partials.charities')
<div class="container mx-auto py-10">
<h1 class="text-5xl font-bold mb-8 text-black text-center">All Stores</h1>
<br>
<!-- Anchor tag added here -->
<div id="stores-listing"></div>
<div class="flex flex-wrap grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 shadow">
@foreach ($stores as $store)
<div class="max-w-md mx-1 mb-2 px-2">
<div class="h-full bg-white-500 shadow-xl rounded-xl overflow-hidden">
<div class="p-6">
<img src="{{ url('/storage/themes/Advertisers/' . $store->image) }}" alt="{{ $store->program_name }}">
<br>
<h2 class="sm:text-3xl text-black-500 mt-2 font-bold text-blue-500 text-center">{{ $store->category_name }}</h2>
<br><br>
<a href="{{ route('stores.show', $store->program_name) }}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex justify-center">
Visit this store page!
</a>
<br>
<br>
<p class="flex flex-col mt-auto text-gray-400">{{ $store->description }}</p> <!-- Add this line for the description -->
</div>
</div>
</div>
@endforeach
</div>
{{ $stores->fragment('stores-listing')->links() }}
</div>
@endsection
I also noticed on my mobile menu that when the page loads, the menu temporarily is displayed on page load and then disappears? I have not been able to determine why it does that.
Thanks a lot!
um, hello? I assume you're helping me now or giving Bobby the snippets? I have never interacted with you before so I do not know if you work with them or what.
Hi there!
Not sue what janejlocane meant by this comment, it might be spam. Will keep an eye on their activities.
The only difference that I can spot is the <div class="pagination"> in the categories blade view. Have you tried removing that and see if it helps?
Also the Stores blade view has pagination wrapped within a <div class="container mx-auto py-10">, while the Categories blade view has pagination directly under the root <div id="categories">. This might affect styles and could be why you're seeing two sets of buttons. I could suggest ensuring consistent container styles to avoid this.
Let me know how it goes
Hey Bobby,
I did remove the pagination div and it still does not work lol properly. I also put the pagination {{ $categories->fragment('categories')->links() }} outside all divs and it acted the same way. Whenever I move the pagination above the last div wrap, it bunches the pagination to one side of the page. Obviously, if i put it outside of all divs, it puts the pagination at the top of the page above my header.
So, when doing this project I had to alter when the viewport changed to mobile because the categories page was not displaying properly. I wonder if that is playing a part.
Ah yes indeed! That is a good catch @chrisd thanks for pointing that out!
Let me know how it goes once you add the closing div!
I checked all the divs and they are closed properly. The only other thing I can think that is causing this is when the viewport changes. I altered it because the categories page was not changing to mobile view port properly. The stores page had no issues with view ports or the pagination. I posted that blade file above and the tailwind classes are different which does make it render differently than the stores page.
I do not know what to do except check the view port because on mobile devices, the pagination works just fine.
It is driving me nutz that I cannot figure this out lol.
UPDATE: So, I was messing with the pagination. There is something wrong with these pages. When I removed @include('theme::partials.charities') from my stores page, it took my centered div cards and bunched them to the left of the screen. It is almost as if the view port the entire time is mobile view port? Oh, also, the pagination stopped working properly on the stores page when I removed the partial. But, when I put the partial back, the divs go back to the center of the page and pagination begins working properly again. What on earth could cause that?
Another update lol. I put a partial in the categories index.blade file and sure as shit, the pagination started working properly. I also just noticed there is a styling issue on these pages. The buttons on stores/categories pages both have hover affects and change colors. When I remove the partial from both index files (categories and stores) that styling disappears for some reason? These pages worked fine without the pagination present? Is there something I am doing wrong here?
Hey!
I just tested out the https://shop4charities.org/categories page and it seems like that the pagination is working as expected now.
Are you still seeing the issue on your end?
This has indeed been very perplexing 🤔
Hey Bobby,
How are you viewing the pages, desktop or mobile?
This is wild. I have never encountered this before and I have worked with several languages. I am going to try and explain this if I can through text.
So, before I put any pagination in my blade files, everything worked just fine. It rendered as it should on both view ports. This all started when I added pagination to the pages.
What will happen is, if I add just the pagination and no blade partials, such as {{ $stores->appends(['sort' => 'name'])->fragment('stores-listing')->links() }} it causes the entire page to render only in mobile view ports. However, when I add a blade partial, for whatever reason, it causes it to render properly on desktop and not just mobile.
Plus, only blade syntax files will make the page render on desktop. If I add a straight HTML partial to the page, it goes back to mobile view port only and the desktop view port is bunched to the left of the screen, expecting a mobile view port. I inspected the page and made it responsive and it does not leave the mobile view port.
My next question becomes, could that view port issue be caused by using only HTML in partials instead of adding tailwind classes and blade syntax? I want to say no simply based on the fact it uses a layout file for styling but have been wrong in the past.
When I try to inspect the HTML of that page there is an odd comment tag at the top of the page which might be causing the problem:
This HTML validator site pointed me to that direction btw:
https://validator.w3.org/
I could suggest trying to remove that comment tag and see if it helps.
This is not the case for the working page:
Yea I tried removing that comment already and for me it changed nothing lol.
Whenever I did the check at Validator W3, it showed me a large amount of errors and warnings for AlpineJS which is something I did not install.
From what I can see its mostly to do with the menus which we both know does not or should not affect the rendering of view ports lol. Or maybe in Laravel's case it does. If it does it will be a learning experience either way lol.
This even will affect the styling on the pages with my buttons and their colors disappearing.
However, with certain blade partials, the page renders correctly while other partials do not have this affect.
This is super confusing lol.
Hi there,
Yea, seems like the W3 validator is not working with Apline, so we could ignore that.
As this fixes the problem, would it work fo you if you were to use the partials that you've mentioned?