Buenos tardes mi pregunta es la siguiente, tengo un botón "agregar" dentro de un modal que al dar click me adiciona una fila con un <select>
y un <input>
.
Lo que quiero es que al hacer click al botón agregar no se me recargue la pagina y se cierre el modal ya que eso genera que no se vea los componentes adicionados.
Este es el json de prueba.
Este es mi json cargarTipoDepreciacion.json
{
"data": [
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "1",
"descripcion_breve": "AMORTIZACION DE SOFTWARE",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "2",
"descripcion_breve": "DA DEPREC.DE EQUIPO DE COMPUTO \r\n",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "3",
"descripcion_breve": "DEPREC.DE EQUIPO DE COMPUTO",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "4",
"descripcion_breve": "DEPREC.DE EQUIPOS DIVERSOS",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "5",
"descripcion_breve": "DEPREC.DE INFRAESTRUCTURA",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "6",
"descripcion_breve": "DEPREC.DE MUEB.Y ENSERES",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
},
{
"IdTabla": null,
"IdCatalogo": null,
"id_sub_catalogo": "7",
"descripcion_breve": "DA DEPRECIACION ASIGNADA",
"Valor1": null,
"Valor2": null,
"Valor3": null,
"Valor4": null
}
]
}
Mi html y javascript
El botón agregar llama a una función que crea una fila un <select>
y un <input>
con datos de un archivo json en ajax y cada vez que de click en el botón se creará una fila con un <select>
y un <input>
pero se recarga la pagina y no los llega a mostrar.
<section class="container">
<div class="row">
<div class="col-12 mb-2">
<button class="btn btn-primary" type="button" id="btnNuevo" data-toggle="modal"
data-target="#exampleModal">Nuevo</button>
</div>
</div>
<div class="row">
<div class="col-12 mb-2">
<div class="">
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-sc" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Registro</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-5">
<label for="inputEmail4">Proyecto a Cargar</label>
<input type="text" id="tempIdDepreciacion" hidden />
<input type="number" id="idCargar" hidden>
<input type="text" class="form-control" id="descripcionCarga" placeholder="Cargar">
</div>
<div class="form-group col-md-2">
<div class="form-check">
<input type="checkbox" class="form-check-input"
id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Transferir a</label>
</div>
</div>
<div class="form-group col-md-5" id="trans">
<label for="inputPassword4">Torre</label>
<input type="hidden" id="idTransferir">
<input type="text" class="form-control" id="descripcionTransferir"
placeholder="Transferir">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="idDescripcion">Descripcion</label>
<textarea class="form-control" id="idDescripcion" rows="3"></textarea>
<span id="referencia"></span>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="idCostoBienes">Ingresos</label>
<input type="number" class="form-control" id="idIngresos" placeholder="Ingresos">
</div>
<div class="form-group col-md-3">
<label for="idCostoBienes">Costo Bienes</label>
<input type="number" class="form-control" id="idCostoBienes" placeholder="Costo Bienes">
</div>
<div class="form-group col-md-3">
<label for="idManoObra">Mano Obra</label>
<input type="number" class="form-control" id="idManoObra" placeholder="Mano Obra">
</div>
<div class="form-group col-md-3">
<label for="idGastoGen">Gastos Generales</label>
<input type="number" class="form-control" id="idGastoGen" placeholder="Gasto Generales">
</div>
</div>
<label for="tipoDepreciacion">Depreciacion</label>
<div id="items">
</div>
<div class="form-row">
<div class="form-group">
<button id="add" class="btn btn-primary">Agregar</button>
<!--<button id="finish" class="btn btn-primary">Listo</button>-->
</div>
</div>
<!--<div id="result"></div>-->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnGuardar">Guardar</button>
<button type="button" class="btn btn-primary" id="btnActualizar">Actualizar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
var seleccionados=[];
$(document).ready(function () {
MantProyecto.init_botones();
});
var MantProyecto = function () {
return {
init_botones: function () {
$("#btnNuevo").click(function () {
MantProyecto.limpiar_controles();
$("#btnGuardar").show();
$("#btnActualizar").hide();
});
$("#add").click(function () {
if (seleccionados.length < 7) {
var valor = $('select:enabled').val();
valor != null ? seleccionados.push(valor) : null
$('.idDepreciacion').prop('disabled', true);
MantProyecto.cargaCombo();
}
if (seleccionados.length == 6)
$("#add").prop('disabled', true);
//MantProyecto.cargaCombo();
});
},
limpiar_controles: function () {
$("#idCargar").val("");
$("#descripcionCarga").val("");
$("#idTransferir").val("");
$("#descripcionTransferir").val("");
$("#idDescripcion").val("");
$("#idIngresos").val("");
$("#idCostoBienes").val("");
$("#idManoObra").val("");
$("#idGastoGen").val("");
},
cargaCombo: function () {
$.ajax({
url: 'cargarTipoDepreciacion.json',
dataType: 'json',
type: 'GET',
success: function (json) {
var items = document.getElementById("items");
//items.innerHTML += "";
var select = `
<div class="form-row dep_val" style="margin-bottom:3px;">
<select class="idDepreciacion">
`;
for (let valor of json.data) {
if (!seleccionados.includes(valor.id_sub_catalogo))
select += "<option value='" + valor.id_sub_catalogo + "' >" + valor.descripcion_breve + "</option>";
}
var html = select + `</select>
<input class="form-control col-md-2 valor" type="number" required/>
<button class="btn btn-primary delete">-</button>
</div>`;
$("#items").append(html);
}
})
}
}
}();
</script>
type="button"