How do I delete an event FullCalendar by posting to flask via ajax and updating SQLAlchemy database?

Question

I'm completely baffled.

I'm making a seizure tracking app and I'm trying to allow deletion of events in Fullcalendar with a pop-up. When the pop-up is clicked the id of the event should be posted to the @app.route('/delete') and the SQLAlchemy database should be updated, the event removed, and the calendar should be rendered again minus the event.

Here is my terrible attempt at the deletion script.

<script>
        document.addEventListener("DOMContentLoaded", function () {
            let calendarEl = document.getElementById('calendar');

            let calendar = new FullCalendar.Calendar(calendarEl, {
                aspectRatio: 2.25,
                selectable: true,
                selectHelper: true,
                editable: true,
                expandRows: true,
                timeZone: 'Europe/London',
                defaultView: 'listMonth',
                themeSystem: 'bootstrap',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                weekNumbers: true,
                dayMaxEvents: true,
                events: [
                    {% for event in events %}
                        {
                            id: '{{ event.id }}',
                            title: '{{event.seizure_type}} {{event.note}}',
                            start: '{{event.date}}',
                            textColor: '#000',
                            {% if event.seizure_type == 'Strong' %}
                                backgroundColor: 'red',
                            {% elif event.seizure_type == 'Medium' %}
                                backgroundColor: 'orange',
                            {% else %}
                                backgroundColor: 'yellow',
                            {% endif %}
                        },
                    {% endfor %}
                ],
                eventTimeFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: false
                },
                eventClick: function (event) {
                    if(confirm("Are you sure you want to delete it?")){
                        var event_id = event.id
                        $.ajax({
                            url:"{{ url_for('delete') }}",
                            type: "POST",
                            data: {id: event_id},
                            success:function()
                            {
                                alert("Event Removed")
                            }
                        })
                    }
                }
            });

            calendar.render();
        });
    </script>

and the @app.route('/delete')

@app.route("/delete", methods=['GET', 'POST'])
def delete(id):
    event_id = request.data.id
    event_to_delete = Seizures.query.get(event_id)
    db.session.delete(event_to_delete)
    db.session.commit()
    return redirect(url_for('show_calendar'))

I'm sure this is possible but I'm not versed in JS yet.

Answer 1

The issue turned out not to be with the Javascript but with the flask @app.route. While before I was using request.data.id to try to get the data, I should have been using request.form['id']. The event is now being deleted from FullCalendar and is being deleted from the database.

Solution:

@app.route("/delete", methods=['GET', 'POST'])
def delete():
    event_id = None
    if request.method == 'POST':
        event_id = request.form['id']
        event_to_delete = Seizures.query.get(event_id)
        db.session.delete(event_to_delete)
        db.session.commit()
        return redirect(url_for('show_calendar'))