1

I have a custom post type named event and a button to load more timeline. I need to arange current timeline item to the left or right depending on his current_post from WP_query object. Ex:

if (current_post % 2 == 0) {
go to the left
} else {
go to the right
}

For the first 3 timeline items that are loaded on page load the position is correct, but when i make the AJAX call everytime the current_post is 0. Here is my query:

$args = array(
                'post_type' => 'timeline',
                'order' => 'ASC',
                'posts_per_page' => (int)$data['posts_per_page'],
                'offset' => (int)$data['offset'],
                'suppress_filters' => true
            );
        $the_query = new WP_Query($args);

Is there something that I can change to get the correct position of the post?

UPDATE To be more clear i will put my entire code here. AJAX function:

$(".download-resume").on("click", function() {
        var $this = $(this);
        var posts_per_page = parseInt($this.data("show"));
        var currentPage = parseInt($this.data("current"));
        var offset = currentPage * posts_per_page;

        var data = {
            action : "timeline_load",
            offset : offset,
            posts_per_page : posts_per_page
        };

        var last_item = $('.resume-holder:last');
        $.post(options.ajax_url, data, function(resp) {
            if(resp.success == false) {
                $this.text(resp.data.msg).removeAttr('href');
            } else {
                if(resp.data) {
                    $this.text(resp.data.msg).removeAttr('href');
                } else {
//                    alert(resp);
                    last_item.after(resp);
                    $('.resume-slider').flexslider({
                        animation: "slide",
                        slideDirection: "horizontal",
                        slideshow: false,
                        slideshowSpeed: 3500,
                        animationDuration: 500,
                        directionNav: true,
                        controlNav: false,
                    });
                    $this.data("current", currentPage + 1);
                    $('html, body').animate({
                        scrollTop: $this.offset().top
                    }, 1200);
                }
            }
        });

        return false;
    });

and this is my php function:

global $post;

        $data = filter_var_array($_POST, FILTER_SANITIZE_SPECIAL_CHARS);

        if ($data['action'] == "timeline_load") {
            $post = null;

            $args = array(
                'post_type' => 'timeline',
                'order' => 'ASC',
                'posts_per_page' => (int)$data['posts_per_page'],
                'offset' => (int)$data['offset'],
                'suppress_filters' => true
            );
            $the_query = new WP_Query($args);

            if ($the_query->have_posts()) :

                while ($the_query->have_posts()) : $the_query->the_post();
                    $icon = get_post_meta($post->ID, 'timeline_icon', true);
                    $year = get_post_meta($post->ID, 'timeline_year', true);
//                    var_dump($the_query->current_post);
                    if (($the_query->current_post) % 2 == 0) : ?>
                        <div class="resume-holder">
                            <div class="resume-box animaper">
                                <div class="resume-circle-holder right-circle">
                                    <div class="resume-circle">
                                        <div class="resume-date right-date"><span></span><?php echo $year; ?></div>
                                    </div>
                                </div>
                                <div class="grid-full transition resume left-arrow">
                                    <div class="resume-head right-head-arrow">
                                        <h3><?php the_title(); ?></h3>

                                        <div class="resume-icon"><i class="fa <?php echo $icon; ?>"></i></div>
                                    </div>
                                    <?php
                                    $featured_image = array();
                                    $featured_image[] = get_the_post_thumbnail($post->ID);
                                    if (class_exists('Dynamic_Featured_Image')) {
                                        global $dynamic_featured_image;
                                        $featured_images = $dynamic_featured_image->get_featured_images($post->ID);

                                        if (!is_null($featured_images)) {
                                            foreach ($featured_images as $image) {
                                                $featured_image[] = $image['full'];
                                            }
                                        }
                                    }
                                    $count = count($featured_image);
                                    if ($count > 1) :
                                        ?>
                                        <div class="clear"></div>
                                        <div class="resume-slider">
                                            <ul class="slides">
                                                <?php
                                                $featured_image = get_the_post_thumbnail($post->ID, array(560, 324, 'class' => ' respimg'));
                                                echo '<li>' . $featured_image . '</li>';
                                                if (class_exists('Dynamic_Featured_Image')) {
                                                    global $dynamic_featured_image;
                                                    $featured_images = $dynamic_featured_image->get_featured_images($post->ID);

                                                    if (!is_null($featured_images)) {
                                                        foreach ($featured_images as $image) {
                                                            echo '<li><img src="' . $image['full'] . '" class="respimg" width="560" height="324"></li>';
                                                        }
                                                    }
                                                }
                                                ?>
                                            </ul>
                                        </div>
                                    <?php else : ?>
                                        <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID, array(560, 325, 'class' => ' respimg')), 'single-post-thumbnail'); ?>
                                        <a class="image-popup" href="<?php echo $image[0]; ?>" title="">
                                            <span></span>
                                            <?php echo get_the_post_thumbnail($post->ID, array(560, 325, 'class' => ' respimg')); ?>
                                        </a>
                                    <?php endif; ?>
                                    <?php the_content(); ?>

                                </div>
                            </div>
                        </div>
                    <?php else : ?>
                        <div class="resume-holder">
                            <div class="resume-box right right-box animaper">
                                <div class="resume-circle-holder left-circle">
                                    <div class="resume-circle">
                                        <div class="resume-date left-date"><span></span><?php echo $year; ?></div>
                                    </div>
                                </div>
                                <div class="grid-full transition resume  left-arrow">
                                    <div class="resume-head left-head-arrow">
                                        <h3><?php the_title(); ?></h3>

                                        <div class="resume-icon"><i class="fa <?php echo $icon; ?>"></i></div>
                                    </div>
                                    <?php
                                    $featured_image = array();
                                    $featured_image[] = get_the_post_thumbnail($post->ID);
                                    if (class_exists('Dynamic_Featured_Image')) {
                                        global $dynamic_featured_image;
                                        $featured_images = $dynamic_featured_image->get_featured_images($post->ID);

                                        if (!is_null($featured_images)) {
                                            foreach ($featured_images as $image) {
                                                $featured_image[] = $image['full'];
                                            }
                                        }
                                    }
                                    $count = count($featured_image);
                                    if ($count > 1) :
                                        ?>
                                        <div class="clear"></div>
                                        <div class="resume-slider">
                                            <ul class="slides">
                                                <?php
                                                $featured_image = get_the_post_thumbnail($post->ID, array(541, 313, 'class' => ' respimg'));
                                                echo '<li>' . $featured_image . '</li>';
                                                if (class_exists('Dynamic_Featured_Image')) {
                                                    global $dynamic_featured_image;
                                                    $featured_images = $dynamic_featured_image->get_featured_images($post->ID);

                                                    if (!is_null($featured_images)) {
                                                        foreach ($featured_images as $image) {
                                                            echo '<li><img src="' . $image['full'] . '" class="respimg" width="541" height="313"></li>';
                                                        }
                                                    }
                                                }
                                                ?>
                                            </ul>
                                        </div>
                                    <?php else : ?>
                                        <?php $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID, array(560, 325, 'class' => ' respimg')), 'single-post-thumbnail'); ?>
                                        <a class="image-popup" href="<?php echo $image[0]; ?>" title="">
                                            <span></span>
                                            <?php echo get_the_post_thumbnail($post->ID, array(541, 313, 'class' => ' respimg')); ?>
                                        </a>
                                    <?php endif; ?>

                                    <?php the_content(); ?>

                                </div>
                            </div>
                        </div>
                    <?php endif;
                endwhile;
                wp_reset_query();
            else :
                wp_send_json_success(array("msg" => "No more results to load"));
            endif;
        } else {
            wp_send_json_error(array("msg" => "An error was occured"));
        }

        die();
  • Is that your whole AJAX function? – Nick Young May 26 '14 at 6:31
  • Try to add die() in the ajax code after it execute. – ksr89 May 26 '14 at 6:35
  • I added the die() after it execute – httpix May 26 '14 at 6:50
  • Is it working ? – ksr89 May 26 '14 at 6:54
  • No, the die() function was there. – httpix May 26 '14 at 7:01
0

Replace your ajax code with this code. I didn't check it but i think it should we working.

The whole html part is convert into string so that it will send via ajax response.

<?php
global $post;
$data = filter_var_array($_POST, FILTER_SANITIZE_SPECIAL_CHARS);
if ($data['action'] == "timeline_load") {
    $post = null;

    $args = array(
        'post_type' => 'timeline',
        'order' => 'ASC',
        'posts_per_page' => (int)$data['posts_per_page'],
        'offset' => (int)$data['offset'],
        'suppress_filters' => true
    );
    $the_query = new WP_Query($args);

    if ($the_query->have_posts()) :
        $ajax_response = '';
        while ($the_query->have_posts()) : 
            $the_query->the_post();
            $icon = get_post_meta($post->ID, 'timeline_icon', true);
            $year = get_post_meta($post->ID, 'timeline_year', true);
            if (($the_query->current_post) % 2 == 0) :
                $ajax_response .= '<div class="resume-holder">
                    <div class="resume-box animaper">
                        <div class="resume-circle-holder right-circle">
                            <div class="resume-circle">
                                <div class="resume-date right-date"><span></span>'.$year.'</div>
                            </div>
                        </div>
                        <div class="grid-full transition resume left-arrow">
                            <div class="resume-head right-head-arrow">
                                <h3>'.the_title().'</h3>

                                <div class="resume-icon"><i class="fa '.$icon.'"></i></div>
                            </div>';

                            $featured_image = array();
                            $featured_image[] = get_the_post_thumbnail($post->ID);
                            if (class_exists('Dynamic_Featured_Image')) {
                                global $dynamic_featured_image;
                                $featured_images = $dynamic_featured_image->get_featured_images($post->ID);

                                if (!is_null($featured_images)) {
                                    foreach ($featured_images as $image) {
                                        $featured_image[] = $image['full'];
                                    }
                                }
                            }
                            $count = count($featured_image);
                            if ($count > 1) :
                                $ajax_response .= '<div class="clear"></div>
                                <div class="resume-slider">
                                    <ul class="slides">';
                                        $featured_image = get_the_post_thumbnail($post->ID, array(560, 324, 'class' => ' respimg'));
                                        $ajax_response .= '<li>' . $featured_image . '</li>';
                                        if (class_exists('Dynamic_Featured_Image')) {
                                            global $dynamic_featured_image;
                                            $featured_images = $dynamic_featured_image->get_featured_images($post->ID);

                                            if (!is_null($featured_images)) {
                                                foreach ($featured_images as $image) {
                                                    $ajax_response .= '<li><img src="' . $image['full'] . '" class="respimg" width="560" height="324"></li>';
                                                }
                                            }
                                        }

                                    $ajax_response .= '</ul>
                                </div>';
                            else :
                                $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID, array(560, 325, 'class' => ' respimg')), 'single-post-thumbnail');
                                $ajax_response .= '<a class="image-popup" href="'.$image[0].'" title="">
                                    <span></span>'
                                    .get_the_post_thumbnail($post->ID, array(560, 325, 'class' => ' respimg')).
                                '</a>';
                            endif;
                            $ajax_response .=the_content().
                        '</div>
                    </div>
                </div>';
            else:
                $ajax_response .= '<div class="resume-holder">
                    <div class="resume-box right right-box animaper">
                        <div class="resume-circle-holder left-circle">
                            <div class="resume-circle">
                                <div class="resume-date left-date"><span></span>'.$year.'</div>
                            </div>
                        </div>
                        <div class="grid-full transition resume  left-arrow">
                            <div class="resume-head left-head-arrow">
                                <h3>'.the_title().'</h3>
                                <div class="resume-icon"><i class="fa '.$icon.'"></i></div>
                            </div>';
                            $featured_image = array();
                            $featured_image[] = get_the_post_thumbnail($post->ID);
                            if (class_exists('Dynamic_Featured_Image')) {
                                global $dynamic_featured_image;
                                $featured_images = $dynamic_featured_image->get_featured_images($post->ID);

                                if (!is_null($featured_images)) {
                                    foreach ($featured_images as $image) {
                                        $featured_image[] = $image['full'];
                                    }
                                }
                            }
                            $count = count($featured_image);
                            if ($count > 1) :
                                $ajax_response .= '<div class="clear"></div>
                                <div class="resume-slider">
                                    <ul class="slides">';
                                        $featured_image = get_the_post_thumbnail($post->ID, array(541, 313, 'class' => ' respimg'));
                                        $ajax_response .= '<li>' . $featured_image . '</li>';
                                        if (class_exists('Dynamic_Featured_Image')) {
                                            global $dynamic_featured_image;
                                            $featured_images = $dynamic_featured_image->get_featured_images($post->ID);

                                            if (!is_null($featured_images)) {
                                                foreach ($featured_images as $image) {
                                                    $ajax_response .= '<li><img src="' . $image['full'] . '" class="respimg" width="541" height="313"></li>';
                                                }
                                            }
                                        }
                                    $ajax_response .= '</ul>
                                </div>';
                            else :
                                $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID, array(560, 325, 'class' => ' respimg')), 'single-post-thumbnail');
                                $ajax_response .= '<a class="image-popup" href="'.$image[0].'" title="">
                                    <span></span>'.
                                    get_the_post_thumbnail($post->ID, array(541, 313, 'class' => ' respimg')).'
                                </a>';
                            endif;
                            $ajax_response .= the_content().
                        '</div>
                    </div>
                </div>';
            endif;
        endwhile;
        wp_reset_query();
        echo $ajax_response;
        die();
    else :
        echo json_encode(array("msg" => "No more results to load"));
        die();
    endif;
} else {
    echo json_encode(array("msg" => "An error was occured"));
    die();
}
  • One note here, you will probably need to change things like the_title() and the_content() to get_the_title() and get_the_content() etc. – Nick Young May 27 '14 at 5:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.