我关注这篇文章是为了通过category to work获得一个ajax帖子过滤器\'Using ajax on categories and wordpress loops\'.
我想我已经在我的模板中正确添加了以下内容:
我的类别列表项:-
<ul id="category-menu">
<?php foreach ( $categories as $cat ) { ?>
<li id="cat-<?php echo $cat->term_id; ?>"><a class="<?php echo $cat->slug; ?> ajax" onclick="cat_ajax_get(\'<?php echo $cat->term_id; ?>\');" href="#"><?php echo $cat->name; ?></a></li>
<?php } ?>
</ul>
内容div(用于ajax内容):-
<div class="job-holder">
<div id="loading-animation" style="display: none;"><img src="<?php echo admin_url ( \'images/loading-publish.gif\' ); ?>"/></div>
<div id="category-post-content"></div>
</div>
Ajax调用:-
<script>
function cat_ajax_get(catID) {
jQuery("a.ajax").removeClass("current");
jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
jQuery("#loading-animation-2").show();
var ajaxurl = \'<?php admin_url( \'admin-ajax.php\' ); ?>\';
jQuery.ajax({
type: \'POST\',
url: ajaxurl,
data: {"action": "load-filter", cat: catID },
success: function(response) {
jQuery("#category-post-content").html(response);
jQuery("#loading-animation").hide();
return false;
}
});
}
</script>
然后在函数中。php我有:-
add_action( \'wp_ajax_nopriv_load-filter\', \'prefix_load_cat_posts\' );
add_action( \'wp_ajax_load-filter\', \'prefix_load_cat_posts\' );
function prefix_load_cat_posts () {
$cat_id = $_POST[ \'cat\' ];
$args = array (
\'cat\' => $cat_id,
\'posts_per_page\' => 10,
\'order\' => \'DESC\'
);
$posts = get_posts( $args );
ob_start ();
foreach ( $posts as $post ) {
setup_postdata( $post ); ?>
<div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
<hi class="posttitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></hi>
<div id="post-content">
<?php the_excerpt(); ?>
</div>
</div>
<?php } wp_reset_postdata();
$response = ob_get_contents();
ob_end_clean();
echo $response;
die(1);
}
ajax调用可以工作,但它会将整个页面再次拉入#category post content div。我只想将帖子拉入所选类别中。
如果您能提供有关如何进行此项工作的任何信息,我们将不胜感激。
提前感谢J
最合适的回答,由SO网友:Thyamarkos 整理而成
您可以尝试使用.children
方法来筛选您的响应,比如说,这些帖子是在容器中提交的,容器上有一个特定的选择器,比如说,您添加了class="mypost"
在div当您构建响应时,您可以在success
方法:
// ...
jQuery("#category-post-content").html(jQuery(response).children(\'.mypost\'));
// ...
另一种选择是
foreach
循环通过
$post
并构建
$postElements
, 然后
echo json_encode($postElements);
并在
success
方法,在其中构建HTML输出。
// ...
jQuery("#category-post-content").html(\'\'); // Clean up old content
for (i in response) {
// Build the html string for each response[i] here
var postElement = \'<div id="post-\' + response[i].id + \'" class="\' + response[i].classes \'">\'
+ .........;
// and then add it to your container
jQuery("#category-post-content").append(postElement);
}
// ...
这完全取决于您想如何解决这个问题,但最好不要在服务器对AJAX请求的响应中直接返回HTML代码。