Problem to show data from mysql to modal with jsp and bootstrap

Question

Problem to show data from mysql to modal with jsp and bootstrap

Navigation

#1 by (0 votes)

0

I have a problem showing data from mysql in a modal with jsp and bootstrap to invoke the modal, I have a button of type button, which is the one that opens the modal, and in the modal, data arrive from the mysql database. The problem is that when you press the button to open the modal, the modal will display only its top bar where the modal title is, but it does not show the body of the modal, unless you change the type of button to submit, and then to button again and when you return to execute the modal it is shown, but only temporarily, and when the application is closed and it is executed again, the same problem happens again.

here the code of the button that opens the modal

<button type="button" data-toggle="modal" data-target="#modalReserva2" name="btn_ver_reserva" width=10 heigth=10><img src="imagenes/img_ver_reserva.png" alt="x"/>Ver</button>

here is the modal where the data arrives.

<div class="modal fade" id="modalReserva2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" 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 bg-primary" id="myModalLabel">Detalle Folio</h4>
                            <br>
                            <div class="container">

<%

                            try 
        {


            for(int i=0; i<reserva.size(); i++)
                    {



                                    out.println("<table");
                                    out.println("<tr>");
                                    out.println("<div class='form-row' col-md-8>");
                                    out.println("<div class='form-group col-md-4'>");
                                    out.println("<label for='inputEmail4'>Numero de Reserva:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_numero_reserva' value="+reserva.get(i).getNumeroReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-4'>");
                                    out.println("<label for='inputPassword4'>Origen:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_origen_reserva' value="+reserva.get(i).getOrigenReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-4'>");
                                    out.println("<label class='form-group col-md-4'>Destino:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_destino_reserva' value="+reserva.get(i).getDestinoReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-5'>");
                                    out.println("<label class='form-group col-md-4'>Origen Vuelo:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_origen_vuelo_reserva' value="+reserva.get(i).getOrigenVueloReserva()+"><br>");
                                    out.println("</div>");
                                    //out.println("</div>");
                                    //out.println("<div class='form-row' col-md-6>");
                                    out.println("<div class='form-group col-md-3'>");
                                    out.println("<label class='form-group col-md-5'>Piezas Totales:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_total_piezas_reserva' value="+reserva.get(i).getTotalPiezasReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-3'>");
                                    out.println("<label class='form-group col-md-5'>Kilos Totales:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_total_kilos_reserva' value="+reserva.get(i).getTotalKilosReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-3'>");
                                    out.println("<label class='form-group col-md-5'>Volumen Total:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_total_volumen_reserva' value="+reserva.get(i).getTotalVolumenReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-5'>");
                                    out.println("<label class='form-group col-md-5'>Estado:</label><br><input type='text' class='form-control' id='estado' placeholder='Origen' name='txt_estado_reserva' value="+reserva.get(i).getEstadoReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-5'>");
                                    out.println("<label class='form-group col-md-5'>Fecha Creación:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_fecha_creacion_reserva' value="+reserva.get(i).getFechaCreaciónReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-5'>");
                                    out.println("<label class='form-group col-md-5'>Fecha Embarque:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_fecha_embarque_reserva' value="+reserva.get(i).getFechaEmbarqueReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-5'>");
                                    out.println("<label class='form-group col-md-5'>Tipo Reserva:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_tipo_reserva' value="+reserva.get(i).getTipoReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-5'>");
                                    out.println("<label class='form-group col-md-5'>Prioridad:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_prioridad_reserva' value="+reserva.get(i).getPrioridadReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-4'>");
                                    out.println("<label class='form-group col-md-4'>Tipo Tarifa:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_tipo_tarifa_reserva' value="+reserva.get(i).getTipoTarifaReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-2'>");
                                    out.println("<label class='form-group col-md-2'>Tarifa:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_tarifa_reserva' value="+reserva.get(i).getTarifaReserva()+"><br>");
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-2'>");
                                    out.println("<label class='form-group col-md-2'>Tipo Moneda:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_tipo_moneda_reserva' value="+reserva.get(i).getTipoMonedaReserva()+"><br>");                                                   
                                    out.println("</div>");
                                    out.println("<div class='form-group col-md-5'>");
                                    out.println("<label class='form-group col-md-5'>Notas:</label><br><textarea type='text' class='form-control' rows='5' id='notas' placeholder='Origen' name='txt_notas_reserva' value="+reserva.get(i).getNotaReserva()+"></textarea><br>");
                                    out.println("</div>");
                                    out.println("</div>");












                    }

                for(int i=0; i<cliente.size(); i++)
                {                   

                                    out.println("<div class='form-group col-md-2'>");
                                    out.println("<label class='form-group col-md-2'>Cliente:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_codigo_cliente' value="+cliente.get(i).getCodigoCliente()+"><br>");  
                }                   out.println("</div>");

                for(int i=0; i<usuario.size(); i++)
                {                   
                                    out.println("<div class='form-group col-md-2'>");
                                    out.println("<label class='form-group col-md-2'>Usuario:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_id_usuario' value="+usuario.get(i).getIdUsuario()+"><br>");  
                                    out.println("</div>");
                }       
                for(int i=0; i<folio.size(); i++)
                {
                                    out.println("<div class='form-group col-md-2'>");
                                    out.println("<label class='form-group col-md-2'>Folio:</label><br><input type='text' class='form-control' id='inputPassword' placeholder='Origen' name='txt_id_folio' value="+folio.get(i).getIdFolio()+"><br>");  
                                    out.println("</div>");
                                    out.println("</div>");
                                    out.println("</tr>");
                                    out.println("</table>");
                }

}
catch (Exception e) {

                                    out.close();

                }

              %>

 </table>                                            

</form>                

                            </div>

              </div>
            </div>

    </div>
       </div>

html5 bootstrap jsp

asked by Simón Pereira Vigouroux 17.03.2018 в 20:30

source

1 answer

Because clicking on a polygon always performs the same action - Google maps API android app Why is not the binary file modified?

score 0 · Answer 1

I do it with javascript, in the button part you have to add the data for example:

I define the modal div

 <div id="massModal" class="modal fade" role="dialog">

    <input type='text' 
class='form-control' 
id='descripcion_mass' 
maxlength='255'  required='required' autofocus>

in the button part would be like this button See

I declare a function that shows me a modal

    <script type='text/javascript'>
     // Show a post
            $(document).on('click', '.massshow-modal', function() {
                $('.modal-descripcion').text('Vista de los Datos');

                  //el #id_mass corresponder el id de input
                $('#id_mass').val($(this).data('id'));
    $('#descripcion_mass').val($(this).data('descripcion'));
    $('#id_tipo_mass').val($(this).data('id_tipo'));
    $('#id_estado_mass').val($(this).data('id_estado'));
    $('#created_at_mass').val($(this).data('created_at'));
    $('#updated_at_mass').val($(this).data('updated_at'));
    $('#usuarios_id_mass').val($(this).data('usuarios_id'));
    ;

                //me muestra el modal en bootstrap 
                $('#massModal').modal('show');
                $('#acciones').attr('class', 'btn btn-info hibe');
                $('#acciones').text('Visible');
                $('#acciones').attr('disabled');

            });
</script>