WordPress AJAX在弹出式窗口中加载帖子内容

使用WordPress，我试图使用AJAX将弹出窗口中的内容加载到我的帖子中，但似乎无法使其工作。我认为我在正确的轨道上，但我不是一个真正的开发者，所以我需要一些帮助！WordPress AJAX在弹出式窗口中加载帖子内容

我想实现类似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(); 
}

而且finaly ，我的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，所以我不知道我做错了什么。

来源

2017-08-13 Soph87

问题是什么？ – vel

它不加载帖子的内容，它在我的弹出div中显示0。 – Soph87

试试这个。

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');

来源

2017-08-16 05:58:25 vel

谢谢！它有效，现在我明白为什么它没有以前。 :) – Soph87

很高兴帮助你 – vel

您在prefix_ajax_single_post（）函数中没有正确获取$ pid。由于您发布的数据可以做到：

$pid = $_POST['pID'];

来源

2017-08-16 06:05:00

WordPress AJAX在弹出式窗口中加载帖子内容

回答

相关问题