Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
12. Preserving page scrolling

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
We're now going to talk about preserving page scrolling, which is probably something else you're always going to use when you are submitting data through.
00:08
Now, just to demo this out, if I scroll down slightly and I hit post, notice that we're bumped to the top of the page. Now, that is standard behavior when you're working with any other app. Your browser will always bump you to the top of the page when you're redirected back to a new page.
00:25
But since we're working with a single page application here, it's probably likely that when we hit post here, we don't want this to the jump to the top of the page because we're technically not making a new request. So how do we get rid of this behavior?
00:40
This doesn't just apply to forms, it replies to any request within Inertia that includes going between pages as well. We'll talk a little bit about that later, but typically we'd apply that to a form. So I mentioned that you can pass a list of options through when you post a form.
00:58
We've used the on success callback here, but there are a bunch of other options that we can pass in here as well. And one of them, and one that you're going to use most often, is preserve scroll. By default, this is false. But if we swap this out to true, that's going to keep the same position after this request gets sent to the back end.
01:15
So let's just try this out. I'm going to scroll down, hit post, and you can see we've stayed in exactly the same place. Now, you might not want this functionality, but most of the time, particularly if your forms are much further down the page,
01:28
you're not going to want the bump to bump the user all the way to the top, particularly when you are showing validation errors like this. So we're going to explore later on in the course other places that preserve scrolling can be used. But for now, that is a really quick tip on something that you're going to use a lot within Inertia.
28 episodes•2 hrs 20 mins

Overview

Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.

Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.

To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.