CODEWITHSUNDEEP
phplaravelvue.jsdatatablesinertiajs
Dom
Dom

Reputation: 11

Inertia.js not calling onSuccess() on delete route

I have a delete route Inertia.js so that when I delete an item, it will redirect back to the page that I am on. However, this is not calling 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 datatable is not recreated as I want it to. Here is what it looks like before:

correct image

correct image

And this is how it is afterwards:

wrong image

wrong image

I tried changing the controller code to this:

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

However the datatable still does not show as it should.

Upvotes: 1

Views: 2887

Answers (2)

stlr
stlr

Reputation: 21

I'm a bit late to the party here, but basically, the router.delete() method doesn't take the same arguments as router.post() or router.get(). So you should build your request like this, with only two arguments:

router.delete(route('YOUR ROUTE'), {
    onSuccess: () => {
        ...
    }
    onError: () => {
        ...
    }
});

Upvotes: 2

hanafi naufal
hanafi naufal

Reputation: 51

1: set redirect back with 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 component.

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

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

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

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

Upvotes: 1

Related Questions