WordPress custom post type post item data - show/fetch only on click with Javascript dynamically?

Question

I have a question. Hopefully, I will be able to explain what I am trying to do here.

I have created a custom post type "Feeds" and published 10 post types inside that CP.

Now, usually, I would just loop through the CP and display them on a page on page load and display them in the DOM.

PHP will normally output everything when you load the page.

What I am trying to do, I have created a page displaying all the custom post type posts.

But when I click on one post I would like to open a modal which I have created in HTML, CSS, and Javascript which works statically.

I need only ONE modal HTML output to display the specific opened post type title, content and featured image on request/click only using JS.

I don't want to load 10 HTML modal DIv's for each post type instead load them only on request when needed.

Does anyone know, or can give me a simple example of how I can accomplish this using Javascript or Ajax?

Thanks in advance.

Answer 1

I think you should be able to do this:

HTML:

<a class="view_post_details" href="#" post_id="<?php the_ID(); ?>">View Post Details</a>

JS:

$(".view_post_detals").click(function () {

   var id_post = $(this).attr('post_id');

    $.ajax({
       type: 'POST',
       url: '<?php echo admin_url('admin-ajax.php'); ?>',
       data: {
          'post_id': id_post,
          'action': 'f711_get_post_content' //this is the name of the AJAX method called in WordPress
       }, success: function (result) {

           alert(result);
       },
       error: function () {
           alert("error");
       }
   });
});