0

Tengo una página en la que cada usuario puede crear un anuncio mediante php y mysqli. Este se publica en una seccion general donde requiero que al hacer clic en cada anuncio se expanda un popup con mas información de los mismos. Mi problema ocurre ya que con la función que tengo actualmente, únicamente el popup funciona para el anuncio más reciente, es decir que los anteriores anuncios, al hacer clic sobre ellos, no responden a la función. Intenté utilizar diferentes métodos como getElementsByClassName o getElementsByName pero ninguno de ellos valida la función, únicamente lo hace el getElementById pero con este error que se me presenta. Alguna ayuda?

Código html/php donde el usuario hace click

<div class="publishContainer" id="publishPopupOpener">
                    <div class="publish">
                        <div class="publishCUser">
                            <div class="publishCPic">
                            <img class="profpicpub" src="img/profilepics/<?php echo $use['avatar']?>" alt="Avatar">
                            </div>
                            <a href="#" class="publishCTitle">@<?php echo $use['usuario']?></a>
                        </div>
                        <div class="publishCInfo">
                            <?php $date = $lista['fecha']; ?>
                            <p class="publishCDate">Publicado el <?php echo date('d/m/Y G:i', strtotime($date))?> 
                            <p class="publishCZone">En <?php echo $lista['provincia']?>, <?php echo $lista['localidad']?></p>
                        </div>
                        <div class="publishCDisplay">
                            <div class="publishCOffer">
                                <p class="publishCQuantity"><?php echo $lista['cantidad']?></p>
                                <p class="publishCCurrency"><?php echo $lista['moneda']?></p>
                            </div>
                            <p class="publishCFee">Fee <?php echo $lista['comision']?>%</p>
                        </div>
                        <div class="publishCDetails">
                            <p class="publishCOperation"><?php echo $lista['operacion']?></p>
                            <div class="publishCMethod">
                                <i class="publishCChecked fas fa-check"></i><p class="publishCPayment"><?php echo $lista['metodo']?></p>
                            </div>
                        </div>
                    </div>
                </div>
        
                <div class="overlay" id="publishOverlay">
                    <div class="publishannouncer" id="publishPopup">
                    <a href="#" id="btn-publish-popup-closer" class="btn-cerrar-popup"><i class="fas fa-times"></i></a>
                    <h3>Publicar un anuncio</h3>
                    <h4>Gratis, de inmediato y con la más alta exposición</h4>
                    </div>

Código Jquery

jQuery('document').ready(function($) {

    var publishPopupOpener = document.getElementById('publishPopupOpener'),
        publishOverlay = document.getElementById('publishOverlay'),
        publishPopup = document.getElementById('publishPopup'),
        publishPopupCloser = document.getElementById('btn-publish-popup-closer');

    publishPopupOpener.addEventListener('click', function() {
        publishOverlay.classList.add('active');
        publishPopup.classList.add('active');
    });

    publishPopupCloser.addEventListener('click', function(e) {
        e.preventDefault();
        publishOverlay.classList.remove('active');
        publishPopup.classList.remove('active');
    });

});
4
  • Por favor edita la pregunta para agregar, al menos, un par de ejemplos de anuncios, porque me parece que estás duplicando IDs y deben ser únicos. Además, estás mezclando código jQuery con Javascript puro y el comportamiento suele ser muy diferente. No olvides tratar de crear un ejemplo mínimo y verificable para que tengas mejores probabilidades de recibir una respuesta adecuada.
    – Triby
    Commented el 15 jul. 2021 a las 17:21
  • Hola, el código correspondiente al anuncio es el que puse más arriba, cada anuncio se reproduce con el mismo ID y la misma clase, lo único que se modifica son las variables traídas desde la base de datos que ello lo reproduce cada usuario al seleccionar los datos desde un formulario. El error es ese justamente, que detecte el ID duplicado al crearse varios anuncios y solo reproduzca la función en el anuncio creado más recientemente.
    – Luca
    Commented el 15 jul. 2021 a las 17:53
  • Tanto $('#id_repetido') como document.getElementById('#id_repetido') van a encontrar solo un elemento, generalmente el primero y por eso eso es que tu código no funciona; debes acceder por clases y, como ya cargaste la librería jQuery usa sus métodos para obtener elementos y asignar eventos.
    – Triby
    Commented el 15 jul. 2021 a las 18:02
  • Utilizando document.getElementByClassName('clase') no me detecta la función, me aparece el error "jQuery.Deferred exception: publishPopupOpener.addEventListener is not a function". Sabes como podría solucionarlo? Y respecto a lo de utilizar jQuery, gracias, modificaré esos aspectos!
    – Luca
    Commented el 15 jul. 2021 a las 18:18

1 respuesta 1

1

Como te dije en comentarios, los ID deben ser únicos y debes trabajar con clases. Al parecer, estás generando una ventana modal por cada elemento y esta respuesta se basa en esa suposición.

También te sugiero que uses los métodos de jQuery, porque ya cargaste la librería y te va a facilitar lograr lo que deseas.

// Ejecutar hasta que el DOM haya cargado
$(function() {
    // Asignar evento a todos los contenedores con clase publishContainer
    $('.publishContainer').on('click', function(e) {
        // Obtener ventana del anuncio y mostrar
        $(this).find('.overlay').addClass('active');
    });
    // Asignar evento a todos los enlaces con clase btn-cerrar-popup
    $('.btn-cerrar-popup').on('click', function(e) {
        // Detener evento, para evitar abrir nuevamente por la función anterior
        e.stopPropagation();
        // Encontrar padre (elemento con clase overlay y ocultar
        $(this).closest('.overlay').removeClass('active');
    });
});
.publish {
    margin: 10px 0;
    padding: 10px;
    border: 1px #aaa solid;
}
.publish p {
    display: inline-block;
    margin: 5px 0;
}
.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    background: rgba(0, 0, 0, 0.5);
}
.overlay.active {
    display: block;
}
.publishannouncer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="publishContainer">
    <div class="publish">
        <div class="publishCUser">
            <div class="publishCPic">
                Avatar 1
            </div>
            <a href="#" class="publishCTitle">Usuario 1</a>
        </div>
        <div class="publishCInfo">
            <p class="publishCDate">Publicado el Fecha 1</p>
            <p class="publishCZone">En Provincia</p>
        </div>
        <div class="publishCDisplay">
            <div class="publishCOffer">
                <p class="publishCQuantity">Cantidad</p>
                <p class="publishCCurrency">Moneda</p>
            </div>
            <p class="publishCFee">Fee</p>
        </div>
        <div class="publishCDetails">
            <p class="publishCOperation">Operación</p>
            <div class="publishCMethod">
                <i class="publishCChecked fas fa-check"></i>
                <p class="publishCPayment">Método</p>
            </div>
        </div>
    </div>
    <!-- La ventana modal debe ser parte del contenedor -->
    <div class="overlay">
        <div class="publishannouncer">
            <a href="#" class="btn-cerrar-popup"><i class="fas fa-times"></i>X</a>
            <h3>Información de anuncio 1</h3>
            <h4>Gratis, de inmediato y con la más alta exposición</h4>
        </div>
    </div>
</div>
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="publishContainer">
    <div class="publish">
        <div class="publishCUser">
            <div class="publishCPic">
                Avatar 2
            </div>
            <a href="#" class="publishCTitle">Usuario 2</a>
        </div>
        <div class="publishCInfo">
            <p class="publishCDate">Publicado el Fecha 1</p>
            <p class="publishCZone">En Provincia</p>
        </div>
        <div class="publishCDisplay">
            <div class="publishCOffer">
                <p class="publishCQuantity">Cantidad</p>
                <p class="publishCCurrency">Moneda</p>
            </div>
            <p class="publishCFee">Fee</p>
        </div>
        <div class="publishCDetails">
            <p class="publishCOperation">Operación</p>
            <div class="publishCMethod">
                <i class="publishCChecked fas fa-check"></i>
                <p class="publishCPayment">Método</p>
            </div>
        </div>
    </div>
    <!-- La ventana modal debe ser parte del contenedor -->
    <div class="overlay">
        <div class="publishannouncer">
            <a href="#" class="btn-cerrar-popup"><i class="fas fa-times"></i>X</a>
            <h3>Información de anuncio 2</h3>
            <h4>Gratis, de inmediato y con la más alta exposición</h4>
        </div>
    </div>
</div>
        

Lecturas recomendadas (en inglés):

1
  • Muchisimas gracias, funcionó a la perfección. Lo único, utilicé algunas variantes de CSS para acoplarlo mejor al código que ya llevaba escrito. Pero la función jquery es la misma y ha funcionado increíblemente bien!
    – Luca
    Commented el 15 jul. 2021 a las 21:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.