Django Ajax post 500 internal error - ajax

Question

i hope you can help me, im trying to make a django post form without reloading the page using ajax, but im getting error 500 when submit, can you help me to fix this, this is my code:
models.py
class ProductoConcepto(models.Model):
producto = models.ForeignKey(Producto)
orden = models.ForeignKey(Cobro)
cantidad = models.FloatField()
urls.py
from django.conf.urls import patterns, include, url
from django.contrib import admin
from cobro import views
urlpatterns = [
url(r'^cobro/agregar_concepto/$', views.addconcept_product, name='add_concepto'),
]
views.py
def addconcept_product(request):
if request.method == 'POST':
if form.is_valid():
producto = request.POST['producto']
orden = request.POST['orden']
cantidad = request.POST['cantidad']
ProductoConcepto.objects.create(producto=producto, orden=orden, cantidad=cantidad)
return HttpResponse('')
template
<div class="modal inmodal fade" id="myModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-m">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Cerrar</span>
</button>
<h3 class="modal-title">Agregar nuevo concepto</h3>
</div>
<div class="modal-body">
<p>Datos de concepto a agregar:</p>
<div class="doctorformstyle">
<form id='formulario-modal' method='post' enctype='multipart/form-data'>
{% csrf_token %}
<ul>{{form2.as_p}}</ul>
<!-- rendered form2 fields: <select id="id_producto" name="producto"><option value="1" selected="selected">object</option></select> -->
<!-- form2 fields: <select id="id_orden" name="orden">
<option value="1" selected="selected">object</option>
</select> -->
<!-- form2 fields: <input id="id_cantidad" name="cantidad" step="any" type="number"> -->
<div class="row align-center">
<input type='submit' name="save1" value='Guardar' class="btn btn-w-m btn-primary"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).on('submit', '#formulario-modal', function(e){
e.preventDefault();
$.ajax ({
type: 'POST',
url: '{% url 'add_concepto' %}',
data: {
producto: $('#id_producto').val(),
orden: $('#id_orden').val(),
cantidad: $('#id_cantidad').val(),
csrfmiddlewaretoken: '{{ csrf_token }}',
},
sucess:function(){
alert("OK");
}
})
});
</script>
this is the error: POST http://127.0.0.1:8000/cobro/agregar_concepto/ 500 (Internal Server Error)
I think that maybe something is missing in my view, buy i dont know that, cal you help me?
Edit: Traceback added
Environment:
Request Method: GET Request URL:
http://127.0.0.1:8000/cobro/agregar_concepto/
Django Version: 1.9.7 Python Version: 2.7.11 Installed Applications:
('django.contrib.admin', 'django.contrib.auth',
'django.contrib.contenttypes', 'django.contrib.sessions',
'django.contrib.messages', 'django.contrib.staticfiles', 'entrada',
'cobro', 'catalogo', 'selectize', 'smart_selects') Installed
Middleware: ('django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.auth.middleware.SessionAuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware')
Traceback:
File "C:\Python27\lib\site-packages\django\core\handlers\base.py" in
get_response
158. % (callback.module, view_name))
Exception Type: ValueError at /cobro/agregar_concepto/ Exception
Value: The view cobro.views.addconcept_product didn't return an
HttpResponse object. It returned None instead.

Answer 1

You view is not complete:
As the exception states: The view cobro.views.addconcept_product didn't return an proper HttpResponse object.
return HttpResponseRedirect('/thanks/')

Answer 2

Are you viewing the exception you provided in a new window? Because it is showing
"Request Method: GET" which shouldn't be happening via your ajax function.
Modify your view to this:
def addconcept_product(request):
if request.method == 'POST':
if form.is_valid():
producto = request.POST['producto']
orden = request.POST['orden']
cantidad = request.POST['cantidad']
ProductoConcepto.objects.create(producto=producto, orden=orden, cantidad=cantidad)
return HttpResponse('Product Created')
else:
return HttpResponse('Product Creation failed')
else:
return HttpResponse('Failed: Post requests only.')

Answer 3

Update your return statement with something like.
return HttpResponse('Product Created !')
Also as you are using ajax, you can also return a JsonResponse.
First import it
from django.http import JsonResponse
and then return your response
JsonResponse({'success': 'Product created'})
The exception is getting raised because you are not handling the condition if the method is not POST, and you are submitting a GET request.
Handle the cases for invalid form and if method is not POST.
def addconcept_product(request):
if request.method == 'POST':
if form.is_valid():
....
return JsonResponse({'success': 'Product created'})
else:
return JsonResponse({'error': 'InValid Form.Product Creation Failed'})
else:
return JsonResponse({'error': 'Only POST method allowed'})
Also use ajax method attribute instead of type.
$.ajax ({
method: 'POST',
url: '{% url 'add_concepto' %}',
....
});