PHP変数IDを渡して動的なモーダルコンテンツを作成して取得します

Question

ここでいくつかの回答を試みましたが、私は自分の問題を理解することについて完全に迷っています。

だから、バックエンドから抜き出すために、それぞれの記事が異なる内容を持っている本記事用の別の投稿の投稿リストを作成しています。複数のクリックページを簡単にするために、私はModalを使用することにしました。一部のBootstrap Modalからの情報が、私のUIKit Modalと比較/使用していますが、正しく動作していないようです。

これはWordPressの混合とUIKitのモーダル

コード図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> 

のコア機能です - モーダルトリガー

<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> 

- モーダルコンテナ

コード図0.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のスクリプト

コード図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(); 

- モーダルbook.phpファイル

コード発行1

リソースの読み込みに失敗しました：サーバーは500（内部サーバーエラー）の状態で応答し

をこれは私のパスに反映して、コンソールからの私のメッセージです：wp-content/themes/mytheme/inc/structures/modal/modal-book.php

結論

を

最初の考えでは、コードが技術的に変数をAjaxに渡していたのかどうかわかりませんが、なぜそれが500（内部サーバーエラー）として応答しているのかわかりません。あなたがそれを理解するのを助けてくれることを願っています。

Answer 1

私のコード全体をデバッグするためにしばらくしてから、もう少し調査しました。ここに私の問題の解決策があります。

まず、私が渡しているデータが "Empty"で、私のモーダルが "500（Internal Server Error）"という結果になっていることに気付きました。第二に、My Ajaxの "Data"も、変数が空であるためエラーが発生する変数値を知らない。また、モーダルを起動する際には、data-contentがスクリプトに渡されません。

ソリューション

<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> 

- 改訂モーダルトリガー

$('.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); 
     } 
    }); 
    } 

}); 

- 改訂のAjaxスクリプト

ここにすべてのものを実現した後。それはうまくいって正しく動作します。私はAjaxスクリプトを改訂し、 "modal-book.php"ファイルを使用しているtype関数に一致させ、モーダルを閉じるときにコンテンツをクリアするのが難しいので、モーダルのraw jsスクリプトにイベントモーダルを変更します。