Problem with modal and tab bootstrap

Question

Problem with modal and tab bootstrap

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I have created a form with several tabs within it, which are displayed in a modal that is activated by clicking on a button within a table (blue button of the image) that works correctly.

My problem is when another button appears with the same type of form, they do not work correctly (the tabs do not activate and show nothing) the tab. Even with another form that uses a tab, it does not work either, but it does work if it's just one.

Here I attach a part of the code that covers a form, the others follow the same styles.

<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>

html php bootstrap

asked by jota 10.10.2016 в 05:06

source

2 answers

0

In your example you are only creating a modal , you should loop through generating as many manners as results in the query SQL you get and make sure each one has its unique ID strong>.

Also tell you that in your query SQL you are using a potentially dangerous extension because the mysql extension (mysql_query) is vulnerable to injection SQL . I recommend you take a look at the mysqli extension:

link

And also to the sentences prepared:

link

answered by 10.10.2016 в 11:41

Error: It looks like you called 'mount ()' without a global document being loaded a universal character name specifies a non-valid character with QT

score 0 · Accepted Answer

If you generate a modal for each line you add extra complexity to the page. The best thing is to have only a single modal, outside the cycle that arms the rows of the table, which then the content is completed dynamically at the time of opening it.

Something like this:

1) On the one hand, in the table of the list, in each button we include the value from which the data can be consulted (I suppose it is general_id):

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

2) Then, a javascript function to handle the event click on the button:

<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) And the file ajax_obtener_datos.php , basically should execute a SQL query from $_POST['id'] , get an array of data and then, as the last line of the script, send it in response to the browser:

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