-1

Teniendo en cuenta que tengo mi modelo userPersonalizado. Y este tiene 2 campos que quiero actualizar mediante un formulario, donde introducen un valor numérico y al hacerlo, se hace una operación matemática. Bueno el resultado de esa operación matemática lo quiero para actualizar los campos del usuario logeado, según el valor numérico introducido. Estoy importando la librería de Jquery.

Archivo form.html:

<div><form method="POST" 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 }}">
Recuerde, que usted dispone de {{ user.d_pendientes }} dias y 
{{ user.h_pendientes }} horas a compensar <br>

<button type="submit" onclick="calculo()" class="boton">Guardar</button>

Estoy accediendo a 2 campos del modelo userPersonalizado, los cuales, quiero actualizar mediante una operación aritmetica, en este caso resta (-). Que lo logro mediante js

Archivo javascript:

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;

alert(dias_base);
alert(horas_base);
} console.log(calculo);

Código ajax:

$(document).ready(function(){
var productForm = $(".form-data")

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)
    }
  })

 })
})

Archivo views.py:

def solit(request):
if request.method == 'POST' and request.is_ajax():
    form = addiForm(request.POST)
    if form.is_valid():
        form.save()
    return JsonResponse({form:'form'})

form = addiForm()
return render(request, 'plantillas/adicionar.html', {'form':form})

Que es lo que tengo mal?, El error, que me aparece es Internal server error 500, en la consola de inspección js.

Y en la consola de Django, me muestra el siguiente error:

TypeError: keys must be str, int, float, bool or None, not addiForm [22/Jul/2019 12:20:51] "POST /solit/ HTTP/1.1" 500 14404
9
  • JsonResponse({form:'form'}) aqui le estas pasando una instancia de tu form no un json, es por eso que te da el error
    – oegpyg
    Commented el 22 jul. 2019 a las 19:22
  • @oegpyg, gracias por tu respuesta, entonces en el código como paso el json, como tu lo dices? gracias de antemano
    – Jonathan
    Commented el 22 jul. 2019 a las 19:27
  • depende de quieras retornar en tu respuesta
    – oegpyg
    Commented el 22 jul. 2019 a las 19:29
  • github.com/WiserTogether/django-remote-forms puedes usar esta libreria que te permite serializar forms y widgets
    – oegpyg
    Commented el 22 jul. 2019 a las 19:34
  • @oegpyg, Si retornar mi respuesta json, es guardar el valor resultante de la operación hecha en el fronted, entonces, como se haría en esa función de mi archivo views.py?? Gracias por la libreria, pero creo que me es mas facil, como lo estoy haciendo, por que asi con ese repo, no entiendo casi nada, igual gracias por tu respuesta
    – Jonathan
    Commented el 22 jul. 2019 a las 19:42

1 respuesta 1

1

Segun lo comentado seria algo asi lo que precisas

def solit(request):
   if request.method == 'POST' and request.is_ajax():
       form = addiForm(request.POST)
       if form.is_valid():
           form.save()
           return JsonResponse({'status': 'true', 'msg': 'Procesado Correctamente'})
       else:
           return JsonResponse({'status': 'false', 'msg': 'Los datos no son validos'})

   form = addiForm()
   return render(request, 'plantillas/adicionar.html', {'form':form})

Por lo que tu javascript quedaria asi:

success: function(data){
      if (data.status){
          console.log(data.msg);
      }else{
          //aqui ocurrio un error al grabar
          console.log(data.msg);
      }
    },
5
  • que tal si creas un dict con status y msg y lo cambias solo si es "success", asi solo hay un solo return Commented el 22 jul. 2019 a las 20:04
  • Asi mismo es en optimizacion de codigo, solo que quiero que sea bien claro para el amigo
    – oegpyg
    Commented el 22 jul. 2019 a las 20:08
  • Bueno man, no se actualizo el valor del campo, pero si me muestra esto: "Procesado Correctamente", en el console de javascript. disuclpa las molestias @oegpyg
    – Jonathan
    Commented el 22 jul. 2019 a las 20:19
  • Puedes retornar el error de esta form en el msg form.errors
    – oegpyg
    Commented el 22 jul. 2019 a las 20:21
  • Tocando mas el archivo en la consola, de javacript, me manda esto: {status: "true", msg: "Procesado Correctamente"} msg: "Procesado Correctamente" status: "true", Pero aun asi no me guarda el valor resultante de la operación que tengo en mi pregunta junto al archivo javascript, algo estoy haciendo mal?
    – Jonathan
    Commented el 22 jul. 2019 a las 20:33

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.