AJAX retrieving category id wordpress

Question

I'm creating a site, that has a featured image for each category. In each category are posts with their own featured images. I'm trying to make it so that when you click on the image, a gallery will slide and show all the images on the side.

I've set everything out, except figuring out how to pull the correct category, and emptying it, when I close the gallery (so that when I click on next category image I get posts from that category).

I've set up my html like this:

<div id="fullpage">
    <div class="section" data-cat="'.$catID.'" data-catName="'.$catName.'" style="background:url(\''.$image_url.'\'); background-size:cover;">image is in the div background</div>
</div>
<div id="gallery"></div>

This is in a foreach loop, displaying all the categories, and images associated with them. Each section has cat and catName, specifying what category this is.

Now I have a function

function gallery_posts(){

    $cat_id = get_post_meta($_REQUEST['cat']);

    $the_query = new WP_QUery(array(
        'cat'      => $cat_id,
        'posts_per_page' => -1,
        'order' => 'DESC'
    ));

    $output = '';

    if ($the_query -> have_posts()) :  while ($the_query -> have_posts()) : $the_query -> the_post();
        $output .= '<div class="gallery_single_image">';

        $output .= get_the_post_thumbnail();

        $output .= '</div>';

    endwhile; 
    endif;
    wp_reset_postdata();
    die($output);
}

This function is used on AJAX call, to fill the images in the gallery div. And in my .js file I have

    var $content = $("#gallery");
    var $fullPage = $('#fullpage');
    var $galleryCat = $('#fullpage').find('.section');
    var $close = $('.close');  

    $galleryCat.on('click', function(){
        var catID = $(this).data('catid');
        load_posts(catID);
        $fullPage.addClass('galleryShow');
        $content.addClass('galleryShow');
        $close.fadeIn();
    });

    $close.on('click', function(){
        $fullPage.removeClass('galleryShow');
        $content.removeClass('galleryShow');
        $content.html('');
        $(this).fadeOut();
    });

    function load_posts(currentCat){
        var str = '&cat=' + currentCat + '&action=gallery_posts';
        $content.html();
        $.ajax({
            type: "POST",
            dataType   : "html",
            url: get_gallery_posts.ajaxurl,
            data: str,
            success: function(data){
                var $data = $(data);
                $content.html(data);
            },
            beforeSend : function(){
            },
            error : function() {
            },
            complete : function(){
            }
        });
        return false;
    }

ajaxurl is working, set as wp_localize_script in functions.php file, all works.

The issue is that I get all the posts out, no matter on what image I click. Which could mean that my $cat_id is not working well (and therefore the correct category is not in the query). Id like it that when I click on a category I get all the posts from that category. I have a close button, that will remove posts from gallery div, and toggle the width change (when you click on the image, the gallery will fill 40% of the width).

Also is it possible to make it so that when I have a gallery open, when I click on the image, while my gallery is open, to change the posts in the gallery?

dingo_d dingo_d · Accepted Answer · 2015-03-22T22:16:37

Found the error!

In my jquery I had var catID = $(this).data('catid'); and it should be

var catID = $(this).data('cat');

Also in my ajax function I changed

$cat_id = get_post_meta($_REQUEST['cat']);

to

$cat_id = (isset($_POST['cat'])) ? $_POST['cat'] : '';

Now it loads correct posts :)

AJAX retrieving category id wordpress

1 Answers