POST onSuccess getting response

Level 63

And you don't see anything in the console ?

Level 14

@vincent15000 - This is what I get in the console:

Object { component: "Index", props: { errors: {]}, url: "/book/confirm", version: "...", scrollRegions: [], rememberedState: {} }

1 like

vincent15000

Level 63

@hjortur17 Try this.

form.post("/api/book/process", {
	onSuccess: () => console.log('book post ok'),
});

Level 14

@vincent15000 - It works, what I commented above is what happens when I console out the resp<. Like this:

 form.post("/api/book/process", {
	onSuccess: (resp) => console.log(resp);
});

1 like

vincent15000

Level 63

@hjortur17 I just discover InertiaJS, but ... perhaps you cannot specify any variable and onSuccess is just to specify a callback without any variable.

1 like

Level 102

@hjortur17 you get the data as part of the props for the page

2 likes

rodrigo.pedra

Level 56

Well you are sending back redirect header, even if you manage to send something in the response body Axios, fetch or even XMLHttpRequest will automatically follow the redirect before sending anything back to the JavaScript code that initiated the request.

This means the AJAX request will follow the redirect, not the browser. This is why you are getting back the response from your /book/confirm route in your response payload. The redirect actually happened, but not in the way you were expecting.

Also redirect()->with('key', 'value') adds a flash variable to the current session, which is stored server side, so no data is added to the response.

I guess you want something like this:

// server-side

return [
	'verificationCode' => '2ef8ec654c'
];

and then you redirect on the JS side inside your onSuccess callback.

If you need to send the redirect URL along you can add it to the payload:

// server-side

return [
	'verificationCode' => '2ef8ec654c',
    'url' => url('/book/confirm'),
];

Just for completeness, in Axios you can disable following redirects only when using it with a node.js script, not in the browser.

1 like

Level 14

@rodrigo.pedra - Now I get different thing. Now Inertia opens a pop-up on my screen with a message like this: All Inertia requests must receive a valid Inertia response, however a plain JSON response was received.{"verificationCode":"2ef8ec654c"}

That's we I was trying to use Laravel's response->json([])

1 like

Level 102

@hjortur17 if you want to return plain json, don't use inertia for the request. Just use plain axios or similar

1 like

Level 14

@Sinnbeck - But I wanted to use Inertia form.post to get to use the form helpers. Isn't there any way to return Inertia response with JSON?

1 like

Level 102

@hjortur17 you return a response with Inertia::render() with the data, and inertia will update your props with the data. You can use only: ['some_data'] to get specific data only

Thinking of it a bit like a regular form, might make it easier to understand (except it's done using ajax)

2 likes

rodrigo.pedra

Best Answer

Level 56

@hjortur17

Well you either have a Inertia response, but with no response body, which is what your redirect was already doing.

Or you want to send data back, but then loose the goodies from the Inertia's form helper, as outlined on Inertia docs: https://inertiajs.com/forms#xhr-fetch-submissions

As a middle ground, what you can try is:

1. js initiate request:

 form.post("/api/book/process");

2. first endpoint return a redirect and flash the data to the session

return redirect('/book/confirm')->with(['verificationCode' => '2ef8ec654c']);

3. The controller handling the redirected page, send the verificationCode from the session as a prop:

class BookController extends Controller {
    public function index()
    {
        // reflash to restore the flashed content in session
        // in case the user reloads this page
        session()->reflash();
        
        return Inertia::render('Index', [
            'verificationCode' => session('verificationCode'),
        ]);
    }
}

Then you can do something with the verification code on the client side.

This is not the same thing you were expecting (redirect response with a response body) but it is good compromise, in my opinion.

3 likes

Level 102

@rodrigo.pedra +1. I do this for stuff like check box settings that's saved to session

2 likes