modal does not respond to submit

0

I have the problem always at the beginning that I start creating a modal when sending the data, the previous occasion changed jquery and it worked, but now I copy and paste the code of a modal that works by calling it with jquery.

I made the modal with as little code as possible to make it easier to read

The problem is that when I press the add button does not work submit or the console.log prints

  <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);
                    }
                },

            });
        });
    }); 
}
    
asked by Carlos Enrique Gil Gil 31.01.2018 в 19:43
source

2 answers

0

Well, testing your code is working, what is the error that shows you ?? What is wrong?

$( "#formularioAgregar" ).on( "submit", function( event ) {
    event.preventDefault();
    console.log( $( this ).serialize() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<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>
    
answered by 31.01.2018 в 20:10
0

I already have the answer: D

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

As it is a modal that does not exist when loading the document, you have to use (document) .on for these types of cases.

(when there is submit with the form idAdd you have this ....)

The other function in the code is not that it is only bad that does not apply because the document was already read and my modal is filled when it is sent, it is requested to be filled through a page alta.php brings me the fashion high.

    
answered by 31.01.2018 в 23:25