Django: Javascript not loading extra rows
Question:
I have a page that allows a doctor to create a prescription. This page as a form that allows you to add as many rows as you want to add elements to your prescription. I will share with you the view and html template.
I replicated the exam same thing for creating another type of prescription (lab analysis).
This time, the button does not want to add more rows, even though I used the exact same code, and I will tell you exactly what breaks it, but I do not know how to fix it.
Here is the code for the first one (the one that works):
view:
@login_required
def createPrescription(request):
[...] # ommited because unrelated
drugs = Drug.objects.all()
return render[...] # ommited because unrelated
HTML:
<!-- PAGE-HEADER END -->
<form method="POST" id="presForm">
{% csrf_token %}
[...] # ommited because unrelated
<div class="card">
<div class="card-header">
<div class="card-title">Eléments de l'ordonnance</div>
</div>
<div class="card-body">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Médicament</td>
<td>Dosage</td>
<td>Posologie</td>
<td>Durée</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-5">
<div class="row">
<div class="col-6">
<input class="form-control mb-4" placeholder="Nom du médicament" type="text" name="medicament0">
</div>
<div class="col-6">
<div class="form-group">
<select class="form-control select2-show-search form-select" id="medicament-id0" name="listemedicament0">
<option value="0">Ou choisir de la liste</option>
{% for d in drugs %}
<option value="{{ d.id }}">{{ d }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</td>
<td>
<input class="form-control mb-4" placeholder="20mg" type="text" name="dosage0">
</td>
<td>
<input class="form-control mb-4" placeholder="2 / j avant repas" type="text" name="posologie0">
</td>
<td>
<input class="form-control mb-4" placeholder="7 jours" type="text" name="duree0">
</td>
<td><a class="deleteRow"></a>
<input type="button" class="btn btn-lg btn-secondary " id="addrow" value="Ajouter élément" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-list ms-auto my-auto">
<a href="{% url 'prescriptions' %}" class="btn btn-danger btn-space mb-0">Annuler</a>
<button id="presBtn" type="submit" class="btn btn-primary btn-space mb-0">Soumettre</button>
</div>
</div>
</div>
</form>
<!--/Row-->
Now here is the code of the second one (the one that doesn’t work):
view:
@login_required
def createLabRequest(request):
exams = _ex.objects.all()
return render[...] # ommited because unrelated
HTML:
<!-- PAGE-HEADER END -->
<form method="POST" id="presForm">
{% csrf_token %}
[...] # ommited because unrelated
<div class="card">
<div class="card-header">
<div class="card-title">Eléments d'analyses</div>
</div>
<div class="card-body">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Analyse</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-5">
<div class="row">
<div class="col-6">
<input class="form-control mb-4" placeholder="Analyse" type="text" name="exam0">
</div>
<div class="col-6">
<div class="form-group">
<select class="form-control select2-show-search form-select" id="exam-id0" name="examlist0">
<option value="0">Ou choisir de la liste</option>
{% for e in exams %}
<option value="{{ e.id }}">{{ e }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</td>
<td><a class="deleteRow"></a>
<input type="button" class="btn btn-lg btn-secondary " id="addrow" value="Ajouter élément" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-list ms-auto my-auto">
<a href="{% url 'labrequests' %}" class="btn btn-danger btn-space mb-0">Annuler</a>
<button id="presBtn" type="submit" class="btn btn-primary btn-space mb-0">Soumettre</button>
</div>
</div>
</div>
</form>
<!--/Row-->
Now the problem is this:
When I copied the code and renamed {% for d in drugs %} <option value="{{ d.id }}">{{ d }}</option> to {% for e in exams %} <option value="{{ e.id }}">{{ e }}</option> The button to add a new row stopped working.
Answers:
Here is the problem: the list contains some data that interferes with the loading of the JavaScript, to solve this, we need to make the following changes:
Add the following function to the MedicalExam model:
def examDisplay(self):
display = ''.join(e for e in self.name if e.isalnum or e == ' ' or e == '-' or e == '/')
return display
And in the HTML, we put:
{% for e in exams %} <option value="{{ e.id }}">{{ e.examDisplay }}</option>
I have a page that allows a doctor to create a prescription. This page as a form that allows you to add as many rows as you want to add elements to your prescription. I will share with you the view and html template.
I replicated the exam same thing for creating another type of prescription (lab analysis).
This time, the button does not want to add more rows, even though I used the exact same code, and I will tell you exactly what breaks it, but I do not know how to fix it.
Here is the code for the first one (the one that works):
view:
@login_required
def createPrescription(request):
[...] # ommited because unrelated
drugs = Drug.objects.all()
return render[...] # ommited because unrelated
HTML:
<!-- PAGE-HEADER END -->
<form method="POST" id="presForm">
{% csrf_token %}
[...] # ommited because unrelated
<div class="card">
<div class="card-header">
<div class="card-title">Eléments de l'ordonnance</div>
</div>
<div class="card-body">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Médicament</td>
<td>Dosage</td>
<td>Posologie</td>
<td>Durée</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-5">
<div class="row">
<div class="col-6">
<input class="form-control mb-4" placeholder="Nom du médicament" type="text" name="medicament0">
</div>
<div class="col-6">
<div class="form-group">
<select class="form-control select2-show-search form-select" id="medicament-id0" name="listemedicament0">
<option value="0">Ou choisir de la liste</option>
{% for d in drugs %}
<option value="{{ d.id }}">{{ d }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</td>
<td>
<input class="form-control mb-4" placeholder="20mg" type="text" name="dosage0">
</td>
<td>
<input class="form-control mb-4" placeholder="2 / j avant repas" type="text" name="posologie0">
</td>
<td>
<input class="form-control mb-4" placeholder="7 jours" type="text" name="duree0">
</td>
<td><a class="deleteRow"></a>
<input type="button" class="btn btn-lg btn-secondary " id="addrow" value="Ajouter élément" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-list ms-auto my-auto">
<a href="{% url 'prescriptions' %}" class="btn btn-danger btn-space mb-0">Annuler</a>
<button id="presBtn" type="submit" class="btn btn-primary btn-space mb-0">Soumettre</button>
</div>
</div>
</div>
</form>
<!--/Row-->
Now here is the code of the second one (the one that doesn’t work):
view:
@login_required
def createLabRequest(request):
exams = _ex.objects.all()
return render[...] # ommited because unrelated
HTML:
<!-- PAGE-HEADER END -->
<form method="POST" id="presForm">
{% csrf_token %}
[...] # ommited because unrelated
<div class="card">
<div class="card-header">
<div class="card-title">Eléments d'analyses</div>
</div>
<div class="card-body">
<table id="myTable" class="table order-list">
<thead>
<tr>
<td>Analyse</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-5">
<div class="row">
<div class="col-6">
<input class="form-control mb-4" placeholder="Analyse" type="text" name="exam0">
</div>
<div class="col-6">
<div class="form-group">
<select class="form-control select2-show-search form-select" id="exam-id0" name="examlist0">
<option value="0">Ou choisir de la liste</option>
{% for e in exams %}
<option value="{{ e.id }}">{{ e }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</td>
<td><a class="deleteRow"></a>
<input type="button" class="btn btn-lg btn-secondary " id="addrow" value="Ajouter élément" />
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-list ms-auto my-auto">
<a href="{% url 'labrequests' %}" class="btn btn-danger btn-space mb-0">Annuler</a>
<button id="presBtn" type="submit" class="btn btn-primary btn-space mb-0">Soumettre</button>
</div>
</div>
</div>
</form>
<!--/Row-->
Now the problem is this:
When I copied the code and renamed {% for d in drugs %} <option value="{{ d.id }}">{{ d }}</option> to {% for e in exams %} <option value="{{ e.id }}">{{ e }}</option> The button to add a new row stopped working.
Here is the problem: the list contains some data that interferes with the loading of the JavaScript, to solve this, we need to make the following changes:
Add the following function to the MedicalExam model:
def examDisplay(self):
display = ''.join(e for e in self.name if e.isalnum or e == ' ' or e == '-' or e == '/')
return display
And in the HTML, we put:
{% for e in exams %} <option value="{{ e.id }}">{{ e.examDisplay }}</option>