Cómo obtener el ID de la entrada desde un botón y pasar el título al Modal

Question

Cómo obtener el ID de la entrada desde un botón y pasar el título al Modal

3 ago 2018, 16:08:50

Vistas: 20K

Votos: 0

    <div><?php echo wp_get_attachment_image($image_upload,$size = 'full');?><br/>
      <span class="name"><?php echo $title ?></span><span class="jobtitle"><?php echo $jobtitle ?></span>
      <a onclick="return moreinfoModal(this);" id="<?php get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal" href="javascript:void(0);" class="info">más información</a>
    </div>


    <div id="moreinfo-modal" role="dialog">
          <div class="teammember_div">
            <a id="close-moreinfo" onclick='return closeMoreInfoModal();' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg"></a>
            <?php echo wp_get_attachment_image($image_upload,$size = 'full');?>
            <p><?php echo $title ?></p>
            <p><?php echo $about ?></p>
            <span class="jobtitle"><?php echo $jobtitle ?></span>

            <span id="moreinfo" style="display: inherit;"></span>
            <a id="modal-join" class="btn-cta" href="/sign-up/">¡Hazte Miembro!</a>
          </div>
        </div>

    <?php }?>
    </div>
    </div>

Estoy mostrando 4 tarjetas con nombres y títulos de trabajo y un botón para abrir un modal. Cuando el usuario hace clic en el botón, se abre un modal con una imagen, título, descripción, etc...

Desafortunadamente, solo puedo hacer que se abra un Modal con los detalles de una entrada. Me gustaría hacer coincidir el contenido del modal con el contenido de las tarjetas, si tiene sentido.

Es decir: tarjeta = Harry Modal = Harry

<script> function moreinfoModal(field) {
        console.log(field.id);
        $('#moreinfo-modal').toggleClass('open');
    }


    function closeMoreInfoModal() {
        $('#moreinfo-modal').toggleClass('open');
    }

    $(document).on('click', '.close-pill', function(e) {
        $(this).parent().remove();
        e.preventDefault();
    });
    </script>

¿Alguna idea de lo que me falta?

Remco

125

php loop

Comentarios

Parece que no tienes una parte que inserte datos en el modal emergente en la sección de JS

idpokute

3 ago 2018 16:34:47

Sí, y ahí es donde estoy un poco perdido. Agradecería un poco de orientación. ¿Cómo podría hacer eso?

Remco

3 ago 2018 16:47:55

Todas las respuestas a la pregunta

Comentarios

Hola, gracias por el código - actualmente no funciona tal como está, pero me orientó en la dirección correcta así que seguiré trabajando en ello. ¡Gracias!

Remco

6 ago 2018 14:12:57

así que aunque está listando los modales, los está listando todos con un solo clic - está mostrando todos los IDs de posts y no solo uno. ¿Algún consejo?

Remco

6 ago 2018 23:56:21

Lo siento, no entiendo cuál es el problema real que has tenido con el código y por qué todos los modales se listan con un solo clic del botón. ¿Podrías compartir el código completo de la página para que pueda entender dónde está el error? ¡Gracias!

Nilesh Sanura

7 ago 2018 09:22:58

No hay problema, ya lo arreglé para que solo llame a un modal - ¡gracias!

Remco

7 ago 2018 16:55:15

Eso es genial... :)

Nilesh Sanura

7 ago 2018 17:09:10

Nilesh Sanura 49 · Accepted Answer · 2018-08-04T15:14:24Z

Cuando mostramos datos de una publicación en un modal al hacer clic en un botón, debemos proporcionar el post-id con un atributo de datos para el objetivo específico del modal.

Por favor, agrega el post-id en data-target en la etiqueta de ancla (anchor) así como en el ID de la etiqueta div principal.

He modificado tu código aquí:

<div><?php echo wp_get_attachment_image($image_upload,$size = 'full');?><br/>
  <span class="name"><?php echo $title; ?></span><span class="jobtitle"><?php echo $jobtitle; ?></span>
  <a onclick="return moreinfoModal(this);" id="<?php echo get_the_ID();?>" data-toggle="modal" data-target="#moreinfo-modal-<?php echo get_the_ID();?>" href="javascript:void(0);" class="info">más información</a>
</div>


<div id="moreinfo-modal-<?php echo get_the_ID();?>" class= "moreinfo-modal" role="dialog">
      <div class="teammember_div">
        <a id="close-moreinfo" onclick='return closeMoreInfoModal();' href="javascript:void(0);"><img src="https://brentbrookbush.com/wp-content/themes/brent/images/svgs/icon.svg" alt="Cerrar" title="Cerrar modal"></a>
        <?php echo wp_get_attachment_image($image_upload,$size = 'full');?>
        <p><?php echo $title ?></p>
        <p><?php echo $about ?></p>
        <span class="jobtitle"><?php echo $jobtitle ?></span>

        <span id="moreinfo" style="display: inherit;"></span>
        <a id="modal-join" class="btn-cta" href="/sign-up/">¡Conviértete en Miembro!</a>
      </div>
    </div>

<?php }?>
</div>
</div>

También puedes cambiar el código JavaScript para que funcione con la clase en lugar del atributo ID del div así:

<script> function moreinfoModal(field) {
        console.log(field.id);
        $('.moreinfo-modal').toggleClass('open');
    }


    function closeMoreInfoModal() {
        $('.moreinfo-modal').toggleClass('open');
    }

    $(document).on('click', '.close-pill', function(e) {
        $(this).parent().remove();
        e.preventDefault();
    });
    </script>

Espero que esto pueda resolver tu problema. :)