#Scrolling

1 messages · Page 1 of 1 (latest)

void sorrel
#

I'm using the legacy version of Inertia "^0.11.1". I don't understand why my page is scrolling back to the top after submitting my forms.
Here is my code.

<script setup>
import {useForm} from "@inertiajs/inertia-vue3";
import InputError from "@/Components/InputError.vue";

let form = useForm({
    email: null,
    first_name: null,
    last_name: null,
});

let submit = () => {
    form.post('/subscribe', {
        onSuccess: () => {
            form.reset();
        },
        // onError: () => {
        //     alert('Something went wrong. Try again later.');
        // },
    }, {preserveScroll:true})
};
</script>

Shouldn't the preserveScroll:true statement prevent this? What am I missing? The '/subscribe' endpoint calls a 3rd party API but doesn't have an explicit redirect.

#

Here is my current SubscribeController

<?php

namespace App\Http\Controllers\Newsletter;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
use Inertia\Inertia;
use Spatie\MailcoachSdk\Facades\Mailcoach;

class SubscribeController extends Controller
{
    public function store(Request $request)
    {
        $validatedData = $request->validate([
            'email' => 'required|email',
            'first_name' => 'required',
            'last_name' => 'required',
        ]);

        $subscriber = Mailcoach::createSubscriber(
            emailListUuid: 'b1b69aea-7b9f-48cb-a1a1-f2988be1c173',
            attributes: [
                'email' => $validatedData['email'],
                'first_name' => $validatedData['first_name'],
                'last_name' => $validatedData['last_name'],
                'tags' => ['Electrical', 'Wellhead Solutions', 'Spooling', 'Production Accessories'],
                'extra_attributes' => [
                    'source' => 'website'
                ],
                'subscribed_at' => null
            ]
        );

        $request->session()->flash('alert', ['type' => 'success', 'message' => 'Thank you for subscribing. Check your email to confirm your subscription.']);

    }
}
unique swift
#

First of all, you shouldn't call third party endpoints with Inertia, because a request made with Inertia has to return an Inertia response. Inertia also generally can't be used cross domain, because it utilizes the history API

void sorrel
#

@unique swift So should I just be making a regular axios call instead of using the Inertia form helper? This is my first big project using Inertia. Still getting my feet wet.

#

My 3rd party API call isn't really cross domain. It is an API call to a Laravel package operating on the same domain. Also, this controller action isn't meant to redirect to another page. The user simply fills out the fields for the signup form then gets a flash notification upon success.

void sorrel
#

Simply didn't read the documentation correctly. My IDE was hinting that preserveScroll could be entered as a 3rd argument to form.post, when in fact it needed to be added in the options argument along with everything else.