Level 22
I have the same issue as well.
Dec 11, 2020
12
Level 17
Laravel Jetstream Inertia returing data from axios request
I have a contact form within a modal and I want to send that form using a regular axios/ajax request.
this.form.post(route('contact-form.submit'), {
preserveScroll: true
}).then(response => {
if (! this.form.hasErrors()) {
this.sendingMessage = false
}
console.log(response.data);
})
On the server-side I was trying to return some data(success message) back, using the regular Laravel response method:
return response()->json(['key' => 'some value']);
but then I got a white modal that states at the top: "All Inertia.js requests must receive a valid Inertia.js response, however a return plain JSON response was received."
I looked then on some other vendor methods that does some similar ajax updates, and in those responses, it something like this:
return back(303)->with('key', 'some value');
After few failed tries, I tried with a regular axios request, but now I got the CSRF missmatch token, but in bootstrap.js file, the token it's added to the axios header by default. And also inertia uses axios under the hood, so why in this case works?
So i just want a regular ajax request using inertia that returns back some data from the server but without redirect to another page.
Level 17
I found this way in the end if somebody needs: in AppServiceProvider boot():
Inertia::share('flash', function (Request $request) {
return [
'message' => $request->session()->get('message')
];
});
then, in any controller you can pass data to message variable which will be present in all components $page as a prop
return back()->with('message', 'some data to send');
Level 4
I think you are describing the issues I am experiencing today. I logged a request for documentation update on this as it makes no sense not to specify this in the Jetstream documentation:
https://github.com/laravel/jetstream/issues/760
Level 2
Look at this -> https://inertiajs.com/forms
And this -> https://laravel-news.com/laravel-jetstream-banners
Level 4
But why would you deliver a session via Ajax rather than a simple response? I don't get it.
Level 2
Or try this:
return back()->with('key', 'some value');
Level 4
Remember, I am calling an external API and just need its response.
Level 2
I don't know why it is not working. I am new in inertia too. But I think you should call the external API from your controller. I don't know what you are working on, but I think it would be better for your code organization too. If you building a monolithic app, just keeps all the logic on the backend.
Level 4
yes this is what I am doing.
imagine a button on the front end called "fetch API data". This button sends the request via axios to the controller, the controller fetches the third party API data and sends a simply json response.
I have done that for many years with Laravel without a problem, but with Jetstream it does not work when you try to bypass the inertia request with an axios request...it is weird.
It should be so simple, but it is not working and the Laravel team is really not helpful on this. You find many posts online about this, no answers.
Level 1
I am facing the same problem!
Level 4
I find it so weird because so many people use this and no one is able to answer the issue. I posted it on Reddit, Youtube, stackoverflow, Laracast, asked the Laravel team, Asked the Intertia maker....but no luck. I am unable to use axios when Intertia is installed....A lot of people seem to have the same issue but no reply on the problem. just sooooo weird. I bet it is something very stupid....but cannot work it out lol because it is not mentioned anywhere!
1 like
Level 1
I know this is old, but If you have axios set up in the bootstrap.js or import it by import axios from 'axios', just call axios directly instead of using this.form. useForm() (vue3) will perform hard reload I think that's why you've got white modal (cmiiw). just do it like :
const form = useForm({
myField: 'awesome',
tetris: 25
});
........
axios.post(route('some.route'), form).then(res => {
console.log(res.data)
}).catch(err => {
console.error(err)
}).finally(() => {alert('is done')});
and make sure the response is json instead of redirect. I do this a lot.
4 likes
Please or to participate in this conversation.