Cómo enviar valor a ventana modal Bootstrap

Buenas, Lo que pregunto es fácil, pero si se sabe y yo no controlo mucho. A ver si alguien me puede echar un cable, hasta que aprenda.

Necesito que cuando pinche sobre este botón

<a href="?fac=<?php echo $dato['factura']; ?>"
   data-target="#MyProducto" data-toggle="modal">
  Ver factura
</a>

Envíe a una ventana modal, el valor de fac para que busque en la base de datos y muestre todos los productos que coincidan con el número (fac) de factura. El problema es que cuando quito el "data-toggle="modal" y muestro la tabla #Myproducto, funciona sin problemas, pero cuando se activan las funciones de modal, no funciona.

El código que hace la búsqueda:

if(!empty($_GET['fac'])) {
  $fac = $_GET['fac'];
  $can = mysql_query("SELECT * FROM detalle WHERE factura LIKE '$fac%'");
 
  while($dato=mysql_fetch_array($can)) {

Según tengo entendido tendría que hacer una función con Java que recogiese fac que tenga como valor <?php echo $dato['factura']; ?> y lo envíe a la ventana modal #MyProducto para que haga la búsqueda LIKE '$fac%' y todos las facturas cuyo número sea el mismo que <?php echo $dato['factura']; ?>, y que cuando se volviese a ocultar #MyProducto se borre el valor de fac para que no de problemas. Supongo que sería eso el problema es que no se hacer esa variable ni como hacer que funciones, ¿Alguien me ayuda?

¡Gracias!

Respuestas

#1

Lo primero que me gustaría decirte es que el código PHP que has mostrado es extremadamente peligroso. El motivo es que utilizas en la consulta un valor ($fac) que te lo ha pasado directamente el usuario. Así que cualquier visitante malicioso podría enviarte un valor especial para borrarte toda la base de datos u obtener acceso a información de otros usuarios.

Como solución de emergencia, te propongo que utilices al menos la función mysql_real_escape_string() de PHP para impedir estos ataques de seguridad. El código resultante sería el siguiente:

if(!empty($_GET['fac'])) {
  $fac = $_GET['fac'];
  $can = mysql_query("SELECT * FROM detalle WHERE factura LIKE '".mysql_real_escape_string($fac)."%'");
 
  while($dato=mysql_fetch_array($can)) {

Lo segundo que me gustaría comentarte es que, según tengo entendido, dos facturas diferentes no pueden compartir el mismo número (sí que puede coincidir si se usan series diferentes). Así que en mi opinión, la consulta SQL no debería ser un LIKE porque sólo va a haber una factura con ese número.

Por último, con lo que respecta a tu duda principal, efectivamente el código que muestras no te va a servir para abrir la ventana modal con la información. En el caso de las ventanas modales, hay dos estrategias a seguir:

  • Puedes tener todo el contenido de la ventana modal cargado en la página, aunque oculto. Al pulsar el botón, la ventana se abre y se muestra el contenido que antes estaba oculto.
  • Puedes no tener ningún contenido dentro de la ventana modal y cargarlo mediante Ajax al pulsar el botón que abre la ventana modal.

El segundo caso es el que se utiliza cuando no puedes saber a priori el contenido que tendrá la ventana modal. Obviamente este es el que tienes que utilizar tú porque el contenido depende del número de la factura, así que no puedes pre-cargar todas las facturas del sistema.

La solución sería que al pulsar el botón que muestra la ventana modal, hagas una petición Ajax al servidor, que utilizará el código que has mostrado para hacer la consulta y devolvértela como respuesta Ajax. Luego ya sólo tienes que mostrar ese contenido dentro de la ventana.

Si es la primera vez que haces esto, puede que te suene como que es algo muy difícil. Por suerte, como el propio Bootstrap utiliza la librería jQuery de JavaScript, lo vas a tener muy fácil. jQuery simplifica al máximo las peticiones Ajax, por lo que no te costará mucho conseguirlo. Si lo necesitas, en este mismo sitio hemos publicado un libro sobre jQuery llamado Fundamentos de jQuery donde se explica con detalle cómo hacer las peticiones Ajax (capítulo 7).

#2

Ante todo muchas muchas gracias.

Y comentarte que te he echo caso y ya he sustituido el código que me has sugerido, pese a que solo lo voy a utilizar de forma interna para un proyecto personal, y nadie puede saber si quiera que existe. Por otra parte lo que se almacena en "detalles" son los productor que contiene la "factura", lo que hago es añadirle una numeración a los productos, que coincida con la factura y cuando los quiero buscar solo tengo que decirle que me busque todos los productos dentro de "detalle" que en la fila de "factura" coincidan con la numeración.

Por otra parte si alguien puede decirme el código exacto que poner para que funcione se lo agradecería, llevo una semana con esto atascado, y ya me estoy empollando el capítulo 7, pero agradecería a alguien me eche una mano a solventar el problema lo antes posible, por que no doy pie con bola, y como no salga del atasco no puedo avanzar.

Gracias a todos y en especial a javiereguiluz por su respuesta.

#3

Lo primero sería cambiar tu código HTML por algo así:

<a id="ver-factura" href="#" data-target="#MyProducto" data-toggle="modal">
  Ver factura
</a>

Lo segundo sería utilizar el siguiente código JavaScript para hacer la petición Ajax (revisa el código y cambia los valores que haga falta para adaptarlos a tu caso):

$( document ).ready(function() {
  // Asociar un evento al botón que muestra la ventana modal
  $('#ver-factura').click(function() {
    $.ajax({
        // la URL para la petición
        url : '/busqueda_factura.php',
 
        // la información a enviar
        data : { 'fac' : <?php echo $dato['factura']; ?> },
 
        // 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) {
            $('#MyProducto').html(respuesta);
        },
 
        // código a ejecutar si la petición falla;
        error : function(xhr, status) {
            alert('Disculpe, existió un problema');
        },
    });
  });
});

Este código utiliza jQuery, por lo que debes asegurarte primero que esa librería JavaScript está cargada en la página. Utiliza las herramientas de depuración de Firefox o Chrome para ver si se produce algún error de JavaScript.

#4

Hermano le tengo la solución. Yo llegué a este problema cuando empecé a tratar de hacer una red social como facebook. Logré hacer el sistema de amigos en común y luego cuando intenté pasar el id de un usuario a la ventana modal no pude. Pero con mi malicia y pericia lo he logrado. En Internet no hay un tutorial no hay info clara para hacerlo.

Le comparto entonces el post que hice que muestra la solución de cómo pasar una variable PHP a una ventana modal.

http://www.taringa.net/post/info/18709825/Ventanas-modales-con-variables-PHP.html

#5

Aquí dejo la solución:

print '<td class="ancho borde"> <center><a class="boton" href="#" data-toggle="modal" data-target="#myModalmostrar" onclick="mostrar(' . $v['id_cronograma_pago'] . ')"> &nbsp;&nbsp;+ pagar&nbsp;&nbsp;</a></center></td>';
<div class="modal" id="myModalmostrar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="col-sm-16">
                    <div class="widget-box">
                        <div class="widget-header">
                            <h4 class="widget-title">APERTURAR CAJA</h4>
                            <div class="widget-toolbar">
                                <a href="#" data-action="reload">
                                    <i class="ace-icon fa fa-refresh"></i>
                                </a>
                                <a href="#" data-action="collapse">
                                    <i class="ace-icon fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="widget-body">
                            <div class="modal-body datagrid table-responsive" >
                                <center><div id="cargar_reporte" >
                                        <img src="../../../img/ps_gif/PS_BN.gif"/>
                                        Espere!!! Cargando datos...
                                    </div></center>
 
                                <div class="panel-body" id="editar_resul" >
 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
 
            </div>                            
        </div>
    </div>
</div>
<script>
    function mostrar(id) {
        $(document).ready(function () {
            $("#result").hide("slow");
            $("#cargar_reporte").show("slow");
            $("#editar_resul").load("./modulos/movimientos/compra/amortizar_cronograma_accion.php?cod=" + id, " ", function () {
                $("#editar_resul").show("slow");
                $("#cargar_reporte").hide("slow");
            });
        });
    }
</script>