0

Mi problema es que tengo una etiqueta que necesito que llame una ventana modal que muestre un pdf que tengo alojado en una bd según el id de cada etiqueta que le corresponda.

Mi etiqueta es esta

$query = mysqli_query($db, "SELECT * FROM documentos WHERE id_tipo_doc = 1");
while($ro = mysqli_fetch_array($query)){

echo "<a href='#'  onclick='modales(".$ro['id'].")' class='alado' id='ver-pdf' data-target='#modal' data-toggle='modal'><i class='fas fa-file-pdf'></i>   ".$ro['nombre']."</a>";
} 

insertaría el modal aqui

<div id="mod" class="modal fade" role="dialog"></div>

y el código para hacer la petición

<script type="text/javascript">
$( document ).ready(function() {
 // Asociar un evento al botón que muestra la ventana modal
function modales(id) {
   $.ajax({
       // la URL para la petición
       url : 'modalpdf.php',

       // la información a enviar
       data : { 'fac' : id},

       // especifica si será una petición POST o GET
       type : 'GET',

       // el tipo de información que se espera de respuesta
       dataType : 'html',

       // código a ejecutar si la petición es satisfactoria;
       success : function(respuesta) {
           $('#mod').html(respuesta);
       },

       // código a ejecutar si la petición falla;
       error : function(xhr, status) {
           alert('Disculpe, existió un problema');
       },
   });
 };
});
</script>

este es el modal

div class="modal fade" id="mod">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="mod">nuevo</h4>
        </div>
        <div class="modal-body">

            Mi modal

        </div>
        <div class="modal-footer">
            Footer modal
        </div>
    </div>
</div>
2
  • 1
    ¿data-target='#modal' no debería ser data-target='#mod'? El id de tu modal es mod
    – Kiko_L
    Commented el 30 ene. 2019 a las 19:25
  • buena observación, solo que aun no me aparece el modal!! solo tengo uno sencillo Commented el 30 ene. 2019 a las 19:39

2 respuestas 2

0

Para mandar un valor X desde una etiqueta a hacia un modal. Puedes hacerlo usando los data attributes.

Te doy un ejemplo

HTML

<a href="#" data-elemento="12345" id="boton"> </a>

Jquery

$("#boton").data("elemento"); // Esto debe retornar 12345

Espero sea de tu ayuda. Saludos

1
  • Gracias fue de ayuda me sirvió el ejemplo Commented el 31 ene. 2019 a las 19:08
0

Intenta cambiar en tu funcion modales en el apartado del success lo siguiente:

success : function(respuesta) {
     var modal = $('#mod');
     modal.find('.modal-body').html(respuesta);
     modal.modal('show');
},
4
  • Si te funciona no es necesario ni el data-target ni el data-toggle en el link que tiene el evento de mostrar el modal Commented el 30 ene. 2019 a las 21:06
  • Buenas tardes. lo intento como me dices pero me sucede lo mismo, te explico, al darle click al enlace solo oscurece la pagina como si fuese a mostrarlo pero no muestra el modal. no se si logre explicarme Commented el 30 ene. 2019 a las 21:51
  • elimina los atributos data-toggle y data-target de tu elemento <a> y en el success pon un alert antes de mostrar el modal como te mostre en mi respuesta a ver si llega a ese punto el ajax. Commented el 30 ene. 2019 a las 22:20
  • Al eliminar el data-toggle y target al dar click no hace nada. y al ponerlos me genera este error Uncaught ReferenceError: modales is not defined at HTMLAnchorElement.onclick (VM634 calidad.php:150) Commented el 30 ene. 2019 a las 22:46

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.