AJAX with loop filtering categories

I know this is old, this looks exactly what I need, but isn’t working ATM.

I paste everything on functions.php for a reason.

ONE: Category Loop for theme file: Printed it with a shortcode, because i’m using bakery I wan’t to put it in an specific place in the site. This is Working fine. 

 <?php 

    function ajaxcatloop( $atts, $content = null ) {

    $categories = get_categories();  

    $output .= '<article id="main" class="five seventh padded">';

    $output .= ' <ul id="category-menu">';

    foreach ( $categories as $cat ) {

    $output .= '<li id="cat-'.$cat->term_id.'"><a class="'.$cat->slug.' ajax" onclick="cat_ajax_get("'.$cat->term_id.'");" href="#">'.$cat->name.'</a></li>';

    }
    $output .= '</ul>';
    $output .= '<div id="category-post-content">';
    $output .= '</div>';
    $output .= '</article>';

    return $output;

    }

    add_shortcode( 'loopajax', 'ajaxcatloop' );

     ?>

TWO: The jquery code that was in theme file: In indexing it in the footer to avoid jquery issues.
IDK if this is working, but its getting placed in its place

    <?php add_action('wp_footer', function(){ ?>

<script>
function cat_ajax_get(catID) {
    jQuery("a.ajax").removeClass("current");
    jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
    jQuery("#loading-animation-2").show();
    var ajaxurl="<?php echo admin_url("admin-ajax.php'); ?>';
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        data: {"action": "load-filter", cat: catID },
        success: function(response) {
            jQuery("#category-post-content").html(response);
            jQuery("#loading-animation").hide();
            return false;
        }
    });
}
</script>


  <?php
});

?>

THREE: Placing AJAX code where it supose to be.

    add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
        add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );
        function prefix_load_cat_posts () {
            $cat_id = $_POST[ 'cat' ];
                 $args = array (
                'cat' => $cat_id,
                'posts_per_page' => 10,
                'order' => 'DESC'

            );

            $posts = get_posts( $args );
                    global $post;

            ob_start ();

            foreach ( $posts as $post ) {
            setup_postdata( $post ); ?>


<article class="post">
    <!-- Display the Title as a link to the Post's permalink. -->
    <h2><a href="https://wordpress.stackexchange.com/questions/124504/<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->
    <div class="row pad-bottom">
    <!-- Display a comma separated list of the Post's Categories. -->
    <small class="postmetadata pull-left"><?php the_category(', '); ?></small>
    <small class="date pull-left"> Posted by <?php the_author_posts_link() ?> on <?php the_time('F jS, Y') ?></small>

    </div>
    <!-- Display the Post's content in a div box. -->
    <article id="entry">
        <?php the_content('Read More here...'); ?>
    </article>
</article> <!-- closes the first div box -->
<!-- Stop The Loop (but note the "else:" - see next line). -->
 <?php } wp_reset_postdata();

       $response = ob_get_contents();
       ob_end_clean();

       echo $response;
       die(1);
       }
?>

I’ve Copy the same exact code just placed in a different way of need

But when I click one of the categories it trows me this error, in this line and nothing happens.

<article id="main" class="five seventh padded"> <ul id="category-menu"><li id="cat-8"><a class="carnes ajax" onclick="cat_ajax_get("8");" href="#">Carnes</a></li><li id="cat-9"><a class="comida-saludable ajax" onclick="cat_ajax_get("9");" href="#">Comida Saludable</a></li><li id="cat-3"><a class="jugos ajax" onclick="cat_ajax_get("3");" href="#">Jugos</a></li></ul><div id="loading-animation" style="display: none;"><img src=""/></div><div id="category-post-content"></div></article>

Uncaught Syntax Error: Unexpected end of imput

Related Posts:

  1. Loop order issue with Ajax filter
  2. Jquery Slider for profile template
  3. pop-up lighbox with AJAX
  4. Ajax loop in sidebar to load post titles/categories
  5. Exclude filter on front page
  6. Filtering posts by multiple taxonomies
  7. Ajax loop refresh on click
  8. Add Infinite Scroll to Ajax Loaded Category Query
  9. Load comments per post on click with AJAX
  10. Chopping up a large ajax request of around 200 posts [closed]
  11. Filtering The Loop For Single Page and Blog Page
  12. Sort Posts By Category?
  13. Custom search form to display users only
  14. How to get_template_part using AJAX?
  15. Category Ajax call
  16. How to get an array of years from all of the search results, and use it to filter by year the paginated loop?
  17. Query posts if meta key starts with
  18. How to return only one instance of each, from the entire loop
  19. Query reset problem or flawed code to enable custom post type query
  20. Combining action and filter?
  21. Filter the loop by categories using checkbox form
  22. How do I use AJAX Query in my posts loop?
  23. Filter the_posts doesn’t work on search page
  24. Ajax Button to load more Posts into a timeline
  25. Shortcode in posts called by ajax is not working
  26. ajax for filtering posts by category in wordpress loops
  27. Trying to get property of non-object in shortocde
  28. Scrolling Posts with Ajax
  29. Get post offset/posts page offset in single post page (outside the loop)
  30. Make a loop to return x number of posts, but only if they have content or excerpt
  31. Filter existing hook using parameter and foreach loop
  32. Fetching posts from wordpress function in ajax
  33. How to render the single post template with the post name?
  34. Using jQuery .after inside loop
  35. Getting selection of posts based on loop variables via Ajax
  36. $post is undefined in wordpress loop [ajax]
  37. Database query and get_user_meta return incorrect data
  38. Add Search and Filter functionality to custom loop
  39. Submit form for loop of products of the term with AJAX
  40. WordPress Ajax filter: Create two loops for different output styles?
  41. Get gallery in loop through ajax
  42. Reorder posts in a loop: have the posts by one particular author below the others
  43. How to avoid appending “null” in Ajax?
  44. How to manually define the primary loop
  45. How to filter get previous post function by meta value DESC and post date DESC?
  46. WordPress redundant posts based on meta field
  47. Remove posts_orderby filter then add it back in
  48. Ajax category pagination problem
  49. setup_postdata in “loop-handling” php file called via $.ajax
  50. Buddypress Group Activity Loop Filter activity type [closed]
  51. get_posts and wp_autop (remove filter)
  52. Load featured article once in a loop
  53. Help with add_filter(‘the_content’, ‘some_function’) and multiple matches
  54. Applying a filter to multiple loops for days ago
  55. AJAX in wordpress theme loop
  56. Remove the Homepage Query
  57. wordpress loop for specific category
  58. Multiple posts with one loop iteration
  59. Query date in wordpress loop
  60. Ajax Infinite Scroll In Custom WP_Query Loop Not Working
  61. Display page of custom posts?
  62. Get link of inserted media file of post within loop
  63. Output shows a page instead of a list of blog postings
  64. The correct way to call posts with ajax
  65. How to add “time” data this?
  66. How WordPress converts URL to $query_string
  67. Multiple loops on the same page removing post tags
  68. How to get_posts where ‘menu_order’ is more than 0/zero?
  69. WordPress Redirects on Install
  70. How to load all pages into one page with their templates
  71. Repeating Loop on my Posts Page
  72. Shortcode with a foreach and arguments
  73. Infinite Scroll and DFP
  74. Blog’s post count cause irratic behavior
  75. Pagination – works on local but not live dev!
  76. Combine the results of two loops [closed]
  77. How to display pending posts on the homepage only for editors
  78. How can I improve the performance of this query_posts loop?
  79. WordPress Image Slider Looping Title Not Working
  80. Adding div after every two post on main loop! Why will first post not get counted?
  81. Second Loop Showing Only One Post on Single Post Page
  82. Pulling in featured image into default recent posts widget
  83. Change position of entry title
  84. Loop info in jquery Tabs – loop into a variable?
  85. Ajax Post Filter | Split Taxonomy Into minPrice & maxPrice
  86. Insert content above an embedded video inside Wordress’ php the_content
  87. Use ACF Category Image for all Taxonomy Archive Views
  88. Loop with custom posts, to include information from different custom post type
  89. the loop printing post in one grid
  90. How do I aproach this?(for sale, for lease, sold->move something from a category to another)
  91. How to fix pagination for custom loops?
  92. query_posts ignores the argument
  93. show posts from one category with comments only
  94. Ajax request with jQuery without WP_ajax
  95. Loop from another WP site onto mine
  96. Having issue with WordPress loop
  97. I need to update the post query? [closed]
  98. Wrap every 2 divs in row – for each loop [closed]
  99. How to add class to the last image of the last post in a loop
  100. Multiple loop with pagination in same page

Leave a Comment