es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrar contenido diferente en el modal utilizando Flask

04 Aug, 2023 Programación

Quiero crear una función usando flask. En la página hay varios botones. Cuando hago clic en un botón, el modal mostrará diferentes contenidos dependiendo de qué botón se haya hecho clic.
Actualmente escribo un botón y un modal dentro del bucle for, pero generará mucho HTML. Me pregunto si hay una mejor manera de hacerlo.

Aquí está el código:

“`
{% for temp_value in id_list %}

<!-- Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateModalLabel">Data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body"> 
                {% data_list[temp_value] %} <!-- mostrar datos -->
            </div>
            <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
               <button type="button" class="btn btn-success" id="btnConfirm" onclick="form_submit()">Confirmar</button>
            </div>
        </div>
    </div>
</div>

{% endfor %}

Gracias.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, hay una mejor manera de mostrar los modales en Flask. Una forma es generar dinámicamente los modales utilizando JavaScript/jQuery.

    Primero, asigna un id único a cada botón en el bucle for, utilizando el valor de temp_value. Por ejemplo:

    {% for temp_value in id_list %}
    <button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#updateModal-{{temp_value}}" id="btnUpdate-{{temp_value}}">
        <i class="fa fa-pencil fa-lg" aria-hidden="true"></i>
    </button>

    Luego, utiliza JavaScript/jQuery para escuchar el evento de clic en cada botón, obtener los datos correspondientes y actualizar el contenido del modal dinámicamente. Por ejemplo:

    <script>
    {% for temp_value in id_list %}
        $('#btnUpdate-{{temp_value}}').click(function(){
            $.ajax({
                url: '/get_data/{{temp_value}}',
                type: 'GET',
                success: function(data){
                    $('#updateModal-{{temp_value}} .modal-body').html(data);
                },
                error: function(xhr, status, error) {
                    // manejar el error
                }
            });
        });
    {% endfor %}
</script>

    En este ejemplo, utilizamos una solicitud AJAX para obtener los datos del botón específico clicado, llamando a la ruta de Flask “/get_data/{{temp_value}}”, donde temp_value es el id del botón. La función que maneja esta ruta debe devolver los datos que se mostrarán en el modal.

    Luego, actualizamos el contenido del modal dinámicamente utilizando jQuery al dirigirnos al modal específico con id “updateModal-{{temp_value}}”, y actualizando el contenido del cuerpo del modal con los datos obtenidos.

    Al utilizar este método, puedes evitar tener que generar un modal separado para cada botón al cargar la página, y en su lugar generarlos dinámicamente solo cuando se hace clic en cada botón. Esto puede ayudar a reducir la cantidad de HTML generado y hacer que la página cargue más rápido.

Comments are closed.