Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

3votos

Datos inválidos a través de un modal

preguntó
Web
1045 Vistas
1 Respuestas
solucionada

Buenas. He estado intentando hacer, con ayuda de los recursos que brinda Bootstrap (más específicamente el código de su modal), una confirmación al usuario intentar comprar ciertos items en mi web, los mismos son sacados de una base de datos MySQL.
Se me presentó un inconveniente, el cual es, al hacer click en el botón principal de la compra se abre bien el modal, pero éste muestra la información de compra del primer item de la lista, es decir, por más que haga click en "Comprar" en un item que se encuentre más abajo (segundo, tercero, cuarto, etc.) mostrará el precio y demás datos del primero como si estuviera clickeando siempre en él.
No sólo es esto, si no que además, al hacer click en "BotonComprarDefinitivo" se me otorga (también, sin importar qué item clickee) el item ID 0, precio null y demás datos null.

Espero haber sido claro, en caso de que no, háganmelo saber para intentar explicar mejor lo que me está sucediendo. Gracias.

por Leyes (3.650 puntos) en Web
editado por

1 Respuesta

3votos

white Puntos75880

Estas generando varios modales, recuerda que un identificador es único en un documento, es decir no puede funcionar adecuadamente si existe dos elementos con id elemento por ejemplo.

<div id="elemento"></div> <!-- este sería el elemento tomado únicamente -->
<div id="elemento"></div> <!-- ignorado al buscarlo en el arbol de elementos -->
<div id="elemento"></div> <!-- ignorado al buscarlo en el arbol de elementos -->

mi sugerencia es que uses una plantilla para tu ventana modal y definas su contenido dinamicamente.

define una plantilla:

<script type="text/bootstrap-tpl" id="modal-template">
    <div class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" 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">×</span></button>
                    <h4 class="modal-title" data-producto-nombre></h4>
                </div>
                <div class="modal-body">
                    <form method="post">
                        <div>nombre: <strong data-producto-nombre></strong></div>
                        <div>ID: <strong data-producto-id></strong></div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</script>

ahora define la funcion abrir_producto:

<script type="text/javascript">
    function abrir_producto (id) {
        var modal, producto;

        modal = $($('#modal-template').html());
        producto = productos[id];

        $(modal).on('show.bs.modal', function (event) {
            console.log(producto);
            $(this).find('.modal-body [data-producto-nombre]').html(producto.name);
            $(this).find('.modal-body [data-producto-id]').html(producto.ID);
        });

        $(modal)
            .css('display', 'block')
            .modal('show');

        return false;
    }
</script>

en la linea: producto = productos[id]; productos viene siendo un objeto que definiras como JSON, puede ser un arreglo con php:

$productos = array();
while($web_items= mysql_fetch_array($sql_select))
{
    $productos[$web_items['ID']] = array(
        'name' => GetItemName($web_items['ID']),
        'precio' => $web_items['Precio']
    );
}

en tu documento:

<script type="text/javascript">
     var productos = <?php echo json_encode($productos); ?>;
</script>

de esta forma tienes un objeto productos en el DOM y puedes obtenerlo por su ID.

un ejemplo:

<?php

    $productos = [
        1 => [
            'name' => 'dummy product',
            'ID' => 1
        ],
        2 => [
            'name' => 'dummy producto #2',
            'ID' => 2
        ]
    ];
?><!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    </head>
    <body>
        <div class="productos">
            <?php foreach($productos as $producto): ?>
            <div>
                <span>abrir producto</span>
                <a href="#" onclick="return abrir_producto(<?php echo $producto['ID']; ?>)">
                    #<?php echo $producto['name']; ?>
                </a>
            <?php endforeach; ?>
        </div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            var productos = <?php echo json_encode($productos); ?>;

            function abrir_producto (id) {
                var modal, producto;

                modal = $($('#modal-template').html());
                producto = productos[id];

                $(modal).on('show.bs.modal', function (event) {
                    console.log(producto);
                    $(this).find('.modal-body [data-producto-nombre]').html(producto.name);
                    $(this).find('.modal-body [data-producto-id]').html(producto.ID);
                });

                $(modal)
                    .css('display', 'block')
                    .modal('show');

                return false;
            }
        </script>
        <script type="text/bootstrap-tpl" id="modal-template">
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" 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">×</span></button>
                            <h4 class="modal-title" data-producto-nombre></h4>
                        </div>
                        <div class="modal-body">
                            <form method="post">
                                <div>nombre: <strong data-producto-nombre></strong></div>
                                <div>ID: <strong data-producto-id></strong></div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </script>
    </body>
</html>
por white (75.880 puntos)
seleccionada por

2votos

Leyes comentado

Gracias por responder @white, lamentablemente nunca usé JSON y no me hallo mucho con ese tipo de códigos, se me complicó.

Se me ocurrió hacer algo similar a través de parámetros y el contenido del modal pasarlo a una página aparte. Pero debería pasar las variables y todo a la otra web.

¿Se puede hacer algo así?

Ahora tengo un comprar-items.php y un functions.php como mencioné en la pregunta principal (el functions.php lo tengo a través de un include en comprar-items.php), el botón de compra está en functions.php, lo que pensé es que podría redireccionar a un comprar-item.php?id=X (número del item, obviamente). De poder hacerse, ¿cómo pasaría todas las variables y demás?

por Leyes (3.650 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta