web.php:

Route::delete('/roles/{id}/delete', [RoleController::class, 'delete'])->name('roles.delete');

RoleController.php:

public function delete($id): string
    {
        $data = [
        'id' => $id
    ];

    return response()->json($data, 200);
}

index.blade.php:

<a href="{{ route('roles.delete', $role->id) }}" class="btn btn-danger btn-xs btn-action" data-bs-toggle="tooltip" data-bs-custom-class="ls-tooltip" title="{{ __('Delete') }}" data-action-message="{{ __('Delete this role?') }}"><i class="fas fa-trash"></i></a>

<div class="modal fade" id="confirm_action">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h1 class="modal-title fs-5 text-white">{{ __('Please confirm') }}</h1>
            </div>
            <div class="modal-body">
                <div class="modal-message"></div>

                <div class="mt-1 d-flex justify-content-end">
                    <form id="form_delete" method="post">
                        @csrf
                        @method('DELETE')

                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-danger ms-2">{{ __('Delete') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

app.js:

const confirm_action = document.getElementById('confirm_action');
const btn_action = document.querySelectorAll('.btn-action');

if (typeof(confirm_action) != 'undefined' && confirm_action != null) {
    const modal = new bootstrap.Modal(confirm_action);
    const form = document.getElementById('form_delete');

    let url, id, message;

    confirm_action.addEventListener('show.bs.modal', event => {
        const confirm_text = confirm_action.querySelector('.modal-message');
        confirm_text.textContent = message;
    });

    form.addEventListener('submit', event => {
        event.preventDefault();console.log(url);

        axios.delete(url, {
            data: {
                id: id,
            },
        }).then(response => {
            if (response.status === 200) {
                let data = response.data;
                console.log(data);
            }
        }).catch(error => {
            console.log(error);
        });
    });

    btn_action.forEach(btn => {
        btn.addEventListener('click', event => {
            event.preventDefault();
            url = btn.getAttribute('href');
            id = btn.getAttribute('data-role-id');
            message = btn.getAttribute('data-action-message');
            modal.show();
        });
    });
}

I get the following response as a string:

HTTP/1.0 200 OK
Cache-Control: no-cache, private
Content-Type:  application/json
Date:          Sat, 23 Nov 2024 07:07:09 GMT
{"id":"7"}

But how do I get the data 'id'?

web.php:

Route::delete('/roles/{id}/delete', [RoleController::class, 'delete'])->name('roles.delete');

RoleController.php:

public function delete($id): string
    {
        $data = [
        'id' => $id
    ];

    return response()->json($data, 200);
}

index.blade.php:

<a href="{{ route('roles.delete', $role->id) }}" class="btn btn-danger btn-xs btn-action" data-bs-toggle="tooltip" data-bs-custom-class="ls-tooltip" title="{{ __('Delete') }}" data-action-message="{{ __('Delete this role?') }}"><i class="fas fa-trash"></i></a>

<div class="modal fade" id="confirm_action">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h1 class="modal-title fs-5 text-white">{{ __('Please confirm') }}</h1>
            </div>
            <div class="modal-body">
                <div class="modal-message"></div>

                <div class="mt-1 d-flex justify-content-end">
                    <form id="form_delete" method="post">
                        @csrf
                        @method('DELETE')

                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-danger ms-2">{{ __('Delete') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

app.js:

const confirm_action = document.getElementById('confirm_action');
const btn_action = document.querySelectorAll('.btn-action');

if (typeof(confirm_action) != 'undefined' && confirm_action != null) {
    const modal = new bootstrap.Modal(confirm_action);
    const form = document.getElementById('form_delete');

    let url, id, message;

    confirm_action.addEventListener('show.bs.modal', event => {
        const confirm_text = confirm_action.querySelector('.modal-message');
        confirm_text.textContent = message;
    });

    form.addEventListener('submit', event => {
        event.preventDefault();console.log(url);

        axios.delete(url, {
            data: {
                id: id,
            },
        }).then(response => {
            if (response.status === 200) {
                let data = response.data;
                console.log(data);
            }
        }).catch(error => {
            console.log(error);
        });
    });

    btn_action.forEach(btn => {
        btn.addEventListener('click', event => {
            event.preventDefault();
            url = btn.getAttribute('href');
            id = btn.getAttribute('data-role-id');
            message = btn.getAttribute('data-action-message');
            modal.show();
        });
    });
}

I get the following response as a string:

HTTP/1.0 200 OK
Cache-Control: no-cache, private
Content-Type:  application/json
Date:          Sat, 23 Nov 2024 07:07:09 GMT
{"id":"7"}

But how do I get the data 'id'?

• laravel
• axios
• bootstrap-modal

• check your code here <form id="form_delete" method="post"> – Abed Putra Commented Nov 23, 2024 at 1:25
• what's wrong with that? – linuxoid Commented Nov 23, 2024 at 1:29
• @Daedalus, doh! exactly. I spent hours trying to figure out what's wrong ))) Thank you very much – linuxoid Commented Nov 23, 2024 at 7:15
• 1 For the record, I initially deleted my comment because I at first thought I was wrong and needed to reread the question; my comment was that the return type of the method was string, thus coercing the response to a string. – Daedalus Commented Nov 23, 2024 at 7:17

2 Answers 2

Your problem is your method:

public function delete($id): string
    //                         ^ this
    {
        $data = [
        'id' => $id
    ];

    return response()->json($data, 200);
}

The return type of the method is string, and according to the php documentation, php will coerce types to the type expected; in this case, string.

Normally Laravel uses the Illuminate\Http\Response type. I don't know enough about Laravel internals to describe why it, or Symfony, needs that specific type of object to correctly output the response as you want it.

The fix in this case is to of course remove the type coercion from the method, or set it to the correct value.

I'm sure that your url = undefined at axios.delete(url, { -> axios will get url="your web url" -> and "your web url" just Supported methods: GET, HEAD, POST."

Solution:

Add hidden url field in form

   <form id="form_delete" method="post">
                        @csrf
                        @method('DELETE')
                        <input type="hidden" id="form_url" />
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn btn-danger ms-2">{{ __('Delete') }}</button>
   </form>

Button clicked => set url for hidden field

Change form from addEventListener to submit event

<form id="form_delete" onsubmit="yourSubmitFn()" method="post">

Because when you add event listener => js will store old url and after that if you change url => js still keep old url value