Handling multiple forms on a single page without full page reload

Hello,
I have created an app, where multiple users are organized for scheduling.
On the scheduling page the schedule creator needs to accept or reject multiple user requests.
Each request is realized using a form and a “reject” and “accept” button to submit the decision to the django backend.
As to make the app more appealing and quick I want to avoid full page reloads after each form submission.
Do you have any idea on how to reach my goal?

Below is my code:

{% for request in requests %}
<form method="post">
{% csrf_token %}
<p>{{ request.username }}<\p>
<button type="submit" name="decision" value="accept" class="btn btn-success">Accept</button>
<button type="submit" name="decision" value="reject" class="btn btn-danger">Reject</button>
</form>
{% endfor %}

Well, there are several ways one can achieve this.
You can use:

  • Javascript vanilla’s fetch method to issue a request to the backend;
  • Jquery to issue a request to the backend;
  • HTMX to issue a request to the backend.

In any of the cases bellow, you would write a view for specifically deal with that request, on that view you can return a JsonResponse, if you’re using Jquery or fetch. Or you can return a partial template, containing only the changed area if you 're using HTMX.
In both cases, you would write something on your HTML/Javascript to do some other action after the request has been processed.

Dear leandrodesouzadev,

thank you very much for your reply. First I have tested both fetch and jquery’s ajax, which got the job done. But both seem to grow big when the complexity of the tasks increase. Finally I was pretty happy with how HTMX can be integrated into Django, so I chose this for my end product. The are even several django-htmx tutorials available on yt e.g. from BugBytes, which helped me further.

1 Like