Get content from WordPress posts in Boostrap modal window – Javascript side?

1 Views

I have a WordPress page with a grid that pull posts. Each post is in a box showing the title + thumbnail and upon clicking on it the content of the post should also appear in the modal (namely, pulling the data from the post which is clicked).

I have been looking at this example: Open WordPress Posts in Bootstrap Modal and can get it working via data attributes, namely:

Read More
<ul class="thumbnails-x">

<?php 
 $labels = new WP_Query(array(
 'post_type' => 'x', 
 'posts_per_page' => 1000
  )); 
  while ( $labels->have_posts() ) : 
  $labels->the_post();
  ?>

 <li class="yy">

  <?php echo '<div class="thumbnail">';?>
     <a href="<?php echo get_permalink(); ?>">
  <?php the_post_thumbnail('');?></a>

  **<button type="button" data-toggle="modal" 
  data-target="#myModal-<? the_ID(); ?>"><?php the_title();?></button>**

  </li>

 <div id="myModal-<? the_ID(); ?>" class="modal hide fade" 
 tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 
  aria-hidden="true">
  <div class="modal-header">
    <h3 id="myModalLabel">
      <?php the_title();?>
    </h3>
    <p>
      <?php the_content();?>
    </p>
  </div>
  <div class="modal-body">
    <?php the_post_thumbnail(); ?>
  </div>
  <div class="modal-footer">
    <button type="button" class="close" data-dismiss="modal" 
   aria-hidden="true">×</button>
  </div>
</div>


 <?php endwhile; ?>
 <?php wp_reset_query(); ?>

 </ul>

But unfortunately I just cannot get it working via Javascript. Would be great if anyone can help me with the code and how I can implement the dynamic feature in it? The following just doesnt work, if I have instead of the button: 

<a href="#myModal-<? the_ID(); ?>" data-toggle="modal" id="clickme">
  <?php the_title();?>
</a>

and then in the js file the following: 

  **$(document).ready(function(){  
   $("#clickme").on
   ("click", function(){ $("myModal-<?the_ID();>").modal();});
   });**

Thank you SO much!

Post Views: 1

Related posts

2 comments

  1. Since I’m guessing you’re not rendering that Javascript file with PHP, you’ll need to send the ID of the post to that anonymous function using something other than PHP. You could use a data attribute in your #clickme <a> like data-id="<?php the_ID(); ?>" and then change your on click to:

      $(document).ready(function(){  
    $("#clickme").on
      ("click", function(){ $("#myModal-" + $(this).attr('data-id')).modal();});
  });

    Or something similar to that.

  2. There are two possible ways to accomplish what you’re going for, both described in depth in my blog post: https://allurewebsolutions.com/open-wordpress-post-modal-without-plugin

    First Method

    The first method requires modifying the template that serves the content you want to appear in the modal. For example, you have a template called modal-content-template.php.

    Inside that template we wrap the content we want loaded into the modal with:

    <?php if (!$_GET) { ?>
    // content that gets loaded on mobile
<?php } ?>

    Full example of a template where we are excluding the WordPress header and footer:

    <?php if (!$_GET) { get_header(); } ?>

<article>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <h1 class="page-title"></h1>

  <section class="entry-content cf">
    <?php the_content(); ?>
  </section>

</article>

<?php if (!$_GET) { get_footer(); } ?>

    CodePen example for the JS required to make this work

    Second Method

    The second method is a little more elegant. We use the modalContent.load(post_link + ' #modal-ready'); method to load the modal content.

    The modal contact is wrapped in a wrapper container with ID #modal-ready. This can be done without even touching the page template using a function that hooks into the content.

    add_action('the_content', 'wrap_content');
function wrap_content($content)
{
    return '<div id="modal-ready">' . $content . '</div>';
}

Comments are closed.