CODEWITHSUNDEEP
phpajaxwordpress
CaraMar
CaraMar

Reputation: 307

Wordpress: Passing post content into div using AJAX

I try to open a post in a bootstrap modal window in Wordpress. The goal is to load the post content via Ajax, as the modal window is placed in the footer.

This is what I have until now:

My template-part that's loaded in the footer (modal.php)

<div class="modal fade" id="myModal-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"><?php the_title();?></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <?php the_content();?>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

As you can see, I would need some content passed from the query into the div in the footer.

My link, that is opening the modal window:

<a href="#" class="modal-link" data-toggle="modal" data-target="#myModal-<?php the_ID(); ?>" >View more</a>

So what would be the cleanest way to solve this?

Thanks for any advice! Cara

Upvotes: 0

Views: 2191

Answers (2)

mariobros
mariobros

Reputation: 899

First, you have to declare an ajax url inside header.php or page that include the ajax call:

<script type="text/javascript" language="javascript">
    var ajax_url = "<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php";
</script>

Then, in your current theme open function.php and declare an ajax call:

function implement_ajax() {
    include(TEMPLATEPATH . '/ajax_return.php');
}

add_action('wp_ajax_my_special_action', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_action', 'implement_ajax');

Now, you have to set ajax call inside page that you want to work.

<script type="text/javascript">
jQuery(function(){
   jQuery('.modal-link').click(function(){
       var mypostid = ''; Will be contained element that allows you to manage dinamical content (such as post_id).
       jQuery.post(ajax_url, {action : 'my_special_action', post_id : mypostid}, return_function, 'JSON');
   });
});
</script>

So, create ajax_return.php inside your current theme. This file will be contained query that give you dinamical content for your modal. Eg:

query_posts('page_id=' . $_POST['id']);
if(have_posts()) while(have_post()) : the_post();
   $dinamic_post_content = get_the_content();
endwhile;

return json_encode(array('return' => $dinamic_post_content));
exit;

After jQuery.post, you have to call "return_function" that allows you to manage response and set modal correctly:

function return_function(data)
{
    jQuery('.modal-body').html(data.return);
}

Upvotes: 0

Abu Roma&#239;ssae
Abu Roma&#239;ssae

Reputation: 3901

You can use the REST API for worpdress (at http://v2.wp-api.org/ ) this way you can load the post content with ajax and append it to your div as you see fit

Example:

$.get('http://demo.wp-api.org/wp-json/wp/v2/posts/470',function(data){
    data = JSON.parse( data );
    $('div.selector').html( data.content );
})

I hope this helps

Upvotes: 1

Related Questions