jinja2.exceptions.UndefinedError for variables passing to python function from Flask template - flask

I am getting this error jinja2.exceptions.UndefinedError: 'values' is undefined. The simple code which I am using with reference from the Flask website http://flask.pocoo.org/docs/0.12/templating/ is below:
#app.context_processor
def utility_processor():
def format_price(amount, currency=u'€'):
return u'{0:.2f}{1}'.format(float(amount), currency)
return dict(format_price=format_price)
#app.route("/file_t")
def file_t():
return render_template('DB.html')
#app.route("/file_ttt", methods=['POST'])
def file_ttt():
if request.method == 'POST':
bMultyTest_plot = request.values.get("bMultyTest_plot")
print(bMultyTest_plot)
return jsonify({'result': 'success', 'value': 0.44})
And the html template code below:
<button type="button" onclick="visualize()">Visualize</button>
<div id='here'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function visualize()
{
req = $.ajax({
url : "/file_ttt",
type: "POST",
data: {"bMultyTest_plot": true}
})
req.done(function(data) {
var values = data.value;
document.getElementById("here").innerHTML ="{{format_price(values)}}";
});
}
</script>
Instead of the variable values, if I pass a float value, the function works. like:
document.getElementById("here").innerHTML ="{{format_price(0.33)}}";
but with a variable i am getting the below error:
document.getElementById("demo").innerHTML ="{{format_price(values)}}";
File "<ipython-input-138-4e2a0498745e>", line 17, in format_price
return u'{0:.2f}{1}'.format(float(amount), currency)
jinja2.exceptions.UndefinedError: 'values' is undefined
10.45.65.219 - - [19/Mar/2019 09:56:12] "GET /file_t HTTP/1.1" 500 -

Your template expects values variable, but you don't provide it when calling the render_template function in file_t. You need to provide it like this:
return render_template('DB.html', values=values)
See the documentation for more information.

Related

Calling Ajax from django template fails with error: Field 'id' expected a number but got 'populate_sections'

I have one URL in urls.py file as given below:-
urlpatterns = [
........
path('edit_student/<student_id>', views.edit_student, name="edit_student"),
path('populate_sections', views.populate_sections, name="populate_sections"),
..........
]
In views.py file edit student function is defined as follows:
#login_required
def edit_student(request, student_id):
form = UpdateStudentForm()
context = {
"form": form
}
return render(request, "edit_student.html", context)
Now the template edit_student.html has a Ajax call:-
$("#id_class_name").change(function(){
var class_name = $(this).val();
$.ajax({
url: 'populate_sections',
type: 'GET',
data: {class_name:class_name},
dataType: 'json',
success: (data) => {
$("#id_section_name").empty();
for( var i in data.context){
$("#id_section_name").append("<option value='"+data.context[i].id+"'>"+data.context[i].name+"</option>");
}
}
});
});
The views.py file function populate_section is declared as follows:-
#login_required
def populate_sections(request):
is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
if is_ajax:
if request.method == 'GET':
class_name = request.GET.get("class_name")
class_object = Classes.objects.get(id=class_name)
sections = Sections.objects.filter(classes=class_object)
return JsonResponse({'context': list(sections.values())})
return JsonResponse({'status': 'Invalid request'}, status=400)
else:
return HttpResponseBadRequest('Invalid request')
Whenever i change the field which triggers Ajax function call i am getting the value error:
ValueError at /edit_student/populate_sections
Exception Value:
Field 'id' expected a number but got 'populate_sections'.
I understand that it is expecting the student id but how to do that.
Thanks & Regards
Neha Singh

Pass javascript variable to views.py

I really need some help on this subject, which seems easy, but i cant get myself to figure out the problem.
I understand that using ajax is the best way to pass a variable from a template to a view.
Is what i have done good, or would you recommend i try something different ?
function updateArea(e) {
var data = draw.getAll();
var answer = document.getElementById('calculated-area');
if (data.features.length > 0) {
var area = turf.area(data);
// restrict to area to 2 decimal points
var rounded_area = Math.round(area*100)/100;
answer.innerHTML = '<p><strong>' + rounded_area + '</strong></p><p>square meters</p>';
var convertedData = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(data));
document.getElementById('export').setAttribute('href', 'data:' + convertedData);
document.getElementById('export').setAttribute('download','data.geojson');
} else {
answer.innerHTML = '';
if (e.type !== 'draw.delete') alert("Use the draw tools to draw a polygon!");
}
}
I want to take the area variable and convertedData variable and pass them to a view.
So after some searching and trial and error, here is what I tried to do using Ajax.
When I run this i get no errors, but i get nothing in my database.
template.html
<form id="areaform" method="POST">
{% csrf_token %}
<input type="submit" name="area" value=""/>
</form>
$(document).on('submit', '#areaform',function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
url:'fertisatmap/area',
data:{
name: $('#area').val(),
},
sucess:function(){}
});
});
urls.py
path('fertisatmap/area', fertisat_views.fertisatareaview, name='fertisat-area'),
views.py
def fertisatareaview(request):
if request.method == "POST":
area = request.POST['area']
Fertidb.objects.create(
area = area)
return HttpResponse('')

View didn't return a response

I am working on a python django web app in which I want to implement internationalization and auto translate the whole app into french or chinese.
I took reference from this site https://www.metod.io/en/blog/2015/05/05/django-i18n-part-1/
But whenever I try to run the app it shows this error:
500: ValueError at /en/get_dashboard_data/ The view
dashboard.views.getDashboardData didn't return an HttpResponse object.
It returned None instead.
And url get_dashboard_data is fetching data through ajax.
url(r'^get_dashboard_data/$', views.getDashboardData, name='getDashboardData'),
view
#login_required(login_url='/')
def getDashboardData(request):
dbname = request.user.username
if request.method == 'POST' and request.is_ajax():
if request.POST.get('action') == 'sale_chart_data':
data = DashboardData(dbname).getSaleChartData()
channel_list = data[0]
data_list = data[1]
print 123, data_list, channel_list
return HttpResponse(json.dumps({'channel_list':channel_list, 'data_list':data_list}), content_type='application/json')
if request.POST.get('action') == 'get_sale_numbers':
sale_data = DashboardData(dbname).getSaleNumbers()
return HttpResponse(json.dumps({'sale_number_data':sale_data}), content_type='application/json')
if request.POST.get('action') == 'get_inventory_numbers':
inventory_data = DashboardData(dbname).getInventoryData()
return HttpResponse(json.dumps({'inventory_data':inventory_data}), content_type='application/json')
if request.POST.get('action') == 'get_order_numbers':
order_data = DashboardData(dbname).getOrderData()
return HttpResponse(json.dumps({'order_data':order_data}), content_type='application/json')
if request.POST.get('action') == 'get_hourly_data':
order_data = DashboardData(dbname).getHourlyData()
sale_data = order_data[1]
count_data = order_data[0]
return HttpResponse(json.dumps({'sale_data':sale_data, 'count_data':count_data}), content_type='application/json')
if request.POST.get('action') == 'top_performers':
data = DashboardData(dbname).getTopPerformers()
inventory_count_dict = data[0]
current_month_dict = data[1]
last_month_dict = data[2]
current_quarter_dict = data[3]
current_year_dict = data[4]
channel_list = data[5]
return HttpResponse(json.dumps({'inventory_count_dict':inventory_count_dict,'current_month_dict':current_month_dict,'last_month_dict':last_month_dict,'current_quarter_dict':current_quarter_dict,'current_year_dict':current_year_dict,'channel_list':channel_list}), content_type='application/json')
if request.POST.get('action') == 'top_products':
product_data = DashboardData(dbname).getTopProducts()
return HttpResponse(json.dumps({'product_data':product_data}), content_type='application/json')
javascript
function getSaleChart(){
$.ajax({
url : "/get_dashboard_data/",
type : "POST",
data : {action:'sale_chart_data'},
success : function(response) {
channel_list = response.channel_list;
data_list = response.data_list;
c3.generate({
bindto: '#sale-chart-30-days',
data:{
x: 'dates',
xFormat: '%b %d',
columns: data_list,
colors:{
Flipkart: '#1AB394',
Paytm: '#BABABA'
},
type: 'bar',
groups: [ channel_list ]
},
axis: {
x: {
type: 'timeseries'
}
}
});
},
error : function(xhr,errmsg,err) {
toastr["error"]("Something Broke.", "Oops !!!.");
console.log(xhr.status + ": " + xhr.responseText);
}
});
}
This is why you should really practice more defensive programming. Though you insist that the request method is POST and it is ajax and the action is sale_chart_data one of the three isn't what you expect it to be.
Your function really should be like follows. It's plain old good practice.
def getDashboardData(request):
dbname = request.user.username
if request.method == 'POST' and request.is_ajax():
action = request.POST.get('action')
if action == 'sale_chart_data':
data = DashboardData(dbname).getSaleChartData()
....
...
# other if conditions here
else :
return HttpResponse(json.dumps({'message':'Unknown action {0}'.format(action)}), content_type='application/json')
else :
return HttpResponse(json.dumps({'message':'Only ajax post supported'}), content_type='application/json')
And then you ought to set break points and evaluate the request to figure out what exactly is happening in this particular request.
My guess would be that your JavaScript does indeed make a POST request to /get_dashboard_data/ but it receives a redirect response (HTTP 301 or 302) to /en/get_dashboard_data/ due to some kind of i18n middleware.
The browser follows the redirect, but the new request to /en/get_dashboard_data/ is a GET request.
Edit:
When following a redirect, the browser will always perform the second request as GET, there is no way to prevent that. You have several options to solve this:
make the initial request to the right application. This means you have to pass your i18n URL into your JavaScript instead of hardcoding it. You can add something like this to your template:
<script>var dashBoardDataUrl = "{% url "name-of-dashboard-url" %}"</script>
as your "actions" just get code, you could just accept a GET request and read the action from query paramters
Split that view into several smaller views that accept GET request so you have something that resembles a REST API.

Django File Upload Progress

I have used Django File Upload Progress process for getting progress but getting error pliks.upload" does not define a "UploadProgressCachedHandler" upload handler backend.
Steps i followed is
1) Create a folder upload and add file upload handler(UploadProgressCachedHandler.py) to it.
from django.core.files.uploadhandler import FileUploadHandler
from django.core.cache import cache
class UploadProgressCachedHandler(FileUploadHandler):
"""
Tracks progress for file uploads.
The http post request must contain a header or query parameter, 'X-Progress-ID'
which should contain a unique string to identify the upload to be tracked.
Copied from:
http://djangosnippets.org/snippets/678/
See views.py for upload_progress function...
"""
def __init__(self, request=None):
super(UploadProgressCachedHandler, self).__init__(request)
self.progress_id = None
self.cache_key = None
def handle_raw_input(self, input_data, META, content_length, boundary, encoding=None):
self.content_length = content_length
if 'X-Progress-ID' in self.request.GET :
self.progress_id = self.request.GET['X-Progress-ID']
elif 'X-Progress-ID' in self.request.META:
self.progress_id = self.request.META['X-Progress-ID']
if self.progress_id:
self.cache_key = "%s_%s" % (self.request.META['REMOTE_ADDR'], self.progress_id )
cache.set(self.cache_key, {
'length': self.content_length,
'uploaded' : 0
})
def new_file(self, field_name, file_name, content_type, content_length, charset=None):
pass
def receive_data_chunk(self, raw_data, start):
if self.cache_key:
data = cache.get(self.cache_key)
data['uploaded'] += self.chunk_size
cache.set(self.cache_key, data)
return raw_data
def file_complete(self, file_size):
pass
def upload_complete(self):
if self.cache_key:
cache.delete(self.cache_key)
2)Add the UploadProgressCachedHandler to your settings.py file:
from django.conf import global_settings
FILE_UPLOAD_HANDLERS = ('pliks.upload.UploadProgressCachedHandler', ) + \
global_settings.FILE_UPLOAD_HANDLERS
3)Add code to view.py
from django.core.cache import cache
from django.http import HttpResponse, HttpResponseServerError
def upload_progress(request):
"""
A view to report back on upload progress.
Return JSON object with information about the progress of an upload.
Copied from:
http://djangosnippets.org/snippets/678/
See upload.py for file upload handler.
"""
#import ipdb
#ipdb.set_trace()
progress_id = ''
if 'X-Progress-ID' in request.GET:
progress_id = request.GET['X-Progress-ID']
elif 'X-Progress-ID' in request.META:
progress_id = request.META['X-Progress-ID']
if progress_id:
from django.utils import simplejson
cache_key = "%s_%s" % (request.META['REMOTE_ADDR'], progress_id)
data = cache.get(cache_key)
return HttpResponse(simplejson.dumps(data))
else:
return HttpResponseServerError(
'Server Error: You must provide X-Progress-ID header or query param.')
4) Add url
url(r'^admin/upload_progress/$',
'utils.views.upload_progress',
name="admin-upload-progress"),
5) In template
{% block extra-head %}
<script type="text/javascript" >
// Generate 32 char random uuid
function gen_uuid() {
var uuid = ""
for (var i=0; i < 32; i++) {
uuid += Math.floor(Math.random() * 16).toString(16);
}
return uuid
}
// Add upload progress for multipart forms.
$(function() {
/*
This throws a syntax error...
$('form[#enctype=multipart/form-data]').submit(function(){
*/
$('#upload').submit(function(){
// Prevent multiple submits
if ($.data(this, 'submitted')) return false;
var freq = 1000; // freqency of update in ms
var uuid = gen_uuid(); // id for this upload so we can fetch progress info.
var progress_url = '/feature/admin/upload_progress/'; // ajax view serving progress info
// Append X-Progress-ID uuid form action
this.action += (this.action.indexOf('?') == -1 ? '?' : '&') + 'X-Progress-ID=' + uuid;
var $progress = $('<div id="upload-progress" class="upload-progress"></div>').
appendTo(document.body).append('<div class="progress-container"><span class="progress-info">uploading 0%</span><div class="progress-bar"></div></div>');
// progress bar position
$progress.css({
position: ($.browser.msie && $.browser.version < 7 )? 'absolute' : 'fixed',
left: '50%', marginLeft: 0-($progress.width()/2), bottom: '20%'
}).show();
// Update progress bar
function update_progress_info() {
$progress.show();
$.getJSON(progress_url, {'X-Progress-ID': uuid}, function(data, status){
if (data) {
var progress = parseInt(data.uploaded) / parseInt(data.length);
var width = $progress.find('.progress-container').width()
var progress_width = width * progress;
$progress.find('.progress-bar').width(progress_width);
$progress.find('.progress-info').text('uploading ' + parseInt(progress*100) + '%');
}
window.setTimeout(update_progress_info, freq);
});
};
window.setTimeout(update_progress_info, freq);
$.data(this, 'submitted', true); // mark form as submitted.
});
});
</script>
{% endblock %}
{% block content %}
<form id='upload' action="." enctype="multipart/form-data" method="POST">
<table>
{{ form.as_table }}
</table>
<p><input type="submit" value="Submit"></p>
</form>
{% endblock %}
Somewhere i got wrong....
You need to provide the class name of the handler, if your file is called UploadProgressCachedHandler.py you are providing the module name here. you would need to use
FILE_UPLOAD_HANDLERS = ('pliks.upload.UploadProgressCachedHandler.UploadProgressCachedHandler', ) + \
global_settings.FILE_UPLOAD_HANDLERS
Python convention would be to call the module handlers.py rather than name it after a class it contains.

getting a user-inputed variable in django template wihtout using forms

I have a django template which also has a div element that takes in a user_inputed value.
When the value is entered, I call a javascript function say onSubmit(user_input)
<input type="text" class= "inputtext" onKeyPress="return onSubmit(this.value)">
Now in this onSubmit() function which now has the user-inputted value user_input, I want to be able to use url patterns to a direct to a view, like
function onSubmit(user_input) {window.location = "{% url myview user_input %}";}
The problem here is that since user_input is empty when the template is loaded, the url-view reverse lookup gives an error. Is there a way to trigger this lookup only when the onSubmit function is called.
I know form is an alternative, but it just feels like it'll be an overkill for this situation.
You can get the URL via AJAX:
views.py:
def get_url(request):
name = request.GET.get('name')
args = reguest.GET.get('args', [])
kwargs = request.GET.get('kwargs', {})
try:
url = django.core.urlresolvers.reverse(name, args=args, kwargs=kwargs)
except NoReverseMatch:
url = None
return django.http.HttpResponse(url)
urls.py
#...
('^url$', get_url)
#...
js:
function onSubmit(user_input) {
var args = [user_input];
jQuery.get('/url', {'args': args}, function(data) {
var url = data;
if (url) {
window.location = url;
} else {
alert('fail');
}
});
}
Alternatively, if your URL rule is simple enough, you can use some placeholder when resolving and URL, and before submitting the form you should replace it with real input:
var fakeUrl = '{% url myview "%s%" %}';
function onSubmit(user_input) {
window.location = fakeUrl.replace('%s%', user_input);
}