Inertia reloading page on some requests Hi I'm new to inertia when I am trying to add data from form and send request to backend after creating/updating/deleting record from db I'm returning Interia::render(route('admin_dashboard')); but here Inertia is reloading my page . May anyone help me to solve problem . Thanks in advance
Front End Code
<form
class="p-10 bg-white rounded shadow-xl"
@submit.prevent="handleSubmit"
>
<p
class="text-lg text-gray-800 font-medium pb-4"
>
Add Dealer
</p>
<div class="mt-4">
<label
class="block text-sm text-gray-600"
for="cus_name"
>Name *
</label>
<input
class="w-full px-5 py-1 text-gray-700 bg-gray-200 rounded"
id="cus_name"
name="cus_name"
type="text"
required=""
placeholder="Your Name"
aria-label="Name"
v-model="form.name"
/>
</div>
<div class="mt-4">
<label
class="block text-sm text-gray-600"
for="cus_email"
>Email *</label
>
<input
class="w-full px-5 py-1 text-gray-700 bg-gray-200 rounded"
id="cus_email"
name="cus_email"
type="text"
required=""
placeholder="Your Email"
aria-label="Email"
v-model="form.email"
/>
</div>
<div class="mt-4">
<label
class="block text-sm text-gray-600"
for="pass"
>Password *</label
>
<input
class="w-full px-5 py-1 text-gray-700 bg-gray-200 rounded"
id="pass"
type="password"
required=""
placeholder="Password"
v-model="form.password"
/>
</div>
<div class="mt-4">
<label
class="block text-sm text-gray-600"
for="type"
>Dealer Type *</label
>
<select
v-model="form.type"
class="w-full px-5 py-2 text-gray-700 bg-gray-200 rounded"
id="type"
>
<option disabled value="">
Select dealer type
</option>
<option>Basic</option>
<option>Pro</option>
<option>Subscribed</option>
</select>
</div>
<div class="mt-6">
<button
class="px-6 py-1 text-white font-light tracking-wider bg-gray-900 rounded"
type="submit"
>
Save
</button>
</div>
</form>
const form = useForm({
name: "",
email: "",
password: "",
type: "",
});
function handleSubmit() {
if (form.name == "" || form.email == "" || form.password == "") {
console.log("Here");
alert("* Shows these fields are required");
return;
}
form.post(route("add_dealer"));
}
Back end code
Route::post('/add-dealer', [DealerController::class, 'create'])->name('add_dealer');
public function create(Request $reqeust)
{
$validated = $reqeust->validate([
'name' => 'required',
'email' => 'required',
'password' => 'required',
'type' => 'required'
]);
if ($validated) {
Dealer::create($validated);
return Inertia::location(route('dealers'));
}
return redirect()->back();
}
The issue is that you are returning Inertia::render(route('admin_dashboard')) from your backend controller, which is causing the page to reload. Instead, you should be returning Inertia::location(route('admin_dashboard')) to redirect the user to the admin dashboard without reloading the page.
Here's the updated backend code:
Route::post('/add-dealer', [DealerController::class, 'create'])->name('add_dealer');
public function create(Request $request)
{
$validated = $request->validate([
'name' => 'required',
'email' => 'required',
'password' => 'required',
'type' => 'required'
]);
if ($validated) {
Dealer::create($validated);
return Inertia::location(route('admin_dashboard'));
}
return redirect()->back();
}
Note the use of Inertia::location() instead of Inertia::render(). This should solve the issue of the page reloading.
When I'm using Inertia::render('Dealers') then it shows this error
Uncaught (in promise) TypeError: this.resolveComponent is not a function
at n2.setPage (router.ts:378:33)
at router.ts:323:19
@laravel_ninja have u fixed it mate? Im getting the same error while using reactjs and laravel
@SenJu I'm so sorry for the late reply I just checked it today. Yes mate I solved it by using simple Laravel redirects
Like
~~
return to_route('dealers_listing') OR
return redirect()->route('dealers_listing')
~~
I'm using named routes.
Please sign in or create an account to participate in this conversation.
