Jc John Jc John - 5 days ago 4x
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:

var $mainCategory = $('#inside'),
$cat_links = $('ul.categories-filters li a');

$cat_links.on('click', function (e) {
$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
where the posts are there to be displayed.

<ul class="categories-filters">
$args2 = array(
'exclude' => array( 6,7,9 ),
'order' => 'DESC',
'title_li' => __(''),
<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'); ?>
<?php if($count==2) :
echo '</div>';
echo '<div class="row row-left">';
$count++; endwhile;


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() {