Level 102
Show the code that isn't working please
Jan 10, 2023
7
Level 8
InertiaJS ReactJS preserveScroll on Link
I am having trouble to preserveScroll since it only works on Link and from what I am seeing is that Link just uses GET, using a typical button fixes this problem, but then preserveScroll stops functioning.
Level 8
Apologies
import React from 'react'
import PrimaryButton from '../PrimaryButton.jsx'
import TextInput from '../TextInput.jsx'
import SelectBox from '../SelectBox.jsx'
import { Link, useForm } from '@inertiajs/inertia-react';
const StoreStudent = () => {
const gradient = "bg-gradient-to-tl from-slate-500 to-gray-500";
const { data, setData, post, processing } = useForm({
parent: '',
name: '',
});
const onHandleChange = (event) => {
setData(event.target.name, event.target.type === 'checkbox' ? event.target.checked : event.target.value);
};
const parents = [
{ id: 1, name: 'Josh', age: 35 },
{ id: 2, name: 'Jim', age: 23 },
{ id: 3, name: 'Sarah', age: 25 },
];
const submit = (e) => {
e.preventDefault();
console.log(data);
post(route('student.store', data));
};
return (
<>
<form onSubmit={submit}>
<div className={`bg-white overflow-hidden shadow-sm sm:rounded-t-lg ${gradient}`}>
<div className="p-4 text-lg text-left">Add Kin</div>
</div>
<div className="bg-white overflow-hidden shadow-sm sm:rounded-b-lg">
<div className="p-4 text-lg">
<p>Parent Account</p>
<SelectBox
name="parent"
id="parent"
className="w-full py-3 shadow"
objects={parents}
handleChange={onHandleChange}
/>
<p>Name</p>
<TextInput
type="text"
name="name"
id="name"
className="w-full py-3 shadow"
handleChange={onHandleChange}
/>
<Link
type="submit"
preserveScroll
className="
py-5
mt-8
w-full
inline-flex
items-center
px-4
bg-gray-800
border
border-transparent
rounded-md
font-semibold
text-xs
text-white
uppercase
tracking-widest
hover:bg-gray-700
focus:bg-gray-700
active:bg-gray-900
focus:outline-none
focus:ring-2
focus:ring-indigo-500
focus:ring-offset-2
transition
ease-in-out
duration-150"
>
Add
</Link>
</div>
</div>
</form>
</>
)
}
export default StoreStudent
<Link
type="submit"
preserveScroll
className="
py-5
mt-8
w-full
inline-flex
items-center
px-4
bg-gray-800
border
border-transparent
rounded-md
font-semibold
text-xs
text-white
uppercase
tracking-widest
hover:bg-gray-700
focus:bg-gray-700
active:bg-gray-900
focus:outline-none
focus:ring-2
focus:ring-indigo-500
focus:ring-offset-2
transition
ease-in-out
duration-150"
>
Add
</Link>
Level 102
@Randy_Johnson No worries. But I only see a Link with preserveScroll ?
Level 8
@Sinnbeck Yes, so, before it was like this.
<PrimaryButton
type="submit"
preserveScroll
className="
py-5
mt-8
w-full
inline-flex
items-center
px-4
bg-gray-800
border
border-transparent
rounded-md
font-semibold
text-xs
text-white
uppercase
tracking-widest
hover:bg-gray-700
focus:bg-gray-700
active:bg-gray-900
focus:outline-none
focus:ring-2
focus:ring-indigo-500
focus:ring-offset-2
transition
ease-in-out
duration-150"
>
Add
</PrimaryButton>
This would post the data, but wouldn't preserve scroll. So I changed it to Link so I can use the preserve scroll functionality, but the problem is now is that it doesn't POST.
Level 102
@Randy_Johnson You need add the preserveScroll to the post request
post(route('student.store'), {preserveScroll: true});
1 like
Level 8
Hey, thanks again Sinnbeck!
If anyone finds themselves here in the future: https://www.youtube.com/watch?v=OgBhTd5NYBw&ab_channel=ConstantinDruc
Final result:
const submit = (e) => {
e.preventDefault();
Inertia.post('dashboard/student', data, {
preserveScroll: true,
})
};
Level 102
@Randy_Johnson It works with both post() and Inertia.post(). post() is just a wrapper for Inertia.post() with the data already set :)
1 like
Please or to participate in this conversation.