make_post_sell/docs/tickets/mps-0.md
russell@unturf.com 68089dff5b Add AJAX comment submission to preserve media playback
Comments now submit via fetch() when JS is available, returning JSON
instead of triggering a full page reload that kills video/audio playback.
Falls back to the existing POST+redirect when JS is disabled.
2026-02-07 11:19:58 -05:00

1.3 KiB

MPS-0: AJAX Comment Submission (No Page Refresh)

Problem

When playing video or audio on product/content pages, leaving a comment triggers a full page reload (POST /comments/new followed by HTTPFound redirect). This kills media playback mid-stream.

Solution

Progressive enhancement: when JavaScript is available, intercept the comment form submission and use fetch() with the X-Requested-With: XMLHttpRequest header. The server detects this header and returns JSON instead of a redirect. The client inserts the new comment into the DOM without reloading.

When JavaScript is disabled, the existing form POST and redirect behaviour is unchanged.

Files Changed

File Change
make_post_sell/views/comment.py Return JSON when AJAX header is present
make_post_sell/static/js/comments.js New: fetch-based form handler, DOM insertion
make_post_sell/templates/snippets/comments.j2 Add id="comments-list", load comments.js
make_post_sell/tests/test_functional.py AJAX comment endpoint tests

Verification

  1. make test -- all existing and new tests pass
  2. Play a video, leave a comment, video keeps playing
  3. Disable JS, leave a comment, redirect behaviour works as before
  4. Comment count updates without reload
  5. Pending-approval banner shows for non-auto-approved comments