Miggle
Miggle

Reputation: 31

Getting error for PUT 500 Internal Server Error

The full error: PUT http://127.0.0.1:8000/api/event/107 500 (Internal Server Error). I am trying to update an existing event within my DB. I have the fetch() setup so it uses the 'PUT' method in my /api/event/${eventid}.

      const eventid = arg.event.id;
      console.log(arg.event.id); // ID is logged here
      const eventData = { // Event Data to be sent off is here
        start: arg.event.start.toISOString(),
        end: arg.event.end.toISOString(),
      };
      const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
      fetch(`/api/event/${eventid}`, {
        method: 'PUT',
        headers: {
          "X-CSRF-Token": csrfToken,
        },
        body: encodeFormData(eventData),
      })
      .then(response => console.log(response))
      .catch(error => console.log(error));
      console.log("Complete");

This connects to my route as such:

Route::put('/event/{eventid}', [CalendarController::class, 'update']);

which also connects to my Controller:

    public function update(Request $request, $eventid)
    {
        dd($request->id);
        $booking = Booking::findOrFail($eventid);
        $booking->start_date = $request->start;
        $booking->end_date = $request->end;
        $booking->save();
        return response()->json($booking);
    }

How can I solve the 500 error? There is no obvious reason to me why it would fail to connect. Thanks.

Upvotes: 0

Views: 1593

Answers (1)

Noman Saleem
Noman Saleem

Reputation: 506

You can also do this

https://laravel.com/docs/8.x/routing#form-method-spoofing

 const eventid = arg.event.id;
  console.log(arg.event.id); 
  const eventData = { 
    start: arg.event.start.toISOString(),
    end: arg.event.end.toISOString(),
    _method:"PUT" //add method field
  };
  const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
  fetch(`/api/event/${eventid}`, {
    method: 'POST', // POST method
    headers: {
      "X-CSRF-Token": csrfToken,
    },
    body: encodeFormData(eventData),
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));
  console.log("Complete");

Upvotes: 1

Related Questions