3

Tengo un formualrio con muchos campos, y tengo algunos select con 1 botón que despliega un modal a la hora de agregar un nuevo registro al select; sin embargo si el usuario previamente ya habia rellenado otros campos y en este ejemplo en el campo agente no aparece la opción a seleccionar, tiene que ingresar un nuevo registro por consiguiente a la hora de guardar el registro este se guarda correctamente sin embargo se vuelve a recargar la página y se pierden los campos que ya se encontraban rellenados o seleccionados segun el tipo de campo por ejemplo (Fecha, Turno, Plantilla, Antigüedad en el puesto, Antecedentes,Agente).

¿Cómo puedo conservar esos datos sin volver a recargar nuevamente la página?

introducir la descripción de la imagen aquí

Esta es la función con ajax que utiliza el modal para agregar un nuevo registro, a la hora de presionar el botón +

//leemos id boton con +, para saber su nombre, ejemplo btn-mas15
for (let i = 1; i <16; i++) {
    $("#btn-mas" + i).click(function (e) {
        let btn = e.target.name;

        botonModalGuardar(btn);
    });

}

const botonModalGuardar = nombreBoton => {

    $("#boton-guardar").click(function () {

        $("#exampleModal").modal({
            backdrop: 'static', keyboard: false
        });

        const nuevoregistro = $('#nuevo-registroSelect').val();

        //Si la longuitud del campo es mayor a 70 
        if (nuevoregistro.length > 70) {
            swal({
                title: "Alerta",
                text: "Máximo 70 caracteres para el nuevo registro;" + " tu descripción tiene " + nuevoregistro.length + " caracteres.",
                showCancelButton: false,
                confirmButtonColor: '#7C4F4F',
                cancelButtonColor: '#7C4F4F',
                confirmButtonText: "NO",
                cancelButtonText: "NO"

            });
            return;
        }

        //Si la longuitud del campo es igual a 0
        else if (nuevoregistro.length === 0) {
            swal({
                title: "Alerta",
                text: "El campo descripción es obligatorio",
                icon: "warning",
                showCancelButton: false,
                confirmButtonColor: '#7C4F4F',
                cancelButtonColor: '#7C4F4F',
                confirmButtonText: "NO",
                cancelButtonText: "NO"

            });

        }
        //Si se cubrierón las validaciones anteriores se procede a enviar el registro a una URL con los parametros "nuevoregistro" más un identificador de botón el cual va en la
        //variable "nombreBoton"
        else {
            $.ajax({
                async: true,
                url: '/crear_registro_select/' + nuevoregistro + "/" + nombreBoton + "/",
                type: 'GET',
                data: 'json',
                success: function (bandera) {

                    swal({
                        title: "Solicitud exitosa!",
                        text: "...",
                        icon: "success",
                        button: "OK!"
                    });
                    $('#nuevoregistro').val("");
                    $('#exampleModal').modal('hide');


                    $('#exampleModal').removeData();


                },
                error: function (e) {
                    swal({
                        title: "Error",
                        text: "Error inesperado o el registro que intentas agregar ya existe!",
                        icon: "error",
                        button: "OK"
                    });

                }

            });
        }

    });

};

función que guarda el nuevo registro

def crear_registro_select_view(request,nuevoregistro,nombreBoton):
    MessageValidation    =''
    MessageOK=''
    title=''
    
    user=User.objects.get(username=request.user)
    
    
    if request.method=='GET':
        agenteHerr=Lista_Agente()
            
        

        if(nombreBoton=="agenteHerramienta"):
            agenteHerr.nombre=nuevoregistro
            agenteHerr.save()
        
        MessageOK='El registro se creo con éxito'

    else:
        ctx={"MessageValidation":MessageValidation,'MessageErrors':form.errors}
        return render(request,'app/agregar-incidente.html',ctx)
        

    
    json_data={'1':1}
    return HttpResponse(json_data, content_type="application/json")

Template

{% extends "app/layout.html" %}

{% block title %} Avatars {% endblock title %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}
     <center><h2>{{ title }}</h2></center>
    

<div class="page-inner">
    
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                        
                        <form class="form-horizontal" method="post" id="registro-incidente-form" enctype="multipart/form-data">
                            {% csrf_token %}


                            <div class="row">
                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Tipo de evento:</label>
                                    <div class="col-md-6">
                                        {{form.tipo}}
                                        <div class="text-danger">{{form.tipo.errors}}</div>
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Fecha:</label>
                                    <div class="col-md-4">
                                        {{form.fecha}}
                                        <div class="text-danger">{{form.fecha.errors}}</div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Hora:</label>
                                    <div class="col-md-4">
                                        {{form.hora}}
                                        <div class="text-danger">{{form.hora.errors}}</div>
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Turno:</label>
                                    <div class="col-md-4">
                                        {{form.turno}}
                                        <div class="text-danger">{{form.turno.errors}}</div>
                                    </div>
                                </div>


                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Día:</label>
                                    <div class="col-md-4">
                                        {{form.dia}}
                                        <div class="text-danger">{{form.dia.errors}}</div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Plantilla:</label>
                                    <div class="col-md-4">
                                        {{form.tripulacion}}
                                        <div class="text-danger">{{form.tripulacion.errors}}</div>
                                    </div>

                                </div>


                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Empleado:</label>
                                    <div class="col-md-4">

                                        <div class="input-group">
                                            {{form.empleado}}
                                        </div>
                                        <div class="text-danger">{{form.empleado.errors}}</div>
                                    </div>
                                </div>

                                

                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Antigüedad en el puesto:</label>
                                    <div class="col-md-4">
                                        {{form.antiguedad}}
                                        <div class="text-danger">{{form.antiguedad.errors}}</div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Capacitación Puesto:</label>
                                    <div class="col-md-4">
                                        {{form.capacitacion_puesto}}
                                        <div class="text-danger">{{form.capacitacion_puesto.errors}}</div>
                                    </div>
                                </div>

                                

                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Antecedentes:</label>
                                    <div class="col-md-4">
                                        {{form.antecedentes}}
                                        <div class="text-danger">{{form.antecedentes.errors}}</div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Area del incidente/accidente:</label>
                                    <div class="col-md-5">
                                        {{form.area_incidente}}
                                        <div class="text-danger">{{form.area_incidente.errors}}</div>
                                    </div>
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Agente:</label>
                                    <div class="col-md-4">
                                        {{form.agente}}
                                        <div class="text-danger">{{form.agente.errors}}</div>
                                    </div>
                                    <button  class="btn btn-primary" id="btn-mas13" name="agenteHerramienta" data-toggle="modal" data-target="#exampleModal" >
                                        +
                                    </button>
                                </div>
                                
                                
                                <div class="form-group col-md-8">
                                    <label class="col-md-3 control-label">Area del cuerpo afectada:</label>
                                    <div class="col-md-4">
                                        {{form.area_cuerpo_afectada}}
                                        <div class="text-danger">{{form.area_cuerpo_afectada.errors}}
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                    <button  class="btn btn-primary col-md-2" id="btn-mas15" name="area_cuerpo_afectada" data-toggle="modal" data-target="#exampleModal" >
                                    +
                                    </button>
                                    </div>    
                                    
                                </div>
                                <div class="form-group col-md-6">
                                    <label class="col-md-4 control-label">Descripción evento:</label>
                                    <div class="col-md-6">
                                        {{form.descripcion_evento}}
                                        <div class="text-danger">{{form.descripcion_evento.errors}}</div>
                                    </div>
                                </div>

                                <div class="form-group col-md-6">

                                </div>
                                <div class="form-group col-md-6">
                                    <label class="col-md-2 control-label"></label>
                                    <div class="col-md-4">
                                        <button type="submit" id="registrar-button" class="btn btn-primary">Guardar</button>

                                    </div>
                                </div>

                            </div>

                        </form>

                   
                </div>
            </div>
        </div>

    </div>

     <div class="modal fade bd-example-modal-sm" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-sm" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title" id="exampleModalLabel"><strong>Agregar nuevo registro</strong></h5>
                </div>
                <div class="modal-body">
                  <form  method="post" name="form-modal-01" >
                      
                      <label>Descripción:</label>
                       <input type="text" class="form-control" id="nuevo-registroSelect" placeholder="Descripción">
                  </form>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-danger" id='close-modal' data-dismiss="modal">Cerrar</button>
                  <button type="button" id="boton-guardar" class="btn btn-primary">Guardar</button>
                </div>
             </div>
         </div>
     </div>
    

</div>

{% endblock content %}

{% block javascripts %}

{% endblock javascripts %}
5
  • 1
    Puedes incluir el HTML/template asociado a este formulario?
    – F.Igor
    el 29 oct. 2020 a las 16:15
  • @F.Igor agregado, graicas.
    – Noel L
    el 29 oct. 2020 a las 20:58
  • 2
    Puedes utilizar localStorage o sessionStorage a nivel de javascript para recuperar la configuración aplicada antes de refrescar la página: es.stackoverflow.com/a/301455/82862
    – tecnobillo
    el 30 oct. 2020 a las 12:59
  • 1
    Intentaste quitando $('#exampleModal').removeData(); ? Pareciera que esta linea limpia el formulario despues de recibir la respuesta.
    – F.Igor
    el 30 oct. 2020 a las 23:23
  • tienes razón $('#exampleModal').removeData(); hace que se limpie el formulario, sin embargo si quiero seleccionar el registro recien agregado tengo que recargar la página para que se muestre en el select, por lo tanto el formualrio se resetea, voy a probar localStorage
    – Noel L
    el 6 nov. 2020 a las 3:37

1 respuesta 1

2
+25

La respuesta es simple. Lo que tenés que agregar es simplemente el objeto event con su método .preventDefault(). Ya que este lo que permitirá es que se bloquee el comportamiento usual de un formulario de HTML el cual es recargar la página.

Tu código sería algo así:

$("#btn-mas" + i).click(function (e) {
        let btn = e.target.name;
    
        botonModalGuardar(btn, e); 
        // aquí lo único que hacemos es pasar como argumento el objeto event
    });
... //corto código para que sea mas fácil leer la respuesta.
...
const botonModalGuardar = (nombreBoton, event) => {
   event.preventDefault();

//Aquí continua tu código
}

Si no te funciona, házmelo saber y no tendré problemas en encontrar una solución con vos ;).

Mucha suerte.

1
  • con prevent default se mantienen los datos previamente rellenados, sin embargo si ahora quiero seleccionar el nuevo registro que acabo de agregar con el botón + este no aparece en el select, es necesario volver a recargar la página para que me muestre el registro, por lo tanto se recarga la página y se vuelven a perder los datos
    – Noel L
    el 6 nov. 2020 a las 3:33

Tu Respuesta

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

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