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?

2
  • what is the JavaScript code that you use to display the modal ? is it jQuery UI ? jqueryui.com/dialog/#modal-confirmation
    – mmm
    Commented Nov 22, 2017 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> Commented Nov 22, 2017 at 20:20

1 Answer 1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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