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
    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> 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. 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? Nov 23, 2017 at 11:10
  • Only jQuery it needs. In the console will show the error. Nov 23, 2017 at 11:26
  • There is an unexpected error end of json input JSON.parse 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! Nov 23, 2017 at 13:09

Your Answer

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

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