1

He creado un formulario con varios tab dentro del mismo, que se muestran en un modal que se activa al dar clic en un botón dentro de una tabla (botón azul de la imagen) que funciona correctamente.

imagen de lo explicado

Mi problema es al aparecer otro botón con el mismo tipo de formulario, no funcionan correctamente (las pestañas no se activan y no muestran nada) los tab. Incluso con otro formulario que usa tab tampoco sirve, pero sí sirve si es sólo uno.

Aquí adjunto una parte del código que abarca un formulario, los demás siguen los mismos estilos.

<div class="modal fade" id="new<?php echo $url; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <form name="form2" method="post" action="formulariogeneral.php">
        <?php
            $pame22=mysql_query("SELECT mascotas from citas_medicas where id= $url ");
                while($row=mysql_fetch_array($pame22)){
                    $mascotas2=$row['mascotas']; }
        ?>

        <input type="hidden" name="id_mamas" value="<?php echo $mascotas2; ?>">
        <!--id paciente-->
        <input type="hidden" name="id_general" value="<?php echo $id_general; ?>">
        <!--id doctor-->
        <input type="hidden" name="id_medico" value="<?php echo $id_medico ?>">
        <!--id consultorio-->
        <input type="hidden" name="id_consultorio" value="<?php echo $id_consultorio ?>">
        <!--fecha actual-->
        <input type="hidden" name="fecha" value="<?php echo $fecha ?>">
        <!--hora actual-->
        <input type="hidden" name="hora" value="<?php echo $hora ?>">
        <input type="" name="idcitas" value="<?php echo $url ?>">

        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

                    <h4 align="center" class="modal-title" id="myModalLabel">CONSULTA GENERAL</h4>
                </div>
                <div class="panel-body">
                    <ul class="nav nav-tabs nav-justified">


                        <li class="" ><a href="#serviciosde" data-toggle="tab"><i class="glyphicon glyphicon-book" ></i> CONSULTA GENERAL</a></li>
                        <li class="" ><a href="#farmaciasser" data-toggle="tab"><i class="glyphicon glyphicon-book" ></i> RECETA/FARMACOS</a></li>
                    </ul><br>


                     <div class="tab-content">
                         <div class="tab-pane fade" id="serviciosde">   
                             <div class="col-lg-12" id="content2" ><br>
                                 <div class="col-md-6">                                         
                                     <label>Nombre:</label> <?php echo $oPaciente->consultar('nombre'); ?><br>                                                  
                                     <label>Dirección:</label> <?php echo $oPaciente->consultar('direccion'); ?><br>                                                                    

                                  </div>
                                  <div class="col-md-6">
                                      <label>Edad:</label> <?php echo CalculaEdad($oPaciente->consultar('edad')); ?> Años<br>
                                      <label>Mascota:</label> <?php  ?> <br>    
                                  </div>    
                                  <span class="input-group-addon">CONSULTA GENERAL:</span>

                                   <div class="col-md-6"><br>
                                       <span class="input-group-addon">SINTOMAS QUE PRESENTA:</span>
                                       <textarea class="form-control" name="sintomas" id="sintomas" rows="4" autocomplete="off" required></textarea><br>

                                        <span class="input-group-addon">TEMPERATURA:</span>
                                        <textarea class="form-control" name="temperatura" id="temperatura" rows="1" autocomplete="off" required></textarea><br> 
                                        <span class="input-group-addon">ENFERMEDADES DIAGNOSTICADAS:</span>
                                        <textarea class="form-control" name="examenes" rows="4" autocomplete="off" required></textarea><br> 
                                    </div>  


                                    <div class="col-md-6"><br>
                                        <span class="input-group-addon">EXAMEN FÍSICO:</span>
                                        <textarea class="form-control" name="examen" id="examen" rows="4"  autocomplete="off" required></textarea><br>  
                                        <span class="input-group-addon">PESO:</span>
                                        <textarea class="form-control" name="peso" id="peso" rows="1" autocomplete="off" required></textarea><br>   


                                         <span class="input-group-addon">ULTIMA VISITA:</span>
                                         <textarea class="form-control" name="ultvisita" id="ultvisita" rows="4" autocomplete="off" required></textarea><br>                        
                                     </div>                                                                  
                                 </div>
                             </div>

                             <div class="tab-pane fade" id="farmaciasser">
                                 <div class="col-md-6">                                         
                                     <input class="form-control" name="med1" placeholder="Medicamento 1" autocomplete="off" >
                                     <textarea class="form-control" name="indi1" placeholder="Indicación" rows="2" ></textarea><br>
                                      <input class="form-control" name="med2" placeholder="Medicamento 2" autocomplete="off">
                                      <textarea class="form-control" name="indi2" placeholder="Indicación" rows="2" ></textarea><br>
                                      <input class="form-control" name="med3" placeholder="Medicamento 3" autocomplete="off">
                                      <textarea class="form-control" name="indi3" placeholder="Indicación" rows="2" ></textarea><br>
                                      <input class="form-control" name="med4" placeholder="Medicamento 4" autocomplete="off">
                                      <textarea class="form-control" name="indi4" placeholder="Indicación" rows="2"></textarea><br>
                                      <input class="form-control" name="med5" placeholder="Medicamento 5" autocomplete="off">
                                      <textarea class="form-control" name="indi5" placeholder="Indicación" rows="2"></textarea><br>
                                    </div>
                                    <div class="col-md-6">                                                                              
                                        <input class="form-control" name="med6" placeholder="Medicamento 6" autocomplete="off">
                                        <textarea class="form-control" name="indi6" placeholder="Indicación" rows="2"></textarea><br>
                                        <input class="form-control" name="med7" placeholder="Medicamento 7" autocomplete="off">
                                        <textarea class="form-control" name="indi7" placeholder="Indicación" rows="2" ></textarea><br>
                                        <input class="form-control" name="med8" placeholder="Medicamento 8" autocomplete="off">
                                        <textarea class="form-control" name="indi8" placeholder="Indicación" rows="2"></textarea><br>
                                        <input class="form-control" name="med9" placeholder="Medicamento 9" autocomplete="off">
                                        <textarea class="form-control" name="indi9" placeholder="Indicación" rows="2"></textarea><br>
                                        <input class="form-control" name="med10" placeholder="Medicamento 10" autocomplete="off">
                                        <textarea class="form-control" name="indi10" placeholder="Indicación" rows="2"></textarea><br>                                                                                          
                                    </div> 
                                </div>
                            </div>
                        </div> 
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                            <button type="submit" class="btn btn-primary"  >Guardar</button>
                        </div>                                       
                    </div>
                </div>
            </form>
        </div>
2
  • Podrías insertarlo en code snippet en vez de pegar el codigo? (para que no sea tan espeso). De todos modos, comprueba los id de los modales (que sean dinamicos) y genera tantos modales como lineas de resultados de la base de datos (sino solo cargara el primero o el ultimo), La otra opcion es cargar los datos del php hacia el modal con ajax al hacer click. Si no me he explicado bien, responde aqui y te lo pongo en un ejemplo mas elaborado. Un saludo.
    – JoelBonetR
    el 10 oct. 2016 a las 9:34
  • si por favor explícame mejor con un ejemplo estoy empezando en programación web y se me complica un poco.
    – jota
    el 10 oct. 2016 a las 15:14

2 respuestas 2

0

Si generas un modal por cada línea le agregas una complejidad extra a la página. Lo mejor es tener sólo un único modal, fuera del ciclo que arma las filas de la tabla, al que luego se le completa el contenido dinámicamente en el momento de abrirlo.

Algo así:

1) Por un lado, en la tabla del listado, en cada botón incluimos el valor a partir del cual se puedan consultar los datos (supongo que es id_general):

<!-- en data-id ponemos el id del registro -->
<button class="btn-editar" data-id="<?php print $row['id_general']?>">...</button>

2) Luego, una función javascript para manejar el evento click en el botón:

<script>
$(document).ready(function()
{
  $('.btn-editar').on('click', function()
  {
    // Vía ajax, traemos todos los datos que deben mostrarse en el modal:
    $.post(
      'ajax_obtener_datos.php',   // archivo que realizará la consulta en la base de datos
      {
        id: $(this).data('id')    // tomamos el id que aparece en el botón
      }, 
      function(response)          // código a ejecutar cuando se reciba la respuesta del servidor
      {
          // Cargamos en el modal los datos recibidos (pongo sólo algunos a modo de ejemplo):
          $('#examen').val(response.examen);
          $('#peso').val(response.peso);

          // Finalmente, cuando está todo cargado...
          abrir_modal();          // ;)
      },
      'json'                      // los datos los traeremos en formato json
    );
  });
});
</script>

3) Y el archivo ajax_obtener_datos.php, básicamente debería ejecutar una consulta SQL a partir de $_POST['id'], obtener un array de datos y luego, como última línea del script, enviarlo como respuesta al navegador:

// $row se obtiene como resultado de la consulta y se envía en formato json:
print json_encode($row);
0

En tu ejemplo solo estás creando un modal, deberías hacer un bucle generando tantos modales como resultados en la consulta SQL obtengas y asegurarte de que cada uno tiene su ID único.

También comentarte que en tu consulta SQL estás utilizando una extensión potencialmente peligrosa ya que la extensión mysql (mysql_query) es vulnerable a inyección SQL. Te recomiendo que eches un vistazo a la extensión mysqli :

http://php.net/manual/es/book.mysqli.php

Y también a las sentencias preparadas:

http://www.jveweb.net/archivo/2011/07/sentencias-preparadas-de-mysql-en-php-ejemplos-estructurados.html

1
  • gracias por tu respuesta, me podrías ayudar con un ejemplo de un bucle para lo que seria los modal ? me ayudarías mucho.
    – jota
    el 10 oct. 2016 a las 14:48

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.