WordPress.org

Ready to get started?Download WordPress

Forums

Retrieve content-single.php with AJAX (3 posts)

  1. lwish
    Member
    Posted 5 months ago #

    Hello,

    I'm building this single page site, and so far I did the following.

    I have a carousel containing featured images from posts categorized through tags, these are retrieved with AJAX. Behind these images is a link to the single post, e.g example.com/?p=48. Instead of going to the single post I want to retrieve the content for each single post through ajax and display that on the same page.

    So far I've got this:

    JS

    jQuery(document).ready(function($) {
        //fixed by Bob Thomas 19-03-2014
        //people forgot to reinit the carousel
        var data = {
                action: 'filter_posts', // function to execute
                afp_nonce: afp_vars.afp_nonce, // wp_nonce
                taxonomy: "lampenkappen", // selected tag
            }
            RebuildCarouselByAjax(afp_vars.afp_ajax_url, data , "build")
    
        //init carousel with lampenkappen
        function CreateCarousel() {
            $("#owl-riel").owlCarousel({
    
              autoPlay: false, //Set AutoPlay to 3 seconds
    
              items : 5,
              pagination: false,
              itemsDesktop : [1199,3],
              itemsDesktopSmall : [979,3],
              stopOnHover: true,
              navigation:true,
              navigationText: [
              "<i class='glyphicon glyphicon-lg glyphicon-chevron-left'></i>",
              "<i class='glyphicon glyphicon-lg glyphicon-chevron-right'></i>"
              ],
    
          });
        }
    
        $('.tax-filter').click( function(event) {
            // Prevent default action - opening tag page
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
            // Get tag slug from title attirbute
            var selecetd_taxonomy = $(this).attr('title');
            // After user click on tag, fade out list of posts
            $('#owl-riel').fadeOut();
            data = {
                action: 'filter_posts', // function to execute
                afp_nonce: afp_vars.afp_nonce, // wp_nonce
                taxonomy: selecetd_taxonomy, // selected tag
            };
            RebuildCarouselByAjax(afp_vars.afp_ajax_url, data);
    
        });
    
        function RebuildCarouselByAjax(url,data) {
            var build = (arguments.length === 3) ? true : false;
            $.post( url, data, function(response) {
    
                if( response ) {
                    // Display posts on page
                    $("#owl-riel").empty();
                    $('#owl-riel').html( response );
                    // Restore div visibility
                    $('#owl-riel').fadeIn();
    
                };
                if(build) {
                    CreateCarousel();
                    rebindClickHandlerDetail();
                } else {
                    $("#owl-riel").data('owlCarousel').reinit();
                    rebindClickHandlerDetail();
                }
            });
        }
    
        function rebindClickHandlerDetail() {
            $('.detail-filter').click( function(event) {
                // Prevent defualt action - opening tag page
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
                event.preventDefault();
                console.log($(this).attr("href"));
                $.ajax( "content-single.php" )
                .done(function() {
                    alert( "success" );
                })
                .fail(function() {
                    alert( "error" );
                })
                .always(function() {
                    alert( "complete" );
                });
            });
        };
    });
    
    jQuery(document).ready(function($) {
        $('.navbar-contact').click(function() {
                $('.contact-wrapper').slideToggle('slow');
        });
    });

    PHP:

    function tags_filter() {
        $tax = 'post_tag';
        $terms = get_terms( $tax );
        $count = count( $terms );
    
        if ( $count > 0 ): ?>
            <div class="post-tags">
            <?php
            foreach ( $terms as $term ) {
                $term_link = get_term_link( $term, $tax );
                echo '<a href="' . $term_link . '" class="tax-filter" title="' . $term->slug . '">' . $term->name . '</a> ';
            } ?>
            </div>
        <?php endif;
    }
    
    function ajax_filter_posts_scripts() {
      // Enqueue script
      wp_register_script('afp_script', get_template_directory_uri() . '/js/ajax-filter-posts.js', false, null, false);
      wp_enqueue_script('afp_script');
    
      wp_localize_script( 'afp_script', 'afp_vars', array(
            'afp_nonce' => wp_create_nonce( 'afp_nonce' ), // Create nonce which we later will use to verify AJAX request
            'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
          )
      );
    }
    add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);
    
    // Script for getting posts
    function ajax_filter_get_posts( $taxonomy ) {
    
      // Verify nonce
      if( !isset( $_POST['afp_nonce'] ) || !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ) )
        die('Permission denied');
    
      $taxonomy = $_POST['taxonomy'];
    
      // WP Query
      $args = array(
        'tag' => $taxonomy,
        'post_type' => 'post',
        'posts_per_page' => 10,
      );
    
      // If taxonomy is not set, remove key from array and get all posts
      if( !$taxonomy ) {
        unset( $args['tag'] );
      }
    
      $query = new WP_Query( $args );
    
      if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
    
        <span class='item'><a class="detail-filter" rel="<?php the_permalink(); ?>" href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {  the_post_thumbnail(); } ?></a></span>
    
      <?php endwhile; ?>
      <?php else: ?>
        <h2>No posts found</h2>
      <?php endif;
    
      die();
    }
    
    add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
    add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');

    Now I have googled around alot but I can't seem to get this working.

    Can anyone help me out on this one?

  2. Amanda Rush
    Member
    Posted 5 months ago #

    Hi,

    You'l need to pull the results of the the_content function.

  3. lwish
    Member
    Posted 5 months ago #

    How would I achieve that?

Reply

You must log in to post.

About this Topic