1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Problema d ventana MODAL en BOOTSTRAP, con PHP

Tema en 'Diseño web' comenzado por Risziu, 11 de Junio de 2017.

  1. Risziu

    Risziu Nuevo Miembro

    Se incorporó:
    11 de Junio de 2017
    Mensajes:
    4
    Me gusta recibidos:
    2
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Diseños web
    Localización:
    Bernal, Buenos Aires, Argentina
    Página web:
    Tengo el siguiente problema: Trabajando con Bootstrap, tengo una web que muestra 12 propiedades en un thumb, cada una con un botón para ver los detalles de la misma, ese botón, abre una ventana MODAL de la propiedad, donde dentro dispongo de información detallada de la propiedad de referencia, los cuales los extraigo desde una tabla con PHP y MYSQL; dentro de la ventana, hay un HEADER, CONTENEDOR y FOOTER. El CONTENEDOR está dividido en dos, a la izquierda una TAB PANEL con 2 pestañas ( DESCRIPCION y +INFO) y a derecha un carousel donde se muestran unas imágenes miniaturas de la propiedad. Dando clic para abrir la MODAL de la 1er. propiedad, me muestra perfecto toda la información de la propiedad, tanto en el TAB CONTENEDOR y +INFO, ahora bien... cuando quiero seleccionar cualquiera de las 11 propiedades restantes, en las pestañas del TAB PANNEL, la izquierda, DESCRIPCION, funciona perfecto, y la derecha +INFO no funciona, directamente no se puede acceder.
    Para sacarme la duda, he realizado el mismo procedimiento pero con peneles del tipo ACCORDION y lamentablemente obtengo el mismo problema, me muestra los datos de la primer propiedad.

    Adjunto el bloque de codigo que abarca toda la ventana MODAL y una captura de pantalla para dar una idea mas cabal de lo que trato de hacer:


    Código (Text):
    <!-- VENTANA MODAL DE LA PROPIEDAD -->
    <div class="modal fade" tabindex="-1" role="dialog" id="<?php echo $prop['id']; ?>">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">

                <div class="modal-header">

                    <!-- Titulo de la propiedad -->
                    <div class="col-md-8">
                        <h3><?php echo $prop['nombre']; ?></h3>
                        <p><strong><?php echo ".: Propiedad para " . $prop['plazas'] . " pasajeros :."; ?></strong></p>
                    </div>
                    <!-- Fin Titulo de la propiedad -->

                    <!-- Contactos y Web -->
                    <div class="col-md-4">

                        <a href="#">
                            <span class="hint--bottom-left" data-hint="Llamar por teléfono"><img src="../images/icons/celeste/telefono.png" width="50px"></span>
                        </a>
                        <a href="#">
                            <span class="hint--bottom-left" data-hint="Enviar un Email"><img src="../images/icons/celeste/mail.png" width="50px"></span>
                        </a>
                        <a href="#">
                            <span class="hint--bottom-left" data-hint="Ingresar a la web de la propiedad"><img src="../images/icons/celeste/web.png" width="50px"></span>
                        </a>

                    </div>
                    <!-- Fin Contactos y Web -->

                </div>

                <!-- Descripción de la propiedad -->
                <div class="modal-body">
                    <div class="col-md-7">

                        <!-- TAB PANNEL -->
                        <div class="panel with-nav-tabs panel-primary">
                            <div class="panel-heading">
                                <ul class="nav nav-tabs" id="myTabs">
                                    <li class="active">
                                        <a href="#tab1primary" data-toggle="tab">DESCRIPCION</a>
                                    </li>
                                    <li>
                                        <a href="#tab2primary" data-toggle="tab">+ INFO</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="panel-body">
                                <div class="tab-content">
                                    <div class="tab-pane fade in active" id="tab1primary">
                                        <p><span>Descripción de la unidad</span><br><br>
                                            <?php echo $prop['descripcion']; ?>
                                        </p><br>
                                    </div>
                                    <div class="tab-pane fade" id="tab2primary">
                                        <p>
                                            <span>Lugar: </span><?php echo "   ".$cn_lugar[$prop{'lugar'}]; ?>
                                        </p>
                                        <p>
                                            <span>Dirección: </span><?php echo "   ".$prop['ubicacion']; ?>
                                        </p>
                                        <p>
                                            <span>Distancia al mar: </span>
                                            <?php if ($prop['almar'] == 0): ?>
                                            <?php echo " Frente al mar"; ?>
                                            <?php else : ?>
                                            <?php echo $prop['almar'] . " mts."; ?>
                                            <?php endif; ?>
                                        </p>
                                        <p>
                                            <span>Disponibilidad: </span><?php echo "   ".$prop['disponibilidad']; ?>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- FIN TAB PANNEL -->

                        <div class="icons clearfix">
                            <?php require '../componentes/iconos.php'; ?>
                        </div>

                    </div>

                    <div class="col-md-5">

                        <?php $total_imagenes = 0; ?>
                        <?php $carpeta = "../images/200x150/" . $prop['id'] . "/"; ?>
                        <?php $total_imagenes = count(glob(''.$carpeta.'{*.png,*.jpg}', GLOB_BRACE)); ?>
                        <?php $imagenes = glob(''.$carpeta.'{*.png,*.jpg}', GLOB_BRACE); ?>                                                    

                        <!-- Carousel -->

                        <div id="carouser-prop" class="carousel slide" data-ride="carousel">

                            <!-- Indicadores
                            <ol class="carousel-indicators">

                                <?php //for ($i=0; $i<$total_imagenes; $i++): ?>
                                    <?php //if ($i == 0): ?>
                                        <li data-target="#carousel-prop" data-slide-to="0" class="active"></li>
                                    <?php //else : ?>
                                        <li data-target="#carousel-prop" data-slide-to="<?php //echo $i; ?>"></li>
                                    <?php //endif; ?>
                                <?php //endfor; ?>

                            </ol>
                            <!--Fin Indicadores -->

                            <!-- Contenedor del Slider -->
                            <div class="carousel-inner-mini" role="listbox">

                                <?php if ($total_imagenes == 0): ?>
                                    <div class="item active">
                                        <img src="../images/BannerProximamente200x150.png"/>
                                    </div>
                                <?php else : ?>

                                    <?php for ($i=0; $i<$total_imagenes; $i++): ?>
                                        <?php if ($i == 0): ?>
                                            <div class="item active">
                                        <?php else : ?>
                                            <div class="item">
                                        <?php endif; ?>
                                        <?php echo '<img src="' . $imagenes["$i"] . '"/>';?>
                                            </div>
                                    <?php endfor; ?>
                                <?php endif; ?>

                            </div>
                            <!-- Fin Contenedor del Slider -->

                            <!-- Controles                                                              <a class="left carousel-control" href="#carousel-prop" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left"></span>
                            </a>
                            <a class="right carousel-control" href="#carousel-prop" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right"></span>
                            </a>
                            <!-- Fin Controles -->

                        </div>

                        <!-- Fin carousel -->

                    </div>

                </div>
                <!-- Fin descripción de la propiedad -->

                <div class="modal-footer-right">
                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">Cerrar</button>
                </div>

            </div>
        </div>
    </div>
    <!-- FIN VENTANA MODAL DE LA PROPIEDAD -->

    [​IMG]

    Espero alguien me pueda dar una ayuda sobre este problema. Gracias
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.462
    Me gusta recibidos:
    671
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    pues yo lo probe y funciona bien los tabs, fijate que error te manda en la consola cuando clickeas tu en el boton y asi podre ayudarte mejor ;)
    https://www.bootply.com/HEpXHXFjej
     
  3. Risziu

    Risziu Nuevo Miembro

    Se incorporó:
    11 de Junio de 2017
    Mensajes:
    4
    Me gusta recibidos:
    2
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Diseños web
    Localización:
    Bernal, Buenos Aires, Argentina
    Página web:
    Si lo hace, toma en cuenta que esto está trabajando son PHP, donde para ser bien exacto, estoy mostrando 12 casas en alquiler, cada una de ellas con un boton para ver detalles, ese boton abre una ventana MODAL y dentro de la ventana estan las TABS, para la 1er. casa de las thunbs, ambas pestañas de las TABS funcionan a la perfección, el problema se sucita desde el 2do. elemento hasta el nro. 12. Solo muestra la TAB de la izquierda, cuando se da clic a la TAB derecha... no funciona.
     
  4. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.462
    Me gusta recibidos:
    671
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    yo no puedo ver el error que te da a ti, y tampoco soy adivino ni veo el futuro, ocupo ver la pagina o el codigo que hace ese error para poder ayudarte, el codigo que pasaste a mi me funciona bien por lo cual no le veo el problema
     
  5. Risziu

    Risziu Nuevo Miembro

    Se incorporó:
    11 de Junio de 2017
    Mensajes:
    4
    Me gusta recibidos:
    2
    Puntos de trofeos:
    3
    Género:
    Hombre
    Ocupación:
    Diseños web
    Localización:
    Bernal, Buenos Aires, Argentina
    Página web:
    Ok, gracias igual.
    Ya encontré la solución, declaré un ID en los TABS con PHP y funcionó perfecto.

    <!-- TAB PANNEL -->
    <div class="panel with-nav-tabs panel-primary">
    <div class="panel-heading">
    <ul class="nav nav-tabs" id="MyTabs">
    <li class="active">
    <a href="#<?php echo $prop['id']; ?>tab1" data-toggle="tab">DESCRIPCION</a>
    </li>
    <li>
    <a href="#<?php echo $prop['id']; ?>tab2" data-toggle="tab">+ INFO</a>
    </li>
    </ul>
    </div>
    <div class="panel-body">
    <div class="tab-content">
    <div class="tab-pane fade in active" id="<?php echo $prop['id']; ?>tab1">
    <p><span>Descripción de la unidad</span><br><br>
    <?php echo $prop['descripcion']; ?>
    </p><br>
    </div>
    <div class="tab-pane fade" id="<?php echo $prop['id']; ?>tab2">
    <p>
    <span>Lugar: </span><?php echo " ".$cn_lugar[$prop{'lugar'}]; ?>
    </p>
    <p>
    <span>Dirección: </span><?php echo " ".$prop['ubicacion']; ?>
    </p>
    <p>
    <span>Distancia al mar: </span>
    <?php if ($prop['almar'] == 0): ?>
    <?php echo " Frente al mar"; ?>
    <?php else : ?>
    <?php echo $prop['almar'] . " mts."; ?>
    <?php endif; ?>
    </p>
    <p>
    <span>Disponibilidad: </span><?php echo " ".$prop['disponibilidad']; ?>
    </p>
    </div>
    </div>
    </div>
    </div>
    <!-- FIN TAB PANNEL -->
     
    Última modificación: 12 de Junio de 2017
    A AngelKrak le gusta esto.

Comparte esta página