1

So I was trying to loop all the post from wordpress with the_excerpt. Then I was stuck on how to get and pass the data from a single post by clicking a link or button to appear the_content() on a modal div.

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

<div class="post">
    <h2><?php the_title(); ?></h2>

    <p><?php the_time('F jS, Y'); ?> by <?php the_author(); ?></p>
    <div class="blog-content">
        <?php the_excerpt(); ?>
    </div>
 </div> 
 <?php endwhile; else : ?>
 <p><?php esc_html_e( 'Sorry, no posts matched your criteria.' ); ?></p>

this is how my modal look like..

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">

      <!-- the_content() in here-->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

not sure this will work

<button class="btn btn-primary tag_cnt" onclick="showModal('data')" type="button" value="<?php $post->post_content;?>"></button>

then use a function like this

function showModal(data)
{

   $("#myModal .modal-body").html(data)
   $("#myModal").modal();
}

but how do i transfer multiple values like the_content and the_title?

  • what is the JavaScript code that you use to display the modal ? is it jQuery UI ? jqueryui.com/dialog/#modal-confirmation – mmm Nov 22 '17 at 20:12
  • using a bootstrap, was thinking on putting the value on a button like this..<button class="btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data')" type="button" value="<?php $post->post_content?>"></button> – Jeff Edward Nov 22 '17 at 20:20
1

You can do it in different ways:

Json Encode

This is my favorite way of passing data/settings/etc to the front-end.

PHP

$obj=array(
    'content' => $post->post_content,
    'title' => esc_html( get_the_title() )
);

Now the button output will be like this:

HTML

<button class='btn btn-primary tag_cnt get_button_more_info' type='button' value='<?=json_encode($obj)?>'></button>

Javascript

(function($) {

  $('.get_button_more_info').on('click',function() {
    var obj = $(this).val();
    obj = JSON.parse(obj);

    $("#myModal .modal-body").html(obj.content)
    $("#myModal .modal-title").html(obj.title)
    $("#myModal").modal();
  });

})( jQuery );
| improve this answer | |
  • sweet!, looks good, gotta try this when I got home. – Jeff Edward Nov 22 '17 at 21:13
  • Yes, the php works great however for some reasons the script is not. Am i missing a librabry using this script? – Jeff Edward Nov 23 '17 at 11:10
  • Only jQuery it needs. In the console will show the error. – Drupalizeme Nov 23 '17 at 11:26
  • There is an unexpected error end of json input JSON.parse – Jeff Edward Nov 23 '17 at 11:54
  • 1
    Perfect! You saved me. Trying to learn. Will defintely used this technique in the future. GOOD answer man! – Jeff Edward Nov 23 '17 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.