0

Buenos días. Estoy usando bootstrap en una web y tengo el siguiente problema. En una pagina que cuando se carga, accede a base de datos a través de php y recupera de una base de datos la información y crea un listado, he añadido al lado del titulo del registro el siguiente botón: ">">.

El resultado después de que se procese el php queda así: .

Este botón lo que hace es abrir una ventana modal (usando bootstrap) con toda la información del registro. Esto funciona perfectamente ya que lo controla el bootstrap.js

El problema viene cuando el listado lo genero a través de una llamada ajax a un php y que genera el listado y se muestra en la página original con una sentencia $("#listadoConvenios").html( result ); donde #listadoConvenios es el id de un elemento del DOM y result es una variable javascript que tiene el resultado de la llamada a la funcion ajax. En la variable result también se incluye el código del botón y queda igual: .

Lo que pasa es que cuando hago click en el botón, no hace nada. Se que después de realizar la llamada ajax, tengo que activar los eventos click de los objetos. Esto es lo que creo que falla. Activar los elementos click de cualquier elemento es fácil, pero no sé como "activar" el evento click con el bootstrap.

$("#form_busqueda").submit(enviarFormBusqueda);

y la función enviarFormBusqueda, despues de realizar la llamada ajax, ejectua otra función llamada fillListConvenios que es la que con los datos de la llamada ajax, monta el listado de los registros

function enviarFormBusqueda(){
  event.preventDefault();
  $("#loader").show(400);
  $.ajax({
    url: dominio_convenios+"getAllsConvenios.php",
    type: "POST",
    data: new FormData(this),
    contentType: false,
    cache: false,
    processData:false,
    dataType: 'json',
    success: function(data)
    {
      $("#loader").hide(400);
      fillListConvenios(data);
    },
    error: function() {
      $("#loader").hide(400);
      toastr.error(false, 'Se ha producido un error inesperado. Si el error persiste, póngase en contacto con el administrador', 'Error');
    }
  })
}


function fillListConvenios(data) {
    var result = "<table class='table table-striped table-hover'><thead><tr><th>#</th><th class='nowrap'>Fecha Firma</th><th>Num</th><th>Título</th><th>Vencimiento</th><th>&nbsp;</th></tr></thead>";
    $.each(data, function(i,item){
        result += "<tr><th scope='row'>"+ data[i].id +"</th><td>" + data[i].titulo +"</td>";
        result += "<td><button type='button' data-toggle='modal' data-target='#myModal"+ data[i].id +"'><i class='fa fa-search' aria-hidden='true' data-id="+ data[i].id +"></i></button></td></tr>";
    });

    $("#listadoConvenios").html( result );
}

El código de la ventana modal es:

<div class="modal fade" id="myModal166" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4><span class="glyphicon glyphicon-book"></span> 001-2017 :: Titulo de Convenio *</h4>
         </div>
         <div class="modal-body">
            <div class="row">
               <div class="col-sm-7">
                   <div class="form-group">
                       <label class="control-label">Objeto del convenio</label>
                        lorem ipsum lorem ipsum lorem ipsum lorem ipsum
                   </div>
                </div>
            </div><!-- /.row (nested) -->  
            <div class="row">
              <div class="col-sm-12">
                 <div class="form-group">
                    <label class="control-label">Observaciones</label>
                            lorem ipsum lorem ipsum lorem ipsum lorem ipsum
                 </div>
               </div>
            </div><!-- /.row (nested) -->  
            <div class="row">
               <div class="col-sm-12">
                 <div class="form-group">
                    <label class="control-label">Documento</label>
                    <a href="files/001-2017.pdf" target="_blank"><span class="glyphicon glyphicon-file"></span> Ver Documento</a>
                 </div>
               </div>
            </div><!-- /.row (nested) -->
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-default btn-default pull-right" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cerrar</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Fin Ventana Modal -->
4
  • Hola @user3079808, estaría bien que pusieras algo de código y lo que has intentado, para que nos sea mas fácil ponernos en situación y podamos ayudarte mas rápidamente.
    – Hictus
    el 14 sep. 2017 a las 10:08
  • seria bueno que pusieras el codigo html del modal, puede ser alli el detalle.
    – Alvarez
    el 14 sep. 2017 a las 12:29
  • He añadido el código de la ventana modal en la pregunta. Gracias por tu tiempo Luis Fernando
    – oscarpg41
    el 14 sep. 2017 a las 13:43
  • Personalmente creo que debes de introducir mal el id o algo cuando añades tus elementos al DOM. ¿Existe ya un modal con ese id cuando llamas a fillListConvenios? En ésta te falta cerrar el table pero dudo que sea por eso. Echa un vistazo a la consola cuando pulsas los nuevos botones y no te funciona a ver si da algún error. Por otro lado procura examinar el elemento de ese botón y busca con cmd/ctrl + f si existe un modal con ese nombre. el 15 sep. 2017 a las 9:24

2 respuestas 2

0

Cuando hagas click en el boton generado, llama a la apertura del modal así:

$("#id_del_modal").modal("show");

Tienes mas info aquí:

https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp

1
  • Muchas gracias Juan Luis.Era eso
    – oscarpg41
    el 15 sep. 2017 a las 10:08
0

Eso te pasa es que al generar de forma dinámica elementos html, estos se ven en la pantalla, pero no existen en el dom original.

Cuando generes elementos dinamicamente, para llamar a eventos de los elementos creados usa:

$(document).on("evento","#elemento",function(){ 
//codigo
});
3
  • Gracias Juan Luis. Ya lo tenia en cuenta y siempre lo hago cuando el evento llama a una función javascript que he creado yo. . El problema que tengo es que el evento que tengo que generar es de bootstrap: el evento que hace mostrar las ventanas modales, y no sé como hacer esto.
    – oscarpg41
    el 14 sep. 2017 a las 11:49
  • Ahora no te entiendo, ¿lo que quieres es abrir el modal desde javascript?
    – Juan Luis
    el 14 sep. 2017 a las 13:49
  • El modal lo controla el javascript de bootstrap (boostrap.min.js). Cuando haces click en un elemento que tenga un atributo data-toggle='modal', lo que hace es mostrar en una ventana modal el elemento que se define en el atributo target (en mi caso sería myModal166). Lo que me ocurre es que como yo genero el html dinámicamente despues de una llamada ajax. no sé que tengo que hacer para que estos elementos generados muestren la ventana modal cuando hago click sobre ello. Y es que este código está en bootstrap.js. No sé si me hago entender.
    – oscarpg41
    el 14 sep. 2017 a las 16:26

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.