當Ajax發起模式時顯示WP內容

Question

我試圖弄清楚我的模式文件如何不顯示我的WP內容，如果我嘗試別的，它最終會達到500（內部服務器錯誤），儘管我已經計算出了情況內部服務器錯誤。這是我的Modal的代碼。

<?php include '/wp-blog-header.php'; ?> 

<?php $postname = new WP_Query([ 'post_type' => 'causes', 'posts_per_page' => 1, 'p' => $_POST['key'] ]); ?> 
<?php while ($postname->have_posts()) : $postname->the_post(); ?> 
<div class="uk-modal-dialog"> 
    <a class="uk-modal-close uk-close"></a> 
    <div class="fetched-data"> 
    this is modal popup 
    <?php echo $post->post_name; ?> 
    </div> 
</div> 
<?php endwhile; wp_reset_postdata(); ?> 

雖然如果我用純文本的方式進行操作，它確實會顯示模態。 這是我的Ajax腳本。

$(document).ready(function(){ 
    $('.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: "POST", 
     cache: false, 
     dataType: "json", 
     url: "wp-content/themes/mytheme/inc/structures/modal/modal-donate.php", 
     data: { key : postID }, 
     success: function(data) { 
      $('.uk-modal').html(data); 
     }   
     }); 
    } 
    }); 
}); 

注意

我更新樣式文件來看看這個：

<?php 
    require '../../../../../../wp-load.php'; 
    require '../../../../../../wp-blog-header.php'; 

    echo $postKey = $_POST['key']; 
    global $post; 
    $args = array('post_type' => 'causes', 'posts_per_page' => 1, 'p' => $postKey); 
    $posts = get_posts($args); 
?> 

<?php foreach ($posts as $post) : setup_postdata($post); ?> 
<div class="uk-modal-dialog"> 
    <a class="uk-modal-close uk-close"></a> 
    <div class="fetched-data"> 
    <p>this is modal popup</p> 
    <?php the_title(); ?> 
    </div> 
</div> 
<?php endforeach; ?> 

雖然阿賈克斯錯誤不斷顯示在我的模式。

Answer 1

我想通了，dataType: "json"是事業我的錯誤在這裏，所以在我再次讀回jQuery Ajax文檔後，我發現我的情況問題只是回到了「html」類型。所以這裏是我的問題的完整解決方案。

$(document).ready(function(){ 
    $('.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: "POST", 
     cache: false, 
     dataType: "html", 
     url: "wp-content/themes/mytheme/inc/structures/modal/modal-donate.php", 
     data: { key : postID }, 
     success: function(data) { 
      $('.uk-modal').html(data); 
     }   
     }); 
    } 
    }); 
}); 

Answer 2

您需要在頁面頂部包含「wp-load.php」文件才能首先執行WordPress功能。

include("../../../wp-load.php"); 

，並呼籲「模式，donate.php」文件，您可以設置代碼類似的東西，如果你已經設置PHP文件中的腳本，

$.ajax({ 
     type: "POST", 
     cache: false, 
     dataType: "json", 
     url: <?php echo get_template_directory_uri(); ?>"/inc/structures/modal/modal-donate.php", 
     data: { key : postID }, 
     success: function(data) { 
      $('.uk-modal').html(data); 
     }   
     });