TransWikia.com

modal no responde al submit

Stack Overflow en español Asked on December 2, 2021

tengo el problema siempe al principio que empiezo a crear una modal al enviar los datos , la anterior ocasion cambie jquery y funciono, pero ahora copio y pego el codigo de una modal que si funciona llamandola con jquery.

hice la modal con el menor codigo posible para que sea mas facil de leer

el problema es que cuando le presiono al botton de agregar no funciona submit ni los console.log imprime

  <div class="modal-dialog modal-sm" role="document">
  <div class="modal-content">
    <form id="formularioAgregar" role="form">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true" >&times;</button>
      <h4 class="modal-title" id="myModalLabel"><b>Agregar un celular</b></h4>
    </div>
    <div class="modal-body">
      <div class="row">
        <div class="form-group col-md-3">
          <label class="control-label">Nombre de perfil</label>
          <input type="text" name="Datos[nombrePerfil]" id="nombrePerfil" required>
        </div>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
      <button type="submit" name="enviar" id="agregar" class="btn btn-success">Agregar</button>
    </div>
    </form>
  </div>
</div>




js


var contar = [], dias = [], diasSemana = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
$(function () {
    variable = $("#div_alert");
 // alert(variable);
    $("#tblPerfiles").DataTable();
    $(".loader").fadeOut("slow"); 
    if (typeof variable !== 'undefined' && variable !== null) {
        // setTimeout(function(){cerrar("div_alert");}, 3000);
    }

});

$( "#formularioAgregar" ).on( "submit", function( event ) {
    console.log('asasasa');
  event.preventDefault();
  console.log( $( this ).serialize() );
});

function agregar(){
    dias = [];
    $.ajax({
        url:   'index.php?accion=alta',
            type:  'post',
        success:  function (data) {
            $("#modalPerfil").html(data);
            $(".timepicker").timepicker({ showInputs: false, showMeridian: false});
            $('.selectpicker').selectpicker({style: 'btn-success btn-sm',size: 4,noneSelectedText: 'Seleccionar un elemento', liveSearchPlaceholder:'Buscar',noneResultsText: '¡No existe el elemento buscado!',countSelectedText:'{0} elementos seleccionados',actionsBox:true,selectAllText: 'Seleccionar todos',deselectAllText: 'Deseleccionar todos'});
            $('#formAgregar').validator({focus:false});
        },
    });
    $("#modalPerfil").modal("show");
}

function agregarFila(){
    if ($('#diasTrabajados option:selected')=="") {
        $('#entrada').hide();
        $('#salida').hide();
        $("#diasTrabajados").hide();        
    }else{
        $('#entrada').show();
        $('#salida').show();
        $("#telefonoExtension").attr("required","required");
    }
    diasTmp = [], opciones = "";
    $('#diasTrabajados option:selected').each(function(i, obj) {
        //concatena dias y this
        dias.push($(this).val());
    });
    //elimina nodos duplicados

    $.grep(diasSemana, function(el) {
        if ($.inArray(el, dias) == -1) diasTmp.push(el);
    });

    for(var i = 0; i < diasTmp.length; i++){
        opciones += "<option>" + diasTmp[i] + "</option> ";  
    }
    cajita = '<div class="form-group col-md-3"><div class="form-group"><label>Horarios</label><input type="text" name="horarioEntrada" class="form-control " value="'+$('#entrada').val()+'" readonly></div></div>'; 
    cajita += '<div class="form-group col-md-3"><div class="form-group"><label></label><input type="text" name="horarioSalida" class="form-control" value="'+$('#entrada').val()+'" readonly></div></div>';
    cajita += '<div class="form-group col-md-5"><label class="control-label">Dias trabajados</label><input type="hidden" name="diasTrabajados2" required>'+$('#diasTrabajados').val()+'</div>';
    cajita += '<div class="form-group col-md-1"><a><i class="fa fa-minus eliminarFila" style="cursor:pointer" agregarFila()  onclick="eliminarHorario(this,''+$('#diasTrabajados').val()+'');" ></i></a></div>';
    cuadro = '<div class="form-group col-md-11 horarios">'+cajita+'</div>';
    $("#prueba").append(cuadro);
    $('.selectpicker').selectpicker({style: 'btn-success btn-sm',size: 4,noneSelectedText: 'Seleccionar un elemento', liveSearchPlaceholder:'Buscar',noneResultsText: '¡No existe el elemento buscado!',countSelectedText:'{0} elementos seleccionados',actionsBox:true,selectAllText: 'Seleccionar todos',deselectAllText: 'Deseleccionar todos'});        
    $(".timepicker").timepicker({ showInputs: false });
    // console.log(dias);
    $("#diasTrabajados").html(opciones);
    $("#diasTrabajados").selectpicker("refresh");
}

function eliminarHorario(elemento, diasTmp){
    opciones = "";
    $(".loader").fadeIn("fast", function(){
        diasTmp = diasTmp.split(",");
        for(var i = 0; i < diasTmp.length; i++){
            index = dias.indexOf(diasTmp[i]);
            console.log(index);
            if (index > -1) {
                dias.splice(index, 1);
            }
            opciones += "<option>" + diasTmp[i] + "</option>";  
        }
        $("#diasTrabajados").append(opciones);
        $("#diasTrabajados").selectpicker("refresh");
        $(elemento).closest('div.horarios').remove();  
        $(".loader").fadeOut("fast");
    });
}

function modificar(id){
    $.ajax({
        url:   'index.php?accion=modificar&id='+id,
            type:  'post',
        success:  function (data) {
            $("#modalSalario").html(data);
            $('.selectpicker').selectpicker({style: 'btn-success btn-sm',size: 4,noneSelectedText: 'Seleccionar un elemento', liveSearchPlaceholder:'Buscar',noneResultsText: '¡No existe el elemento buscado!',countSelectedText:'{0} elementos seleccionados',actionsBox:true,selectAllText: 'Seleccionar todos',deselectAllText: 'Deseleccionar todos'});
            $('#formEditar').validator({focus:false});
        },
    });
    $("#modalSalario").modal("show");
}

function eliminar(id){
    $("#modalEliminar").unbind().modal({ backdrop: "static", keyboard: false }).one("click", "#eliminar", function (e) {
        $(".loader").fadeIn("slow", function(){
            $.ajax({
                data:{id: id},
                url:   'index.php?accion=eliminar',
                type:  'post',
                success:  function (data) {
                    if(data == "OK")
                        window.location.replace("index.php?accion=index&clase=success");
                    else{
                        alert(data);
                    }
                },

            });
        });
    }); 
}

One Answer

ya tengo la respuesta :D

    $(document).on("submit", "#formularioAgregar", function (e) {
    event.preventDefault();
    console.log("asdasdasdasds");
});

como es una modal que no existe al cargar el documento se tiene que usar (document).on para estos tipos de casos.

(cuando exista submit con el id formularioAgregar has esto ....)

las otra funcion en el codigo no es que este mal solo que no aplica por que ya se leyo el documento y mi modal se llena cuando se le manda se solicita se llena por medio de una pagina alta.php me trae la moda de alta.

Answered by Carlos Enrique Gil Gil on December 2, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP