Django, I can't return httpresponse data with ajax on admin change_list view - ajax

Question

Now I added a button to admin panel like in this which open a modal like this with form that takes a pin and I want to return with a balance value in an alert or a modal, but I can't as change_list view in admin django return TemplateResponse not an HttpResponse, when I searched I found that all examples use httpresponse to dump json data, btw Templateresponse inherits from Httpresponse, but what can I do to return balance value here is my code
Note :I'm not good at ajax
This is my template in admin
change_list.html
{% block object-tools-items %}
<li>Balance</li>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Insert your pin</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div >
<form class="input-group" style="margin-bottom: 15px;" method="post" action="." id="pinform">
{% csrf_token %}
{{pinform.as_p}}
<span class="input-group-btn">
<button class="btn btn-default" id="PinInput" type="submit" role="button" data-toggle="modal" data-balance="{{balance}}">Go!</button>
</span>
</form>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</div>
</div>
</div>
<div id="balanceModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" >×</button>
<h4 class="modal-title">Balance</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<div class="input-group" style="margin-bottom: 15px">
<p id="balance">{{balance}} EGP</p>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</div>
</div>
</div>
{{block.super}}
{% endblock %}
my admin change_list view is
admin.py
def changelist_view(self, request, extra_context=None):
extra_context = extra_context or {}
if request.method == 'POST' and request.is_ajax():
form = PinForm(request.POST)
if form.is_valid():
extra_context['pinform'] = form
extra_context['balance'] = form.clean_pin()
response = super(TRANSACTION_DISPLAY, self).changelist_view(request, extra_context=extra_context)
response['balance'] = form.clean_pin()
return response
else:
extra_context['pinform'] = PinForm
return super(TRANSACTION_DISPLAY, self).changelist_view(request, extra_context=extra_context)
else:
extra_context['pinform'] = PinForm()
return super(TRANSACTION_DISPLAY, self).changelist_view(request, extra_context=extra_context)
Change_list.js
$(document).ready(function() {
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
$('#pinform').on('submit', function(event){
event.preventDefault();
console.log("form submitted!"); // sanity check
var csrftoken = getCookie('csrftoken');
var pin = $('#inputPin').val();
$.ajax({
url : window.location.href, // the endpoint,commonly same url
type : "POST", // http method
crossDomain: false,
data : { csrfmiddlewaretoken : csrftoken,
pin : pin
}, // data sent with the post request
// handle a successful response
success : function(data) {
// $('#mymodal').modal('hide');
// $('#balanceModal').modal('show');
// console.log(data);
// $('#balance').text(data($('#PinInput').data('balance')));
return data;
},
// handle a non-successful response
error : function(xhr,errmsg,err) {
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
});});
forms.py
class PinForm(forms.Form):
pin = forms.CharField(max_length=32, widget = forms.PasswordInput(attrs={'class': 'form-control',
'id': 'inputPin'}), label='')
def clean_pin(self):
balance = '200.0' # for simplicity
return balance
Now the form submitted and appear form submitted in console log but I can't grap the data returned from the view

Answer 1

admin.py
if request.method == 'POST' and request.is_ajax():
form = PinForm(request.POST)
if form.is_valid():
extra_context['pinform'] = form
return HttpResponse(json.dumps({'balance': form.cleaned_data['pin']}), content_type='application/json')
else:
extra_context['pinform'] = PinForm()
return super(TRANSACTION_DISPLAY, self).changelist_view(request, extra_context=extra_context)
Change_list.js
$.ajax({
url : window.location.href, // the endpoint,commonly same url
type : "POST", // http method
crossDomain: false,
data : { csrfmiddlewaretoken : csrftoken,
pin : pin
}, // data sent with the post request
// handle a successful response
success : function(data) {
$('#myModal .close').click();
$('#balanceModal').modal('show');
$('#balance').addClass('lead').text(data['balance']);
},
// handle a non-successful response
error : function(xhr,errmsg,err) {
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
});