Deleting a route in Inertia.js cannot trigger the onSuccess() callback

Question

I have a delete route in Inertia.js so that when I delete an item it redirects back to the page I'm on. However, this is not calling the onSuccess() function in the Inertia destroy route.

Example.vue

deleteSubmit(id) {
    this.accountsDataTable.destroy();
    Inertia.destroy(route('installers.destroy', {id: id}), {}, { 
        preserveState: true, 
        onSuccess: () => {
            this.accountsDataTable = $('#table').DataTable({
                columnDefs: [{
                    target: 1
                }]
            });
        }
    })
},

ExampleController.php

//Validate the request
//Create the installer
//Redirect back on success
return redirect()->route('installers.index')->with('success', 'Installer was successfully deleted.');

However, the data table is not recreated the way I want. This is what it looked like before:

Correct Image

The situation after

is as follows:

Picture error

I tried changing the controller code to:

return redirect()->back()->with('success', 'Installer was successfully deleted');

But the data table still doesn't display as it should.

Answer 1

1: Set redirection using message data in the controller.

return redirect()->back()->with([
    'messaage' => 'Installer was successfully deleted',
])

2: HandleInertiaRequests middleware.

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'flash' => [
            'message' => fn () => $request->session()->get('message'),
        ],
    ]);
}

3: in the component.

<template>
{{ $page.props.flash.message }}
</template>

<script setup>
import { usePage } from '@inertiajs/inertia-vue3'

const message = usePage().props.value.flash.message
</script>

Documentation:https://inertiajs.com/shared-data