传递PHP变量ID以创建和获取动态模式内容

Question

I tried several answers here but I think I am completely lost about figuring my issue.

So, I am creating post list of different post for Book article which each of the article have different contents to pull-out from the backend. To ease the multiple-click-page, I chose to use Modal. Got some info red from some Bootstrap Modal answers comparing/using it to my UIKit Modal, but it seems not working correctly.

This is mixed of WordPress and Core Function of UIKit Modal

Code Fig.1

<a href="" class="uk-button uk-button-primary uk-width-1-1" data-content="<?php echo $post->ID; ?>" data-uk-modal="{target:'#book-info',bgclose:false,center:true}"><?php echo $book_button; ?></a>

- Modal Trigger

<div id="book-info" class="uk-modal">
  <div class="uk-modal-dialog">
    <a class="uk-modal-close uk-close"></a>
    <div class="fetched-data">
      <!-- Content To Fetch -->
    </div>
  </div>
</div>

- Modal Container

Code Fig.2

$(document).ready(function(){
  $('.uk-modal').on({
    'show.uk.modal': function(){
      var postID = $(e.relatedTarget).data('content');

      $.ajax({
        type: 'post',
        url: 'wp-content/themes/mytheme/inc/structures/modal/modal-book.php',
        data: 'data='+ postID,
        success: function(data) {
          $('.fetched-data').html(data);
        }
      });
    }
  });
});

- Ajax Script

Code Fig.3

<?php
$postID = $_GET['data'];
$postname = new WP_Query([ 'post_type' => 'causes', 'posts_per_page' => 1, 'p' => $postID ]);

while ( $postname->have_posts() ) : $postname->the_post();

  the_field('content_modal_box');
  echo '<br>';
  echo $post->post_name;

endwhile;

wp_reset_postdata();

- modal-book.php file

Code Issue 1

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

This is my message from the console, reflecting to my path: wp-content/themes/mytheme/inc/structures/modal/modal-book.php

Conclusion

On the first thought, I don't know if the code was technically passing my variable through the Ajax and I am not sure why it was responding as 500 (Internal Server Error). Hope you can help me figure out the it.

Answer 1

Ok, after sometime to debug my whole codes and did some more research. Here's the working solution to my issue.

First, I did realized that the data I am passing is "Empty" which is cause to my modal resulting "500 (Internal Server Error)". Second, My Ajax "Data" also don't know my variable value which resulting error because it is empty. And while triggering the modal to open, there is no data-content passing to any of my script.

Solution

<a href="" class="uk-button uk-button-primary uk-width-1-1 open-modal" data-content="<?php echo $post->ID; ?>" data-uk-modal="{target:'#book-info'}"><?php echo $book_button; ?></a>

- Revised Modal Trigger

$('.open-modal').on('click', function(){
  var postID = $(this).attr('data-content');

  var modal = UIkit.modal(".uk-modal", {center: true, bgclose: false});

  if ( modal.isActive() ) {
    modal.hide();
  } else {
    modal.show();

    $.ajax({
      type: 'GET',
      dataType: 'json',
      url: 'wp-content/themes/mytheme/inc/structures/modal/modal-donate.php',
      data: 'data='+postID,
      success: function(data) {
        $('.fetched-data').html(data);
      }
    });
  }

});

- Revised Ajax Script

After realized all things here. It went fine and working correctly. I revised the Ajax script and match the type function i am using over the "modal-book.php" file and add change the event modal to raw js script of the modal since I am having difficulties to clear the content when closing the modal.