Question

使用WordPress，我尝试使用AJAX在popup div中加载我的帖子内容，但我似乎无法使其工作。我想我是在正确的轨道上，但我不是真正的开发人员，所以我需要一些帮助！

我希望实现this之类的功能。所以到目前为止我的（相关）代码是：

在我的页面portfolio.php中：

    <div id="popUp">
        <div class="fermePop">X</div>
        <div id="contenuPop"></div>
    </div>
    ...
     if ( $query->have_posts() ): ?>
                <div class="tagged-posts">
                    <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                    <a href="<?php the_permalink(); ?>" <?php post_class( 'tiles' ); ?> rel="<?php the_ID(); ?>">
                        <?php the_post_thumbnail(); ?>
                        <h2><?php the_title(); ?></h2>
                    </a>
                    <?php endwhile; ?>
                </div>

            <?php else: ?>
                <div class="tagged-posts">
                    <h2>No posts found</h2>
                </div>
            <?php endif; ?>

single.php中

<?php

 function is_ajax() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH'])
         && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

if (is_ajax()) {
   get_header();
} ?>

<?php if (have_posts()) :
while (have_posts()) : the_post(); ?>
    <div id="single-post post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>
        <div class="contenu">
            <?php the_content(); ?>
        </div>
    </div>
<?php endwhile; ?>
<?php endif; ?>

<?php
if (is_ajax()) {
    get_footer();
}
?>

function.php

function ajax_load_projets(){
    wp_register_script('ajax_load_projets', get_template_directory_uri() . '/js/ajax-load-projets.js', false, null, false);
    wp_enqueue_script('ajax_load_projets');
    wp_localize_script('ajax_load_projets', 'load_projets_vars', array(
        'load_projets_ajaxurl' => admin_url('admin-ajax.php'),
        )
    );
}
add_action( 'wp_enqueue_scripts', 'ajax_load_projets' );

add_action('wp_ajax_load-single-post', 'prefix_ajax_single_post');
add_action('wp_ajax_nopriv_load-single-post', 'prefix_ajax_single_post');

function prefix_ajax_single_post() {
  $pid = (int) filter_input(INPUT_GET, 'pID', FILTSER_SANITIZE_NUMBER_INT);
  if ($pid > 0) {
    global $post;
    $post = get_post($pid);
    setup_postdata($post);
    printf('<div id="single-post post-%d">', $pid);
    the_title();
    the_content();
    echo '</div>';
  }
  exit();
}

最后，我的JQuery脚本：

    jQuery(document).ready(function($) {
    $.ajaxSetup({cache:false});

    $(".tiles").click(function(event){

        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }

        var postID = $(this).attr('rel');
        var $container = $("#contenuPop");

        $('.filtre').show();
        $("#popUp").show();
        $container.html("Je charge!");

        data={
            action: 'prefix_ajax_single_post', 
            pID: postID, 
        };

        $.post(load_projets_vars.load_projets_ajaxurl, data, function(content) {
            $container.html(content);
        });
    });

    function fermePop(){
        $('.filtre').hide();
        $("#popUp").hide();
    }

    $(".filtre").click(function(){
        fermePop();
    });

    $(".fermePop").click(function(){
        fermePop();
    });

});

这是我第一次使用ajax，所以我不确定自己做错了什么。

Answer 1

试试这个。

  function prefix_ajax_single_post() {

       $pid = $_REQUEST['pID'];
      if ($pid > 0) {
        global $post;
        $post = get_post($pid);
        setup_postdata($post);
        printf('<div id="single-post post-%d">', $pid);
        the_title();
        the_content();
        echo '</div>';
      }
      exit();
    }

    add_action('wp_ajax_prefix_ajax_single_post', 'prefix_ajax_single_post');
    add_action('wp_ajax_nopriv_prefix_ajax_single_post', 'prefix_ajax_single_post');

Answer 2

您没有在prefix_ajax_single_post（）函数中正确获取$ pid。由于您可以发布数据，因此可以执行以下操作：

$pid = $_POST['pID'];

WordPress AJAX加载弹出div中的内容

2 个答案: