How to Update/Cancel Orders using SQL

#webdev

`You’re basically asking two things:

How to update order status (cancel)
How to reflect that visually (colour, etc.)

Let’s do it clean and exam-ready.

✅ 1. Button → send request to Flask
HTML (pass order item ID)
Cancel Order
JavaScript
function cancelOrder(id) {
fetch('/cancel_order', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id: id })
})
.then(res => res.json())
.then(data => {
if (data.success) {
location.reload(); // simplest for exam
}
});
}
✅ 2. Flask route (update DB)
@app.route('/cancel_order', methods=['POST'])
def cancel_order():
if not session.get('uid'):
return {'success': False}

data = request.get_json()

# IMPORTANT: make sure user owns this order
q("""
    UPDATE order_items 
    SET status='cancelled'
    WHERE id=%s
""", (data['id'],), write=True)

return {'success': True}

✅ 3. Display status in HTML
Example (dashboard.html)
{% for o in orders %}

<p>{{ o.name }} x{{ o.qty }}</p>
<p>Status: {{ o.status }}</p>

{% if o.status == 'pending' %}
    Cancel Order
{% endif %}

{% endfor %}
✅ 4. CSS (this is what you want)
.order {
padding: 10px;
margin-bottom: 10px;
color: white;
}

.order.pending {
background-color: orange;
}

.order.cancelled {
background-color: red;
}

.order.shipped {
background-color: green;
}
🧠 Key idea (what examiner wants)

Instead of using status=1, you’re better off using:

pending / cancelled / shipped

Why?

Easier to read
Easier to style
Easier to explain
⚠️ If you REALLY want numbers
DB:
0 = pending
1 = cancelled
2 = shipped
HTML:

🔥 Cleaner (recommended)

Just store text:

status VARCHAR(20)
✅ What you now have

✔ Button → sends request
✔ Flask updates DB
✔ Page reloads
✔ Status changes colour`

DEV Community

How to Update/Cancel Orders using SQL

Top comments (0)