I want to validate with ajax and json in Django, a field if it already exists before submitting?

Question

I want to validate with ajax and json in Django, a field if it already exists before submitting?

Navigation

#1 by (1 votes)

0

This is the url:

url(r'validar/celda', SGregorio_views.validarcelda, name='validarcelda'),

This is the view to validate:

def validarcelda(request):
    error = ''
    success = False
    if request.method == 'POST':
        celda = request.POST.get('celda', None)
        if not celda:
            error = _('La celda ya esta ocupada')
        elif User.objects.filter(celda__exact=celda).exists():
            error = _('La celda ya esta ocupada')
        else:
            success = True
    ajax_vars = {'success': success, 'error': error}
    return HttpResponse(json.dumps(ajax_vars),content_type='application/javascript')

This is the view to add:

def inventarioingresoe(request):
empaque = Empaque.objects.all()
if request.method == "POST":
    variedad = request.POST["variedad"]
    empaque = request.POST["empaque"]
    grado = request.POST["grado"]
    comercializadora = request.POST["comercializadora"]
    ramos = request.POST["ramos"]
    unidades = request.POST["unidades"]
    celda = request.POST["celda"]

    nuevoingreso = Empaque.objects.create( fecha = fecha,
                                               hora = hora,
                                               variedad = variedad,
                                               empaque = empaque,
                                               grado = grado,
                                               comercializadora = comercializadora,
                                               ramos = ramos,
                                               unidades = unidades,
                                               total = int(unidades) * int(ramos),
                                               celda = celda)
    return redirect('empaque')

return render(request,"inventario/empaque/ingresoe.html", {})

This is the template:

<div class="modal-header">
    <button type="reset" data-dismiss="modal" class="cerrarmodal">
        <i class="fa fa-close"> </i>
    </button>
    <h4> <span><i class="fa fa-plus"></i></span>Ingresar caja</h4>
</div>
            <div class="modal-body">
                <div class="container-fluid">
    <form class="formatolinea" method="post" name="empaque" id="empaque" action="{% url 'empaqueingreso' %}" onSubmit="return iempaque();">
        {% csrf_token %}
        <label>Variedad</label>
        <select name="variedad" value="{{variedad}}">
            <option>Seleccione la varieda</option>
            <option>Freedom</option>
            <option>Vendela</option>
        </select>
        <div class="mensaje" id="mensajev" style='display: none;'>Debe seleccionar la variedad</div>
        <label>Grado</label>
        <select name="grado" value='{{grado}}'>
            <option>Seleccione el grado</option>
            <option value="40">40</option>
            <option value="50">50</option>
            <option value="60">60</option>
            <option value="70">70</option>
        </select>
        <div name="mensajeg" class="mensaje" id="mensajeg" style='display: none;'>Debe seleccionar el grado</div>
        <label>Tipo de empaque</label>
        <select name="empaque" value='{{empaque}}'>
            <option>Seleccione el empaque</option>
            <option>Tabaco</option>
            <option>Full</option>
            <option>Cuarto</option>
            <option>Tercio</option>
            <option>Octavos</option>
        </select>
        <div name="mensajee" class="mensaje" id="mensajee" style='display: none;'>Debe seleccionar el empaque</div>
        <label>Cantidad de ramos</label>
        <input type="number" name="ramos" value="{{ramos}}" placeholder="Digite los ramos">
        <div name="mensajer" class="mensaje" id="mensajer" style='display: none;'>Debe digitar el numero de ramos</div>
        <label>Unidades por ramo</label>
        <select name="unidades" onChange="otro(this.value);">
            <option>Unidades por ramo</option>
            <option>20</option>
            <option>25</option>
            <option value="Otro" id="otro">Otro</option>
        </select>
        <div name="mensajeu" class="mensaje" id="mensajeu" style='display: none;'>Debe seleccionar las unidades por ramo</div>
        <label id="digite" style=' display: none; '>Digite la cantidad</label>
        <input type="number" name="tabaco" id="unidad" style=' display: none; ' onChange="cambiar(this.value);">
        <label>Comercializadora</label>
        <select name="comercializadora" value="{{comercializadora}}">
            <option>Seleccione la comercializadora</option>
            <option>QU</option>
            <option>GO</option>
            <option>FX</option>
            <option>BG</option>
        </select>
        <div name="mensajec" class="mensaje" id="mensajec" style='display: none;'>Debe seleccionar la comercializadora</div>
        <label>Numero de celda</label>
        <input type="number" name="celda">
        <div name="mensajecd" class="mensaje" id="mensajecd" style='display: none;'>Debe digitar el numero de celda</div>
        <script type="text/javascript">
        $.ajax({
               type: "POST",
               url: "{% url 'validarcelda' %}",
               data: {'celda': $('#celda').val(), 'csrfmiddlewaretoken': '{{csrf_token}}'},
               dataType: "text",
               success: function(response) {
                      var response = $.parseJSON(response);
                      if (response.success){
                          return true;
                      }
                      else{
                          alert(response.error);
                          event.preventDefault();
                          return false                          
                      }
                },
                error: function(rs, e) {
                       alert(rs.responseText);
                }
          }); 
        </script>
        <button class="guardar" type="submit" onclick="iempaque()"> <i class="fa fa-save"></i> Guardar</button>
        <button class="cancelar" type="reset" data-dismiss="modal"> <i class="fa fa-close"></i> Cancelar</button>
    </form>
</div>

python json ajax django python-2.7

asked by Angie Lizeth Santiago Piñeros 04.10.2016 в 17:54

source

1 answer

Android: When turning the device my application fails in my fragment google maps. Why? Show and hide the options of my select with angularJS

score 1 · Accepted Answer

I see that you have a form with an action to an url, and ajax with a different url, so I guess your validation view is the last one you put the one that AJAX asks for, the first thing I see, is that you should return an answer of type json, because you are returning an html ...

return HttpResponse(json.dumps(ajax_vars), content_type='application/json')

So your javascript will work, I recommend that when the answer returns that it is not valid, avoid reloading the page ...

event.preventDefault(); # luego de response.error

In this question you did not specify what you wanted to do, you did not give much detail ... however there is already a question like this ... I want to use ajax and json so that before sending my form I validate if a field already exists in the database?

in your ajax function ...

      $.ajax({
           type: "POST",
           url: "{% url auth_validate %}",
           data: {'celda': $('#celda').val(), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
           dataType: "text",
           success: function(response) {
                  // response, es el diccionario que envias desde python
                  if (response['valido']){
                      return true; // esto quiere decir que el formulario se enviara correctamente para guardar los datos en la base de datos
                  } else{ // si no enviamos desde el servidor que la respuesta está valida, entra aca
                      alert('El campo ya existe en la base de datos');
                      event.preventDefault(); // este event, se supone es el que viene cuando haces $('form').submit(function(**event**){/*... aqui se supone va el codigo que estoy escribiendo ...*/})
                      return false;
                  }
            }
      });

in the view to which the url {% url "auth_validate" %} points (because in that url is that you are sending the ajax, that means that the view that controls that url will be in charge of telling you if the field is full or not)

def auth_validate_view(request): # pdt: no se porque le pusiste asi
     if request.method == 'POST': # tambien puedes usar, if request.is_ajax
          try:
               Empaque.objects.get(celda=request.POST['celda']) # si te fijas aqui, solo hay un campo que enviamos en el parametro data de la peticion ajax, y tiene el mismo nombre que pusimos allá
               # si lo quieres hacer con filter, solo seria hacer asi, Empaque.objects.filter(celda=request.POST['celda']).exists(), si retorna true, entonces existe, de lo cotrario no existe y puedes crearlo
               valido = False # como si existe porque no tiro ningun error, entonces NO está válido
          except Empaque.DoesNotExist:
               #si arroja un error quiere decir que no encontro nada en la base de datos, por lo cual si se puede guardar...
               valido = True
        return HttpResponse(json.dumps({'valido': valido}), content_type='application/json') # se empaqueta la respuesta en forma de json, y se envia, para que el front la reciba como JSON