Django form in every row of a table - ajax

Question

I want to have a simple text form on every row of a table.
Fiddle illustration of expected result: https://jsfiddle.net/wstg759f/1/
My Models.py:
class Person(models.Model):
name = models.CharField(max_length=30)
class Quality(models.Model):
name = models.CharField(max_length=30)
person=models.ForeignKey(Person)
I have a queryset that returns aggregated list of all persons, count of qualities for each person, one random quality of this person:
[
{'the_count': 5, u'randomquality': u'Nice’, u'person__name': u'Joe'},
{'the_count': 4, u'randomquality': u'Generous’,u'person__name': u'Mike'},
{'the_count': 4, u'randomquality': u'Healthy’,u'person__name': u'John’'},
..
]
My view.html (qualities is my queryset)
<table>
<thead>
<tr>
<th>Person</th>
<th>Qualities count</th>
<th>One random quality</th>
<th>Add a Quality?</th>
</tr>
</thead>
<tbody>
{%for obj in qualities%}
<tr>
<td>{{ obj.person__name }}</td>
<td>{{ obj.the_count }}</td>
<td>{{ obj.randomquality }}</td>
<td>text form to submit a quality for this person</td>
</tr>
{% endfor %}
</tbody>
</table>
The user should be able to input a quality in the text field, and once submitted it will be added to the model, and the text field is replaced by "thanks, submitted"
The submit form have to be independent.
I have no clear direction where to look at.
How would you do?
From my reading, I understand that formset could be a solution, but they are really unclear for me.
Should I even use django form in this case?
If yes, I believe the form should take an argument form the template: I don't need the user to tell me about the person name as it's already here.
Let me know if I can clarify.
Thanks in advance.
As a bonus, maybe for later, I want to avoid page refresh.
Is ajax the only way?

Answer 1

You can do this with ajax, form and views
template.html
<table>
<thead>
<tr>
<th>Person</th>
<th>Qualities count</th>
<th>One random quality</th>
<th>Add a Quality?</th>
<th>Button</th>
</tr>
</thead>
<tbody>
{% for obj in qualities %}
<tr id="row_{{ obj.id }}">
<td>{{ obj.person__name }}</td>
<td>{{ obj.the_count }}</td>
<td>{{ obj.randomquality }}</td>
<td>{{ form.quality }}</td>
<td><button value="{{ obj.id }}" onclick="addQuality(this.value)">Add</button></td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
function addQuality(id_object) {
const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value
let data_to_backend = new FormData()
let qualityToAdd = document.getElementById(`id_${id_object}-quality`).value
if (qualityToAdd !== '') {
data_to_backend.append('quality', qualityToAdd)
data_to_backend.append('object_index', id_object)
} else return
const request = new Request("./",
{
method: 'POST',
headers: {'X-CSRFToken': csrftoken},
body: data_to_backend
})
fetch(request, {
method: 'POST',
mode: 'same-origin'
}).then(
function(response) {
if (response.status === 200) {
let tableRow = document.getElementById(`row_${ id_object }`)
tableRow.innerHTML = "<p>thanks, submitted</p>"
} else {
alert("Error")
console.log(response)
}
}
)
}
</script>
Set your views to receive a post request or just create a new urls path and another views
views.py
def addQuantity(request, codigo_orcamento):
if request.method == "POST":
form = formAddQuantity(request.POST)
if form.is_valid():
id_object = form.cleaned_data['object_index']
quality = form.cleaned_data['quality']
# get the object and add this quality
return HttpResponse(status=200)
else:
return HttpResponse(status=400)
else:
return HttpResponse(status=405)
In this view we simply check if the form is valid, get the object from db and add the quality on it
forms.py
class formAddQuantity(forms.Form):
object_index = forms.IntegerField(min_value=0)
quality = forms.CharField(max_length=100)
A simple check, but i recommend you to add more requirements to this fields
(Not tested, if throws a error let me know)