We Keep Coding

Django: Javascript not loading extra rows

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">
Annuler
<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">
Annuler
<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>

How can I populate a form field from a list of elements in JavaScript?

I've got a fantasy football project that I built in Django that generates a list of HTML elements. Like this...
<tbody id="page1">
{% for q in QBpage %}
<tr>
<td><h6 id="qbname">{{ q.player_name }}</h6></td>
<td><button onclick="selectPlayer()" type="button" id="qbackbutton" class="btn btn-success btn-sm m-0 waves-effect" data-player-name="{{ q.player_name }}" data-position="{{ q.position }}">Add</button></td>
<td><h6> {{ q.team }} </h6></td>
<td><h6> {{ q.position }} </h6></td>
<td><h6>{{ q.points }}</h6></td>
</tr>
{% endfor %}
</tbody>
It's a list of players (all quarterbacks) pulled from an API. What I'm trying to do is from each player's corresponding "Add" button, is add that player's name to a form field that's also on the same page. I can do that using this JavaScript function...
function selectPlayer (){
let d = document.getElementById("qbname");
document.getElementById("QB_name").value = document.getElementById("qbname").innerHTML;
}
Problem is though, I can only get the name of the first player in the list because all players end up with the same id. Therefore, you can only retrieve the first element. Even if I click on a player further down the list, that first player's name is the only one that is returned. Assigning a class won't work because, as far as I understand, you can only "getElementsByClass" so you end up retrieving all the members in the list instead of just one.
How would I go about solving this? I'm pretty sure I'm completely overthinking it and there's a simple solution that I'm just not seeing due to frying my brain on this for ages. Any advice is appreciated.

If you have that value as data-attribute inside your button you can simply use this.getAttribute("attrname") or else use el.closest("tr").children[0].textContent where children[0] represent first td .
Demo Code :
function selectPlayer(el) {
document.getElementById("QB_name").value = el.getAttribute("data-player-name")
//or
console.log(el.closest("tr").children[0].textContent.trim())
//or
console.log(el.closest("tr").querySelector(".qbname").textContent.trim())
}
<table>
<tbody id="page1">
<tr>
<td>
<h6 class="qbname">abc</h6>
</td>
<!--pass this-->
<td><button onclick="selectPlayer(this)" type="button" id="qbackbutton" class="btn btn-success btn-sm m-0 waves-effect" data-player-name="abs" data-position="{{ q.position }}">Add</button></td>
<td>
<h6> {{ q.team }} </h6>
</td>
<td>
<h6> {{ q.position }} </h6>
</td>
<td>
<h6>{{ q.points }}</h6>
</td>
</tr>
<tr>
<td>
<h6 class="qbname">abc2</h6>
</td>
<!--pass this-->
<td><button onclick="selectPlayer(this)" type="button" id="qbackbutton" class="btn btn-success btn-sm m-0 waves-effect" data-player-name="abs2" data-position="{{ q.position }}">Add</button></td>
<td>
<h6> {{ q.team }} </h6>
</td>
<td>
<h6> {{ q.position }} </h6>
</td>
<td>
<h6>{{ q.points }}</h6>
</td>
</tr>
</tbody>
</table>
<input type="text" id="QB_name">

concatenate var and <tr> in jquery to have all in the same row

I added javascript, jquery at the bottom of my blade page to allow me to add a new line containing all the table with id="dynamic_field".(but without the button name "add" after the second, it should be a cross for deleting)
And my question is : how I can put all this these lines in $('#dynamic_field').append(....here....) because I try copy paste and there is everytime syntax error..
here the blade file:
#extends ('layout.layout')
#section('containerContent')
<div class="col-md-12">
<form method="POST" enctype="multipart/form-data" id="add_tour">
{{ csrf_field() }}
#if (count($errors))
<div class="form-group">
<div class="alert alert-danger">
<ul>
#foreach($errors->all() as $error)
<li> {{ $error }}</li>
#endforeach
</ul>
</div>
</div>
#endif
<div class="content">
<h1>Create a new Tour:</h1>
<div class="form-group">
<div class="col-lg-6">
<input class="form-control" type="text" name="tourLabel" placeholder="Tour label">
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<textarea class="form-control" placeholder="Resume of tour" name="tourResume" rows="3"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-6">
<select id='nameArtist' name='nameArtist'>
<option value=''>Select Music Artist or Band</option>
#foreach ($artists as $artist)
<option value="{{ $artist->id }}">{{ $artist->artist_name }}</option>
#endforeach
</select>
</div>
</div>
<h2 align="center">Add Concert to your Tour:</h2>
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><select id='concertRoom' name='concertRoom'>
<option>Select your concert room</option>
#foreach ($roomsconcert as $room)
<option value="{{ $room->id }}">{{ $room->name }}</option>
#endforeach
</select>
</td>
<td><input class="form-control" type="date" name="dateConcert"{{ Form::datetime('') }}></td>
<td><input class="form-control" type="text" name="concertDuration" placeholder="Duration of the event (min)"></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More concert</button></td>
</tr>
</table>
</div>
<a class="btn btn-primary" href="{{route('show-tour') }}" > Back </a>
<button class="btn btn-success" type="submit"> {{ 'Submit' }}</button>
</div>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i = 1;
$('#add').click(function() {
i++;
var htmlContent = $('#dynamic_field').html();
/*
$('#dynamic_field').append(htmlContent);
*/
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click','.btn_remove',function () {
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
});
</script>
#endsection
thanks

Try wrapping your javascript with #verbatim Directive
#verbatim
<script type="text/javascript">
......
</script>
#endverbatim

Make Shopping Cart in Laravel

in there i want to add shopping cart in my project. i have try make it but its still want work.
this my controller :
function postCreate(){
echo '<pre>';
print_r(Request::all());
exit;
$data['list'] = DB::table('package')
->join("cms_car","cms_car.id","=","package.id_cms_car")
->join("zone","zone.id","=","package.id_zone")
->select("package.*","cms_car.car as name_car","cms_car.photo as car_photo");
return view('detail',$data);
}
and here my view for listing :
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-petrol.png') }}" style="max-width:15px;">
#else
#endif
{{$row->driver}}</p>
<p>
#if ($row->driver == 'Driver Included')
<img src="{{ asset('assets/assets/icon/ic-driver.png') }}"style="max-width:15px;">
#else
#endif
{{$row->fuel}}</p>
<h6 class="post-price">price :</h6>
<p>Rp. {{$row->price}}</p>
</div>
</div>
<hr>
<div class="col-md-6">
Unit Quality :<br><br>
<div class="input-group" style="width: 150px;">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-number btn-minus" data-type="minus">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quantity" class="form-control input-number" value="1" data-price="{{$row->price}}" data-id="{{$row->id}}" min="1" max="100">
<span class="input-group-btn">
<button type="button" class="btn btn-success btn-number btn-plus" data-type="plus">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<div class="col-md-6">
<h3 style="margin-top:40px" id="price{{$row->id}}">Rp. {{number_format($row->price)}}</h3>
</div>
</div>
</div>
#endforeach
in there i want to make cart it only add when i change the unit quantity
form input name : quantity
have someone tell me what improvements do i have to make to the code to achieve my goal?

I recommend using this package Crinsane/LaravelShoppingcart

There are somany shopping cart module available on github. They are very easy to integrate, try one of them:
LaravelShoppingcart
laravel-cart

MvcFileUploader add/edit custom field

I'm using MVCFileUploader https://github.com/marufbd/MvcFileUploader
This works really well for uploading images in my MVC project and associating them with an entity.
When I try to add a title field for each image that can be edited I can't get it to work. I'm not sure if I'm approching this the correct way. I've modified the templates in _MvcFileLoad.cshtml to have the additional field. I can get the title input in the controller at each upload but I don't know how to send it back to the view using the implementation of this project.
This is _MvcFileUpload.cshtml, I've added autoUpload:true
$('##(formId)').fileupload('option', {
autoUpload: true,
maxFileSize: #Model.MaxFileSizeInBytes,
resizeMaxWidth: 1920,
resizeMaxHeight: 1200,
acceptFileTypes: #Model.FileTypes
});
I've added an input for title
<form id="#formId" action="#Model.UploadUrl" method="POST" enctype="multipart/form-data">
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
Title: <input name="title" required />
At each autoUpload I can save the title and associate it with the file and Entity in the controller. I can't get it back to the view to edit it if the user wants to. I tried to modify the template-download in _MvcFileUpload.cshtml
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-download fade">
<td>
<span class="preview">
{% if (file.thumbnailUrl) { %}
{% } %}
</span>
</td>
<td>
<p class="name">
{% if (file.url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
{% } else { %}
<span>{%=file.name%}</span>
{% } %}
</p>
{% if (file.error) { %}
<div><span class="label label-danger">Error</span> {%=file.error%}</div>
{% } %}
</td>
<td>
Title: <input name="title" required />
</td>
<td>
<span class="size">{%=o.formatFileSize(file.size)%}</span>
</td>
<button class="btn btn-save" data-type="What to put here?" data-url="What to put here?" >
<i class="glyphicon glyphicon-save"></i>
<span>Save</span>
</button>
{% if (file.deleteUrl) { %}
<button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1" class="toggle">
{% } else { %}
<button class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
{% } %}
</td>
</tr>
{% } %}
</script>
The next issue I see is if I get the title back for editing how can send the updated input back? There's only UploadFile and DeleteFile methods to call.
In summary I'm trying to modify this so the user can upload multiple photos and edit their titles.
MvcFileUploader uses blueimp jQuery-File-Upload. I've looked at that documentation, there is something like what I'm asking for in the documentation for PHP but I couldn't get it to work with MVC.
https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-MySQL-database-integration

As long as your Controller method is an HttpPost, you can add a (string title) parameter to the method and it will grab the value from the input box automatically. Otherwise, you'll need to add a data property to the javascript ajax call.
For editing the title after it's been uploaded, you should have a different page. Let them view the images, and have something that will bring up a textbox with the title in an editable field and then have a submit button there. You won't have to upload the image again, just have the ID of the image in the form.