0

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">&times;</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">&nbsp;&nbsp;&nbsp;
                                    <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> &nbsp;
                                        <input class="form-control col-md-2 valor" type="number" required/>  &nbsp;     
                                        <button class="btn btn-primary delete">-</button>
                                        </div>`;
                            $("#items").append(html);
                        }
                    })
                }
            }
        }();
    </script>
2
  • Lo mandas por el formulario?
    – DaxTter77
    Commented el 19 sept. 2019 a las 19:18
  • 1
    Ponle al botón agregar, type="button"
    – DaxTter77
    Commented el 19 sept. 2019 a las 19:20

1 respuesta 1

0

Debes hacer uso del preventDefault() en la función:

$("#add").click(function (e) {
  e.preventDefault();
  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();
    }
});

Espero que te sirva :)

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.