How to receive and save data via ajax in django? - html

Question

through ajax I am sending the data correctly, because the data I see through wireshak and they are correct. On the django server, he sends me the correct request "POST / solit / HTTP / 1.1" 200 52. But the value sent does not receive it, it does not reach the Mysql database and I do not understand why, if the traffic sends well the data.
In wireshak I see the data of the post request, they are the correct ones, but they are not saved in the database, when I want them to be added as if I were to update the record of such database fields and it does not , I do not understand why
this is my views.py
def solit(request):
if request.method == 'POST' and request.is_ajax():
form = addiForm(request.POST)
if form.is_valid():
peticion = form.save(commit=False)
peticion.usuario = request.user
peticion.save()
peticion.usuario.d_pendientes = form.cleaned_data.POST.get('d_pendientes')
peticion.usuario.h_pendientes = form.cleaned_data.POST.get('h_pendientes')
peticion.usuario.save()
return JsonResponse({'status': 'true', 'msg': 'Procesado Correctamente'})
form = addiForm()
return render(request, 'plantillas/adicionar.html', {'form':form})
This is my models.py------------------------------
class Usuarios(AbstractUser):
numero_empleado = models.IntegerField(null= True, blank= True)
area = models.CharField(max_length = 200, null= True, blank= True)
d_pendientes = models.IntegerField(null= True, blank= False)
h_pendientes = models.IntegerField(null= True, blank= False)
f_init = models.DateField(max_length = 200,null= True, blank= True)
init_vac = models.DateField(max_length = 200, null= True, blank= True)
fin_vac = models.DateField(max_length = 200, null= True, blank= True)
ul_vac_tomadas = models.IntegerField(null= True, blank= True)
class Peticion(models.Model):
solit_choices = (
('Adicionar','Adicionar'),
)
solicitudes_id = models.AutoField(primary_key=True)
usuario = models.ForeignKey(Usuarios, on_delete=models.CASCADE, null=True, blank=True)
petit = models.CharField(max_length = 255, choices=solit_choices, null=True, blank=False)
fec = models.DateTimeField(auto_now=True)
razon = models.TextField(max_length=255, null=True, blank=True)
periodo_init = models.DateField(max_length = 200, null=True, blank=True)
periodo_fin = models.DateField(max_length = 200, null=True, blank=True)
dias_adicion = models.IntegerField(null=True, blank=False)
horas_adicion = models.FloatField(null=True, blank=False)
this is my forms.py
class addiForm(forms.ModelForm):
class Meta:
"""Formulario de solicitud"""
model = Peticion
fields = [
'solicitudes_id',
'petit',
'razon',
'periodo_init',
'periodo_fin',
'dias_adicion',
'horas_adicion',
]
labels = {
'solicitud_id':'Solicitud',
'petit':'Tipo de Petición',
'razon':'Razon',
'periodo_init':'Rango de fecha inicial',
'periodo_fin':'Fecha final',
'dias_adicion':'Dias a adicionar, si es mas de 8 horas',
'horas_adicion':'Horas a adiciona, si es menos de 1 dia',
html file
{% extends "plantillas/base.html" %}
{% block content %}
{% load staticfiles %}
{% now "Y-m-d H:i:s" %} <br>
{{ user.Peti}}
{{ user.numero_empleado}}
<script src="{% static 'js/int.js'%}"></script>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<div><form method="POST" id="demo" class="form-data" action="{% url 'solit' %}">
{% csrf_token %}
<h6>Tipo de peticion:{{form.petit}}</h6>
<h6>Razon:{{form.razon}}</h6>
<h6>{{form.solicitudes_id}}</h6>
<h6>Fecha inicio:{{form.periodo_init}}</h6>
<h6>Fecha fin:{{form.periodo_fin}}</h6>
<h6>Introduzca dias a tomar<input id="dias" type="number" name="dias_adicion"></h6>
<h6>Introduzca horas a tomar<input id="horas" type="number" name="horas_adicion"></h6>
<input type="hidden" id="const_dias" name="d_pendientes" value="{{ user.d_pendientes }}">
<input type="hidden" id="const_horas" name="h_pendientes" value="{{ user.h_pendientes }}">
<button type="submit" onclick="calculo()">Guardar</button>
</div></form></span>
<h6>Recuerde, que usted dispone de {{ user.d_pendientes }} dias y {{ user.h_pendientes }} horas</h6>
js file---------------------
function calculo()
{
var dias = parseInt(document.getElementById('dias').value);
var horas = parseFloat(document.getElementById('horas').value);
var dias_base = parseInt(document.getElementById('const_dias').value);
var horas_base = parseFloat(document.getElementById('const_horas').value);
dias_base -= dias;
horas_base -= horas;
document.getElementById('const_dias').value = dias_base;
document.getElementById('const_horas').value = horas_base;
} console.log(calculo);
server django console [24/Jul/2019 15:30:47] "POST /solit/ HTTP/1.1" 200 52 and the js console msg: "Procesado Correctamente"
status: "true"
ajax script--------------------------------------------
$(document).ready(function(calculo){
var productForm = $("#demo")
productForm.submit(function(event){
event.preventDefault();
var thisForm = $(this)
var actionEndpoint = thisForm.attr("action");
var httpMethod = thisForm.attr("method");
var formData = thisForm.serialize();
$.ajax({
url: actionEndpoint,
method: httpMethod,
data: formData,
success: function(data){
console.log("success")
console.log(data)
},
error: function(erroData){
console.log("error")
console.log(erroData)
}
})
})
})

Answer 1

You still haven't really explained where you want the value for "usario" to come from. I'm going to assume that you want it to be the currently logged-in user. In which case, you can do this:
form = addiForm(request.POST)
if form.is_valid():
peticion = form.save(commit=False)
peticion.usuario = request.user
peticion.save()
peticion.usuario.d_pendientes = form.cleaned_data.get('d_pendientes')
peticion.usuario.h_pendientes = form.cleaned_data.get('h_pendientes')
peticion.usuario.save()
return JsonResponse({'status': 'true', 'msg': 'Procesado Correctamente'})
(Note, .get is a method, it needs parentheses not square brackets. And None is the default, you don't need to specify it explicitly.)
Edit
I'm finding it really hard to understand what you are asking, but I think your problem is that you simply don't have anything in the form called dias_adicionar or horas_adicionar; they are called d_pendientes and h_pendientes in line with your actual field names.

Answer 2

There isn't anything in your JavaScript code which makes an AJAX request - it's just a normal form POST request. This means request.is_ajax() will be false, and the form saving code doesn't execute.