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?
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 %}
localStorage
osessionStorage
a nivel de javascript para recuperar la configuración aplicada antes de refrescar la página: es.stackoverflow.com/a/301455/82862$('#exampleModal').removeData();
? Pareciera que esta linea limpia el formulario despues de recibir la respuesta.