Jc John Jc John - 1 month ago 8
PHP Question

getting the div which handles the post of my categories in wp jquery/ajax

I have a wp_list_categories which displays my categories of wordpress site. Now I manage to display the post of my wordpress categories from the wp_list_categories by enabling the user to onClick which category will be displayed by not reloading/refreshing the page. I have the code but i cannot get the specific div which contains my post, where it returns my wholepage to be displayed. The output of my code is the ajax/jquery returns the wholepage and put it inside my

div id="inside"
. I want only to get the part of
div id = "inside"
which there is the post from the onclick category selected.

Here is my code:

$(document).ready(function(){
$.ajaxSetup({cache:true});
var $mainCategory = $('#inside'),
$cat_links = $('ul.categories-filters li a');

$cat_links.on('click', function (e) {
e.preventDefault();
$el = $(this);
var value = $el.attr("href");
$mainCategory.animate({opacity: "0.5"});
$mainCategory.load(value + "#inside", function() {
$mainCategory.animate({opacity: "1"});
});
});
});


my wp_list_categories and inside the div
id="#inside"
where the posts are there to be displayed.

<ul class="categories-filters">
<?php
$args2 = array(
'exclude' => array( 6,7,9 ),
'order' => 'DESC',
'title_li' => __(''),
);
wp_list_categories($args2);
?>
</ul>
</div>
<div class="col-md-8">
<div id="main-category" class="row row-left">
<?php if(have_posts()) :
$count = 0;
while(have_posts()) : the_post(); ?>

<div div id="inside" class="col-xs-3 col-box2">
<?php the_post_thumbnail('thumbnail'); ?>
</div>
<?php if($count==2) :
echo '</div>';
echo '<div class="row row-left">';
endif;
$count++; endwhile;
endif;
wp_reset_postdata();
?>
</div>
</div>

Answer

The issue is with how you use the jquery .load function

$mainCategory.load(value + "#inside", function() {

the documentation states that there needs to be a space between the URL and the "selector" to partially load the retrieved html

so, it's simply

$mainCategory.load(value + " #inside", function() {