Passing PHP variable ID to create and fetch dynamic Modal content

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.

So, what is the value of `$postname` (what is `WP_Query`) in your modal_book.php? — u_mulder, Jan 22 '17 at 10:38
`$postname`, this is how I connection through my article post by using the `'p' => $postID`. `$postID` specified the ID from the button I clicked. Though I am not clearly sure if I am doing it correctly. Which cause me a server error. As of your question, I don't see the value. But if I put in the same file, it pulls the latest article post. — iMarkDesigns, Jan 22 '17 at 10:49
What I mean is - how does your php script `modal_book.php` __knows__ where is `WP_Query` class defined? — u_mulder, Jan 22 '17 at 11:03
oh i see. sorry, im lost already. actually i just pattern the script i saw from this answer, hoping i am doing it/following it correctly. http://stackoverflow.com/questions/34693863/pass-php-variable-to-bootstrap-modal For the error.log, i dont know where to look at is as i am using Mamp Pro. — iMarkDesigns, Jan 22 '17 at 11:14

iMarkDesigns · Accepted Answer · 2017-01-23T08:39:53.920

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.

Passing PHP variable ID to create and fetch dynamic Modal content

1 Answers1