Question 416167 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel 11 delete item with Bootstrap 5 modal – response is string, not object

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’?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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 IlluminateHttpResponse 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search