We Keep Coding

Use AJAX to update Django Model

I am trying to understand how to update a Django model using AJAX without loading a new page or explicitly having the user press a save button. I have found many tutorials that deal with getting results from Django models using AJAX but I haven't found any that deal with updating models using AJAX.
Here is what I have so far
I have the following Django model:
#models.py
class Upload(models.Model):
email = models.EmailField()
title = models.CharField(max_length=100)
language = models.ForeignKey('about.channel', on_delete=models.CASCADE, default='Other')
date = models.DateField(auto_now_add=True)
file = models.FileField()
completed = models.BooleanField(default=False)
I am accepting those uploads through a form, all is well. I am then displaying those on a page through the following view:
#views.py
def submissions(request):
context = {
'uploads': Upload.objects.all().order_by('-completed', '-date')
}
return render(request, 'content/submissions.html', context)
The template for this page:
#submissions.html
<div class="row row-cols-1 row-cols-md-3">
{% for upload in uploads %}
<div class="col mb-4">
<div class="card">
<div class="card-body">
<h5 class="card-title"> {{ upload.title }} </h5>
<h6 class="card-subtitle"> {{upload.language}} </h6>
<a href="{{ upload.file.url }}" class="channel-link card-link" download> Download </a>
{% if upload.completed %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" data-id="{{ upload.id }}" checked>
<label class="form-check-label" for="{{ upload.id }}"> Completed </label>
</div>
{% else %}
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" data-id="{{ upload.id }}">
<label class="form-check-label" for="{{ upload.id }}"> Completed </label>
</div>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
Here is a portion of the page:
The checkboxes work, and returns the appropriate checked vs unchecked on the completed model field.
I am trying to understand how to connect this to AJAX in order to be able to update the completed model field from just clicking the checkbox located on each card on the page without having to load a new page/model or press a save button. I have tried the following view for updating the model but no luck:
#views.py
def completed(request, *args, **kwargs):
upload = Upload.objects.get(id=id)
upload.completed = not upload.complete
upload.save()
return JsonResponse({'status': 200})
And the jQuery/AJAX:
$('.form-check').on('click', '.form-check-input', function() {
var dataID = $(this).data('id');
$.ajax({
type: 'POST',
url: 'content/completed/',
data: {
id: dataID
},
success: function () {
console.log('Success')
}
})
});
Alas, I get nothing. I'm sure I have things wrong in both my view I'm using to update and the AJAX call, but I'm at a loss for what to do next.

I am assuming your form is firing off your AJAX call successfully with the correct data. Maybe you aren't accessing your AJAX post parameter correctly
Your api:
def completed(request)
id = request.POST.get('id') # Add this line
upload = Upload.objects.get(id=id)
upload.completed = not upload.complete
upload.save()
return JsonResponse({'status': 200})
If this doesn't solve it, let me know what messages you are getting from the backend, and what sort of data you sent in your Ajax call. If you use FireFox, press ctrl+shift+I and click on Network tab to see what data you sent from your Ajax call.
In regard to your comment about CSRF, try putting this code (csrfSafeMethod() and $.ajaxSetup()) before you call your $.ajax()
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
};
...
$('.form-check').on('click', '.form-check-input', function() {
var dataID = $(this).data('id');
$.ajaxSetup({
beforeSend: function (xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
// Only send the token to relative URLs i.e. locally.
xhr.setRequestHeader("X-CSRFToken", Cookies.get('csrftoken'));
}
}
});
$.ajax({
url: "content/completed/",
type: "POST",
data: {
id: dataID
},
success: function () {
console.log('Success')
}
})
});
This was how I handled CSRF for my APIs without putting them into #csrf_exempt, maybe it will work for you too

How to fetch data from the database in Django on clicking submit?

I need to get database objects on the HTML only when the the SUBMIT is clicked and not on page load. I currently have an AJAX script running on the same form where it returns the text entered in textbox onto the HTML when submit is clicked. I want this feature to stay as well as add a new feature of retrieval of data. Below are some of the code snippets I am using:
views.py
#csrf_exempt
def chat(request):
resps = Responses.objects.all()
context = {'resps' : resps}
return render(request, "chat.html", context)
urls.py
path('chat/', views.chat, name='chat'),
chat.html
<form id="testForm" name="test-form" class="test-form" action="" method="POST">{% csrf_token %}
<input id="texting" name="texting" type="text" class="test-text" placeholder="Test here"/>
<div class="footer">
<input type="submit" value="SEND">
</form>
</div>
{% for r in resps %}
<div>
<p>{{r.response}}</p>
</div>
{% endfor %}
................................................
<script type="text/javascript">
$(document).on('submit','#testForm', function(e){
e.preventDefault();
$.ajax({
type : 'POST',
url : '/chat/',
data :{
text : $('#texting').val(),
csrfmiddlewaretoken: $('input[text=csrfmiddlewaretoken]').val()
},
success : function(){
// alert("Done!");
document.getElementById("userSpeaks").innerHTML = document.getElementById('texting').value;
}
});
});
</script>
Any help would be appreciated. I just need a way out to print the model objects on each click of the submit button and not automatically on page load. Thanks in advance.

Please change the line
csrfmiddlewaretoken: $('input[text=csrfmiddlewaretoken]').val()
to
csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()

So you will have to send your querylist as a json object if you want it to be sent through ajax
from django.http import JsonResponse
from django.core.serializers import serialize
#csrf_exempt
def chat(request):
data = {
'resps': serialize("json", Responses.objects.all())
}
return JsonResponse(data)
and you success will look something like this
success : function(data){
// alert("Done!");
resps = JSON.parse(data.resps);
var htmldata=""
for(var x in resps){
htmldata+="<p>"+resps[x].fields.xyz+"</p>"
}
$("#userSpeaks").html(htmldata);
}

Get user input and output Flask and HTML

I'm trying to develop a web-app with Flask and HTML and right now I need to get the user input, pass it to the Python back-end, execute a function and return its output, placing it inside an HTML element. I also want this to happen without refreshing the HTML page.
How can I do this?
Bellow I have the code that I've developed so far but it's not working correctly:
My HTML:
<div id="ThroughputRate" class="data_entry">
<form action="{{ url_for('background_check_throughputrate') }}" method="post">
<input name="throughput_rate_text" class="input_box">
<input id="checkThroughputRate" type="submit" class='new-button-data' value="Check Throughput Rate">
<output name="throughputRateResult" class="result_box" ></output>
</form>
</div>
My Flask backend:
#app.route('/background_check_throughputrate', methods=['GET', 'POST'])
def background_check_throughputrate():
if request.method == 'POST':
text = request.form['throughput_rate_text']
processed_text = str(text)
throughput = transition_throughput_rate(processed_text)
return jsonify(throughput)
My HTML (continuation to get the output of the function executed on Flask):
<script type=text/javascript>
$(function() {
$('a#checkThroughputRate').bind('click', function() {
$.getJSON('/background_check_throughputrate', function(data) {
console.log(data);
document.getElementById('throughputRateResult').innerHTML = data;
});
return false;
});
});
</script>
The idea behind my execution is that the user uses the first snippet of code (in HTML) to insert the input, this input is passed onto the second snippet of code (in flask) and finally, the output of the function is passed onto the last snippet of code (in JS inside HTML) so that it can be displayed on the corresponding HTML element.
So far, the input is being correctly processed inside flask but the issue is that when the function returns the jsonify, it appears on the screen, instead of sending it into the frontend. What am I doing wrong?
Thank you all

$.getJSON is designed to load the JSON data from endpoint using GET request, however, your Python code example responds to only POST requests.
Here is the working code:
HTML
<div id="ThroughputRate" class="data_entry">
<form action="{{ url_for('background_check_throughputrate') }}" method="post" id="throughputRateForm" enctype="multipart/form-data">
<input name="throughput_rate_text" class="input_box">
<input id="checkThroughputRate" type="submit" class='new-button-data' value="Check Throughput Rate">
<output id="throughputRateResult" class="result_box" ></output>
</form>
</div>
Python
#app.route('/background_check_throughputrate', methods=['GET', 'POST'])
def background_check_throughputrate():
if request.method == 'POST':
text = request.form['throughput_rate_text']
processed_text = str(text)
throughput = transition_throughput_rate(processed_text)
return jsonify(throughput)
JavaScript
<script type="text/javascript">
$(function () {
$('#throughputRateForm').on('submit', function (e) {
e.preventDefault();
var form = $(this)[0];
var formData = new FormData(form);
$.ajax({
url: '/background_check_throughputrate',
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (data) {
console.log(data);
document.getElementById('throughputRateResult').innerHTML = data;
}
});
});
});
</script>
Also, this code blindly trusts the user input and displays it on the webpage which can result to Cross-Site Scripting (XSS) and that is not good!
Avoid using innerHTML property when displaying user input, because it can be used to inject malicious HTML tags (e.g. <script>), i would highly recommend using innerText property instead.

FLASK - AJAX GET data from database

I am making a "write anything here" webpage where users can write anything in a textbox then post it and it is visible to everyone. It worked fine till I found out that when any user writes and submits, all the others have to refresh the page so as to get the new data from database. So a solution to this was to call ajax continuously in some intervals. This would check if there are new entries in the table. If yes, then it would render it to the html without refreshing the whole page. Now I am pure ajax noob and after hours of research I am unable to find out how to do it.
Here is the html code
<div id="textArea">
<form action="http://127.0.0.1:3000" method="POST">
<br>
<textarea minlength="3" name="comment" placeholder="Enter Text Here.." required></textarea>
<input id="postButton" type="submit" name="" value="POST">
</form>
</div>
</div>
<div class="show">
{% for item in data %}
<div id="auto" class="disPost">{{item[0]}}</div>
{% endfor %}
</div>
Here the textarea is in a form and it submits the text to database via flask server.
Also, all the comments that users wrote are shown in "div.show"
Now the flask code is like this
#app.route('/', methods = ['POST', 'GET'])
def home():
if request.method == 'POST':
post = request.form["comment"]
myquery = "select p_id from posts order by p_id desc limit 1"
mycursor.execute(myquery)
new_p_id = mycursor.fetchone()[0] + 1
myquery = "select exists(select * from posts where p_des=%s)"
rec_tup = (post,)
mycursor.execute(myquery, rec_tup)
if mycursor.fetchone()[0]==0:
myquery = "insert into posts values(%s, %s)"
rec_tup = (new_p_id, post)
mycursor.execute(myquery, rec_tup)
mydb.commit()
mycursor.execute("select distinct p_des from posts order by p_id desc")
data = mycursor.fetchall()
return render_template("homepage.html", data=data)
"mydb" is the connector & "mycursor" is the connector's cursor
Now I am stuck somewhere in how to call AJAX function. I am not able to write beyond this ..
$(document).ready(function() {
setInterval(function() {
$.ajax({
url: '',
type: 'GET',
data: //something must be here,
success: function(data) {
//here "div" must be added to the "show" class - that is comment of other users
}
})
}, 3000);
});
I know that I have to do something like this but am literally not able to solve it.
I know this is not good question and I must look at tutorials first. But believe me I had it all. I am not able to solve this problem at all.
Thank you for seeing this :)

I did this on my latest project, you can try it too. But make sure to refresh only div element you want the data show, not all the page.
$(document).ready(function() {
function getData(){
$.ajax({
url: '',
type: 'GET',
data: //something must be here,
success: function(data) {
//here "div" must be added to the "show" class - that is comment of other users
}
});
}
getData();
setInterval(function() {getData()},2000);
});

Populate form field with AJAX query

I would like to populate a django form field each time a dropdown value is selected inside a specific field.
Example :
I have a list of businesses (business A, business B, ...) and a list of countries. Each business is located in a specific country.
Business A --> France
Business B --> Germany
Business C --> England
In my form, when I select a specific business in my dropdown list, I would like to populate immediatly the country field with the associated country. If the business change, the associated country too.
I'm using Django 1.11.18
The context :
In my code, MemberState corresponds to the Country as my example above and RBI corresponds to the business.
My Model :
class MemberState(models.Model):
name = models.CharField(max_length=256, verbose_name=_('Name'))
code = models.CharField(max_length=256, verbose_name=_('Code'))
class RBI(models.Model):
short_name = models.CharField(max_length=256, verbose_name=_('Short name'), unique=True)
member_state = models.ForeignKey(MemberState, verbose_name=_('Member State'))
...
My Form :
class FinalProductSearchForm(forms.Form):
releasing_body = ShortNameModelChoiceField(queryset=RBI.objects.filter(active=True).order_by('short_name'), required=False,
widget=forms.Select(), empty_label=_('Select'), label=_('Releasing Body/Institution'))
member_state = forms.ModelChoiceField(queryset=MemberState.objects.filter(active=True).order_by('name'), required=False,
widget=forms.Select(), empty_label=_('Select'), label=_('Member state'))
...
I would like to select a releasing_body in my form and prefill the member_state field associated. Each time I change the realeasing_body it loads the associated member_state.
I tried some things in Django but I need AJAX request. Unfortunatly, I have never done this kind of things.
My work with AJAX part :
So, this is my first try (which doesn't work) :
I created this function in my views.py file :
def ajax_member_state_request(request):
if request.is_ajax():
release_body = request.GET.get('releasing_body', None)
print(release_body)
member_state_ini = ReleaseBodyInstitution.objects.values_list('member_state', flat=True).get(id=release_body)
print(member_state_ini)
member_state = MemberState.objects.get(id=member_state_ini)
print(member_state)
return JsonResponse({'member_state': member_state})
In my urls.py file, I added :
url(r'^finalproduct/list/$', FinalProductListView.as_view(),
name='finalproduct-list'),
url(r'^finalproduct/list/ajax_member_state_request/$', views.ajax_member_state_request, name='ajax_member_state_request'),
And finally in my HTML file :
<form id="providerForm" data-provider-url="{% url 'ajax_member_state_request' %}" class="navbar-search" method="GET" action="{{ url }}">
{% csrf_token %}
<div class="row">
<div class="col-md-5">
{{ search_form.releasing_body|as_crispy_field }}
</div>
<div class="col-md-5">
{{ search_form.member_state|as_crispy_field }}
</div>
</div>
<input type="submit" class="btn btn-default" value="{% trans 'Search' %}" />
<input type="button" class="btn btn-default" name="clear" value="Reset" onclick="clearForm(this.form);">
</form>
The AJAX part looks like this :
$("#id_releasing_body").change(function () {
var url = $("#providerForm").attr("data-provider-url");
var releasingBodyId = $(this).val();
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: {
'releasing_body': releasingBodyId
},
success: function (data) {
$("#id_member_state").val(data.member_state);
}
});
});

I would implement a view that given a business name returns a JsonResponse with the country (following your example).
With that in place in the success section of the ajax request set the value of the country form field.
The view:
def contry_for_bussines(request):
if request.is_ajax():
member_state = ReleaseBodyInstitution.objects.get(id=release_body).member_state
return JsonResponse({'member_state': member_state})
In the ajax
$("#id_releasing_body").change(function () {
var url = $("#providerForm").attr("data-provider-url");
var releasingBodyId = $(this).val();
$.get(url, {'releasing_body': releasingBodyId}, function(data){
$("#id_member_state").text(data.member_state);
});
});

Check this approach if it helps, I followed those steps for my project and successfully populated choicefields with AJAX request. The only problem is the form is not binding when submitted despite a value is selected in all fields (working on that now)
https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html