Develop Reference

Pass Javascript Calculations to Django Backend

I have an HTML form where users type in the name of items and value corresponding to it in an input form, which is reflected when the form is submitted to Django backend.
In my HTML form I have included some Javascript so that the total of these values are reflected instantly without refreshing and even before submitting the form.
My goal:
Send the total amount calculated by Javascript in the HTML under id Total
<th scope="col">Total Equipment and Assets</th>
<th scope="col" id="Total"></th>
to the class in the
total_assets= models.IntegerField(null=True, blank=True, verbose_name='Total Assets')
in the Models.py after submitting.
Note that the reason for the question is that the total values are not manually added they are directly calculated using Javascript.
Here is a sample to make things more clear.
Here is the HTML Template:
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
type="text"
class="form-control"
name="item_1"
id="item_1"
{% if form.is_bound %}value="{{ form.item_1.value }}"{% endif %}/>
{% for err in form.item_1.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
type="number"
class="form-control w-25 subtotal-group subtotal-group-1"
name="item_1_amount"
id="item_1_amount"
{% if form.is_bound %}value="{{ form.item_1_amount.value }}"{% endif %}/>
{% for err in form.item_1_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
<tr>
<td>
<input
placeholder="Type in the Equipment and assets"
type="text"
class="form-control"
name="item_2"
id="item_2"
{% if form.is_bound %}value="{{ form.item_2.value }}"{% endif %}/>
{% for err in form.item_2.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
<td>
<h6 style="float:left; margin-right:5px; margin-top:7px">$</h6>
<input
autocomplete="off"
type="number"
class="form-control w-25 subtotal-group subtotal-group-1"
name="item_2_amount"
id="item_2_amount"
{% if form.is_bound %}value="{{ form.item_2_amount.value }}"{% endif %}/>
{% for err in form.item_2_amount.errors %}
<small class="text-danger mb-2 ml-2">{{ err }}</small>
{% endfor %}
</td>
</tr>
Here is the Javacript
<script>
const q=(e,n=document)=>n.querySelector(e);
const qa=(e,n=document)=>n.querySelectorAll(e);
const results={};
console. log(results)
qa('[type="number"].form-control').forEach(input=>input.addEventListener('input',function(e){
results[ this.name ]=Number( this.value );
const resultGroupSet1 = [...qa('.subtotal-group-1')]
.map(s => Number(s.value))
.reduce((a,v) => a+v);
q('th#Total').textContent = resultGroupSet1;
}));
</script>
Here is where the total is reflected in the HTML template
<thead class="table-light">
<tr>
<th scope="col">Total Equipment and Assets</th>
<th scope="col" id="Total"></th>
</tr>
</thead>
Here is the models.py
item_1 = models.CharField(max_length=100,null=True, blank=True, verbose_name='Item 1')
item_1_amount = models.IntegerField(null=True, blank=True, verbose_name='Item 1 Amount')
item_2 = models.CharField(max_length=100,null=True, blank=True, verbose_name='Item 2')
item_2_amount = models.IntegerField(null=True, blank=True, verbose_name='Item 2 Amount')
total_assets = models.IntegerField(null=True, blank=True, verbose_name='Total Assets')
Here is the views:
def add_bp(request):
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = infoForm(request.POST)
# check whether it's valid:
if form.is_valid():
form.save()
b_name = form.cleaned_data.get('bName')
messages.success(request, f'PDF created for {b_name}!')
return redirect('application:core')
# if a GET (or any other method) we'll create a blank form
else:
form = infoForm()
return render(request, 'application/template.html', {'form': form, })

Update html to:
<thead class="table-light">
<tr>
<th scope="col">Total Equipment and Assets</th>
<th scope="col">
<!-- Value which is visible (calculated using JS) -->
<span id="Total"></span>
<!-- Add a hidden input to store value (value calculated and assigned using JS) -->
<input type="hidden" name="total_assets" value="0" id="total_assets">
</th>
</tr>
</thead>
Update script to assign resultGroupSet1 as:
textual content to the span tag with id=Total
value to the hidden input with name=total_assets
// Assign result to span tag which is visible
q('span#Total').textContent = resultGroupSet1;
// Assign result as value to hidden input field with name total_assets
q('input#total_assets').value = resultGroupSet1;
No other changes in views.
As an input field with a name="total_assets" is used, the value will be passed on to the request body and will be accessible at request.POST. Here, as the total_assets field is hidden it is not visible to the users and still the value is available in POST data when form is submitted. So, when form.save() is called the calculated value (using JS) will be saved.

I assumes your question is how to get the value in this element:
<th scope="col" id="Total"></th>
You can just simply add input element in your html code and add the name into it:
<th scope="col"><input id="Total" name="total_assets" value=""></th>
Then in your views.py:
def add_bp(request):
if request.method == 'POST':
form = infoForm(request.POST)
if form.is_valid():
form.save()
You can also manually get the Total:
def add_bp(request):
if request.method == 'POST':
total_assets = request.POST.get("total_assets")

Probably what you are looking for is <input type="hidden" ...>, it's not visible by the end user and it's included in the form submit

Why not do this calculation in Django Backend?
My suggestion is to pass all the arguments normally and just add a listener to the model saving (every time you will save an element to the table this little piece of code will run right before it saves it):
from django.db.models.signals import pre_save
from django.dispatch import receiver
#receiver(pre_save, model_class)
def form_pre_save(instance, *args, **kwargs):
instance.total_assets = instance.item_1_amount + instance.item_2_amount
This way when you want to save this kind of element in a different place (in the backend for example) you won't have to re-write the code that does that, but rather just save the instance.
You can read more about the signals pre_save function here

How to pass checkbox values to modal bootstrap for Python Flask remove data from mysql table?

Environment:
Python 3.7.7
Flask 1.1.2
Werkzeug 1.0.1
Introduction:
I am making a Flask application for my saas dashboard.
I have a page "categories.html" which displays a list of categories in a table.
Each category has a checkbox if the user wants to delete several categories by checking the categories and clicking on the "DELETE" button. See screenshot below:
So users will be able to select multiple categories and remove them by clicking on the "DELETE" button.
But before to delete the rows in Mysql table categories, a confirmation popup is showing up. This popup is done by Bootstrap modal.
Problem:
I don't how to pass the list of checkbox values selected by the user to the modal popup.
What did I try:
I tried to fix this issue with some javascript code, but it doesn't work.
My code:
My template categories.html (I removed unecessary code):
<form>
<table id="categories" class="table dataTable no-footer" role="grid">
<thead>
<tr role="row">
<th tabindex="0" rowspan="1" colspan="1" style="white-space: nowrap"></th>
</tr>
</thead>
<tbody>
{% for category in categories %}
<tr role="row" >
<td style="white-space: nowrap">
<input name="category_id" value="{{ category.ID }}" type="checkbox" class="form-check-input" style="float: left; margin: 0 auto;">
</td>
<td>{{ category.name }}</td>
<td style="white-space: nowrap">
{% if category.icon %}
{% if category.icon.find('<i class')!=-1 %}
{{ category.icon|safe }}
{% else %}
<img src="{{ url_for('static', filename='images/<category.icon>') }}">
{% endif %}
{% else %}
na
{% endif %}
</td>
</tr>
{% endfor %}
</tr></tbody>
</table>
</form>
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Delete Category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete these categories?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form action="{{ url_for('delete_category')}}" method="POST">
<input name="category_id" type="hidden" value="pass_checkedvalue" id="hidden_checkedinput">
<input class="btn btn-danger" type="submit" value="delete"/>
</form>
</div>
</div>
</div>
</div>
<script>
$('#deleteModal').on('show.bs.modal', function(e) {
var checkedValues = $('.record:checked').map(function(){ return this.value; }).get();
//put the ids in the hidden input as a comma separated string
$('#hidden_checkedinput').val(checkedValues.join(','));
});
</script>
My route.py:
#app.route('/delete_category', methods=['GET', 'POST'])
#login_required
def delete_category():
if request.method == "POST":
if request.form["category_id"]:
print(request.form["category_id"])
Category.query.filter(Category.ID.in_(request.form["category_id"])).delete()
db_mysql.session.commit()
flash('The categories have been deleted', 'success')
return redirect(url_for('categories'))
My models.py:
class Category(db_mysql.Model):
__tablename__ = "W551je5v_pb_categories"
ID = db_mysql.Column('ID', db_mysql.Integer, primary_key=True)
name = db_mysql.Column('name', db_mysql.Unicode)
icon = db_mysql.Column('icon', db_mysql.Unicode)
icon_blue_img = db_mysql.Column('icon_blue_img', db_mysql.Unicode)
icon_white_img = db_mysql.Column('icon_white_img', db_mysql.Unicode)
icon_black_img = db_mysql.Column('icon_black_img', db_mysql.Unicode)
platforms = db_mysql.relationship('Platform', backref='W551je5v_pb_categories', lazy=True)
def __repr__(self):
return f"Category('{self.ID}','{self.name}','{self.icon}','{self.icon_blue_img}','{self.icon_white_img}','{self.icon_black_img}')"
OUTPUT:
When I execute this code, I get this error message:
sqlalchemy.exc.InvalidRequestError
sqlalchemy.exc.InvalidRequestError: Could not evaluate current criteria in Python: "Cannot evaluate clauselist with operator <function comma_op at 0x0000026EB4542558>". Specify 'fetch' or False for the synchronize_session parameter.
And the print(request.form["category_id"]) showed in console:
pass_checkedvalue
Which is the value of my hidden field.
I have no idea what am I doing wrong. Can anyone help me, please?

I don't how to pass the list of checkbox values selected by the user to the modal popup.
I don't think that's the right approach.
Actually, I don't think you need to pass ANY data to the modal popup.
What I would instead do is add an on-click for the modal button that would run a javascript function.That function needs to simply iterate over the <tr> tags and find the checked rows.
After you have a list containing the checked rows' IDs, you can send that to your backend via some HTTP request (you can use Javascript's FETCH API for that).
Your code would like something like that (please treat this as a schema since I don't actually know how your HTML looks like):
let checked_arr = [];
let tr_lst = document.getElementsByTagName('tr'); // probably better to be done with getElementsByClassName
for (let i=0; i<tr_lst.length; i++) {
let checkbox_td = tr_lst[i].children[0]; // assuming first <td> is the checkbox
let checkbox_element = checkbox_td.children[0]; // assuming your HTML looks like <td><input type="checkbox"...></td>
if (checkbox_element.checked) {
checked_arr.push(tr_lst[i].id);
}
}
let response = await fetch('/your_api_endpoint', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify({"data": checked_arr})
});
Also, here is a nice tutorial on how to use FETCH API:
https://javascript.info/fetch
Hope that's helpful :)

send data from flask to html with 2 forms

I have flask sending data to html. Now, first time it does that its by render_template('page1.html', data=data) which populates the main table. Now when i click on any row of main table, i want to call flask again by url_for(entrypoint) and then again i will do render_template('page1.html', data=data2) for the 2nd table. But how to differentiate between them? i mean how will html know which data is coming for whom? please advice. I am novice in javascript and html. I am planning to keep the main table and secondary table under different forms. please advice if thats good decision or not.
Inside my html(page1.html), I have written
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
function getId(element) {
var row_index=element.rowIndex;
$.ajax({
url: '/get_details',
data: document.getElementById("table1").rows[row_index].cells[5].innerHTML),
type: 'POST',
success: function(response){
console.log(response);
},
error: function(error){
console.log(error);
}
});
This is the code in html for table1 and table2(table2 not done yet)
<section id="boxes" style="margin-top:-5%; margin-bottom:0%; position:absolute; z-index:1;">
<div class="box" style="margin-left:30px; margin-top:20px; z-index:1;">
<table id="table1">
<tr>
<th>NO</th>
<th> SUBJECT NAME</th>
<th>ASSIGNED TO</th>
<th>CREATED</th>
<th>DISEASES</th>
<th>SUBJECT ID</th>
<th>STATUS</th>
</tr>
{% for row in data %}
<tr onclick="getId(this)">
<td> {{ row[0] }}</td>
<td> {{ row[1] }}</td>
<td> {{ row[2] }}</td>
<td> {{ row[3] }}</td>
<td> {{ row[4] }}</td>
<td> {{ row[5] }}</td>
<td> {{ row[6] }}</td>
</tr>
{% endfor %}
</table>
</div>
<div class="box-two">
</div>
Inside my app.py
here is the flask code for the entry point:
#app.route('/get_details', methods=['POST'])
def get_details_user(patientid):
print(patientid)
This is the code for the entrypoint for the records which populates table1 as of now:
#app.route('/records')
#login_required
def records():
if current_user.priviledge:
data = get_records_by_userid(None)
else:
data = get_records_by_userid(current_user.id)
list_data = []
for row in data:
list_data.append([])
for col, val in row.items():
list_data[-1].append(val)
return render_template('records.html', data=list_data)
I don't see this in my flask code being triggered. Something wrong in my ajax code?? Also, how do I get the data from flask to this same html file for the second table?
Thanks a lot,
Sudip

Update: The error was coming due to ajax function syntax. Went with extra ')' in data in ajax...oops, thats bad

Add this to the JAvascript code:
$.ajax(function() {
headers = {'X-CSRFToken' : $('#csrf_token').val() },
...
});
This is the token the allows AJac to be validated

Django the best way to create an edit modal form?

In one of my django app I have set the following architecture:
#models.py
class Income(models.Model):
price = models.DecimalField()
quantity = models.DecimalField()
date=models.DateField()
# forms.py
class IncomeForm(forms.ModelForm):
class Meta:
model = Income
fields = "__all__"
#views.py
def income_(request):
elements = Income.objects.all()
if request.method == 'POST':
form = IncomeForm(request.POST)
if form.is_valid():
new_input = form.save()
else :
form = IncomeForm()
elements = Income.objects.all()
context= {
'form': form,
'elements':elements,
}
return render(request, "income/income.html", context)
In my income.html file I have set the following
{% load crispy_forms_tags %}
<form id="" method="post">
<div class="form-group col-2 0 mb-0" >
{{form.quantity|as_crispy_field}}
</div>
<div class="form-group col-2 0 mb-0" >
{{form.price|as_crispy_field}}
</div>
<div class="form-group col-2 0 mb-0" >
{{form.date|as_crispy_field}}
</div>
</div>
After that I have created a table that list all data filled.
Now I want to create a button for each row that open a modal form that give me the possibility to modify the specific data for each id dataset.
I have tried to perform it with an ajax call, but I have had difficults to perform the form and the type of data (becouse in this manner I don't have the possibility to use crispy form or the forms model of the django framework).
So my question is: there is a simple way to achive my aim?

From what I understand from your question, you can try create a UpdateView in your view.py and redirect your html button with the object id to that view.
Updated answer-
since you are asking for simpler way implementing the edit page...
- models.py
class Income(models.Model):
price = models.DecimalField(decimal_places=2, max_digits=10000)
quantity = models.DecimalField(decimal_places=2, max_digits=10000)
date = models.DateField()
- urls.py
urlpatterns = [
path('income/', views.IncomeListView.as_view(), name='income'),
path('income_edit/<int:pk>', views.IncomeEdit.as_view(), name='income-edit'),
]
- views.py
class IncomeListView(ListView):
model = Income
template_name = 'income.html'
class IncomeEdit(UpdateView):
model = Income
form_class = IncomeForm
template_name = "income_form.html"
- forms.py
class IncomeForm(forms.ModelForm):
class Meta:
model = Income
fields = '__all__'
- income.html
<h1>Income List</h1>
<table>
<tr>
<th>ID</th>
<th>price</th>
<th>quantity</th>
<th>date</th>
</tr>
{% if income_list %}
{% for income in income_list %}
<tr>
<td>{{income.id}}</td>
<td>{{income.price}}</td>
<td>{{income.quantity}}</td>
<td>{{income.date}}</td>
<td>Edit </td>
</tr>
{% endfor %}
{% endif %}
</table>
- income_form.html
<form action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit">
{{ form.media }}
</form>
please look into the class used for more information and understanding. hope this help =)

Django Braintree Integration

I would like to integrate Braintree payment into my website. I know there are many mistakes in my code as I'm learning. Currently I am redirected to the Failed http page as the payment doesn't go through. How can I implement the payment on the Cart page? Thank you.
views.py (Cart app)
def cart_detail(request, total=0, cart_items = None):
try:
cart = Cart.objects.get(cart_id=_cart_id(request))
cart_items = CartItem.objects.filter(cart=cart, active=True)
for cart_item in cart_items:
total += (cart_item.service.price)
except ObjectDoesNotExist:
pass
gateway = braintree.BraintreeGateway(
braintree.Configuration(
braintree.Environment.Sandbox,
merchant_id="",
public_key="",
private_key=""
)
)
braintree_total = int(total)
#print(braintree_total)
if request.method == 'GET':
client_token = gateway.client_token.generate()
else: # for when the method is POST
print(request.POST)
result = gateway.transaction.sale({
'amount': braintree_total,
'payment_method_nonce': request.POST['payment_method_nonce'],
'options': {
"submit_for_settlement": True
}
})
if result.is_success or result.transaction:
return HttpResponse('Done')
return HttpResponse('Failed')
return render(request, 'cart.html', dict(cart_items = cart_items, total = total, client_token = client_token))
cart.html (Cart app)
<div class="col-12 col-sm-12 col-md-12 col-lg-6 text-center">
<table class="table my_custom_table">
<thead class="my_custom_thead">
<tr>
<th>
Checkout
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Please review your shopping cart items before proceeding with the order payment.
</td>
</tr>
<tr>
<td class="text-left">
Your total is: <strong>£{{ total }}</strong>
</td>
</tr>
</tbody>
</table>
<div class="mx-auto">
<form id="payment-form" method="post" action="{% url 'cart:cart_detail' %}">
{% csrf_token %}
<div id="bt-dropin"></div>
<input type="hidden" id="nonce" name="payment_method_nonce" />
<button class="btn btn-primary btn-block" type="submit" id="submit-button"><span>Test Transaction</span></button>
</form>
Continue Shopping
</div>
</div>
</div>
<br>
{% endif %}
<script src="https://js.braintreegateway.com/web/dropin/1.13.0/js/dropin.min.js"></script>
<script>
var button = document.querySelector('#submit-button');
var client_token = '{{ client_token }}';
braintree.dropin.create({
authorization: client_token,
container: '#bt-dropin',
paypal: {
flow: 'vault'
}
}, function (createErr, instance) {
form.addEventListener('submit', function (event) {
event.preventDefault();
instance.requestPaymentMethod(function (err, payload) {
if (err) {
console.log('Error', err);
return;
}
// Add the nonce to the form and submit
document.querySelector('#nonce').value = payload.nonce;
form.submit();
});
});
});
</script>
{% endblock %}
Thank you for your help.