Some context for my question:

My current project is an apartment booking homepage with Django (including allauth). Depending on who is logged in, different content is displayed. When a regular user (guest) logs in a Booking subpage “your-bookings.html” is displayed with an overview of the individual guests’ bookings. When a superuser (apartment host) logs in a Booking subpage “all-bookings.html” is displayed with an overview of all guests’ bookings. I’ve added ‘cancel’ buttons to those pages so that the guest can cancel their booking by clicking the button that sets the booking status from “requested” to “cancelled” in the database. The same function should also be available for the host with regard to all guests’ bookings.

your-bookings.html (functionality works as expected)

<h1>Your Bookings</h1>

{% if user.is_authenticated %}
{% for booking in object_list %}

<div class="card mx-auto" style="width:25rem;background-color:#e4dee8;">
    <div class="card-body">
        <h3 class="card-title">Booking number {{booking.id}}</h3><br>
        <h6 class="card-subtitle mb-2 text-body-secondary">
            <b>Booking date:</b><br>{{booking.booking_date}}<br><br>
            <b>Status:</b> {{booking.booking_status}}<br><br>
        </h6>
        <p class="card-text">
            <b>Name:</b><br>
            {{booking.first_name}} {{booking.last_name}}<br>
            [...]
            <b>Your message:</b><br>
            {{booking.message}}<br>
        </p>
        {% if booking.booking_status == "Requested" %}
        <button class="btn btn-card-cancel cancel border-dark" data-booking_id="{{ booking.id }}">Cancel Booking</button>
        {% endif %}
    </div>
</div>
<br>

{% endfor %}
{% endif %}

all-bookings.html (functionality does not work as expected)

<h1>All Bookings</h1>

{% if user.is_superuser %}
{% for bookings in object_list %}

<div class="card mx-auto" style="width:25rem;background-color:#e4dee8;">
    <div class="card-body">
        <h3 class="card-title">Booking number {{bookings.id}}</h3><br>
        <h6 class="card-subtitle mb-2 text-body-secondary">
            <b>Booking date:</b><br>{{bookings.booking_date}}<br><br>
            <b>Status:</b> {{bookings.booking_status}}<br><br>
        </h6>
        <p class="card-text">
            <b>Name:</b><br>
            {{bookings.first_name}} {{bookings.last_name}}<br>
            [...]
            <b>Your message:</b><br>
            {{bookings.message}}<br>
        </p>

        {% if bookings.booking_status == "Requested" %}
        <button data-booking_id="{{ booking.id }}" class="btn btn-card-cancel cancel border-dark">Cancel
            Booking</button><br><br>
        {% endif %}
    </div>
</div>
<br>

{% endfor %}
{% endif %}

urls.py

from django.urls import path
from . import views


urlpatterns = [
    path('your-bookings/', views.BookingList.as_view(), name='your-bookings'), 
    path('all-bookings/', views.AllBookingsList.as_view(), name='all-bookings'),
    path('cancel_booking/<int:booking_id>', views.cancel_booking, name='cancel_booking'),
]

views.py

def cancel_booking(request, booking_id):
    """
    Functionality to cancel a booking
    """
    booking = get_object_or_404(Booking, pk=booking_id)
        
    if booking.user == request.user or user.is_superuser:
        booking.booking_status = "Cancelled"
        booking.save()
        messages.add_message(request, messages.SUCCESS, 'The booking has been cancelled!')
    else:
        messages.add_message(request, messages.ERROR, 'There was an error cancelling the booking.')
    
    return HttpResponseRedirect(reverse('all-bookings'))

manage-bookings.js

document.addEventListener("DOMContentLoaded", function(){  

  const cancelButtons = document.getElementsByClassName('cancel');

  for (let button of cancelButtons) {
      button.addEventListener("click", (e) => {
      
      // get booking id from dataset of button clicked
      let bookingId = button.dataset.booking_id;
      // insert inner text to cancelled booking button
      button.innerText = "Cancelled!";
      // read current URL
      let currentUrl = window.location.href;
      // remove unused part of URL
      let newUrl = currentUrl.replace('/all-bookings/', '');
      // redirect to cancel booking URL with booking number as argument
      window.location.href = `${newUrl}/cancel_booking/${bookingId}`;

    });
  }
});

The issue I’m having is that the functionality for cancelling bookings on the guests your-bookings page works as expected and on the hosts all-bookings page it does not, even though it is the same code.

For the all-bookings page I have changed return HttpResponseRedirect(reverse(‘your-bookings’)) to return HttpResponseRedirect(reverse(‘all-bookings’)) in views.py and let newUrl = currentUrl.replace(‘/your-bookings/’, ”); to let newUrl = currentUrl.replace(‘/all-bookings/’, ”); in manage-bookings.py

When I try cancelling a booking on the all-bookings page for hosts I’m being directed from […]gitpod.io/bookings/all-bookings/ to […]gitpod.io/bookings/all-bookings/cancel_booking/ which throws a Page not found (404) error. This problem does not occur when I cancel a booking on the your-bookings page for guests – there the page is being redirected from […]gitpod.io/bookings/your-bookings/ to […]gitpod.io/bookings/your-bookings/ and the status in the booking details changes from “Requested” to “Cancelled”.

I can’t find the problem here and would appreciate help a lot.