Site icon Hip-Hop Website Design and Development

Utilizing AJAX to filter posts with out refreshing web page

I’m attempting to create a filter to show posts by language (for every class, I’ve made subcategories to classify posts by language), nonetheless, I can not appear to get it to work.

I’ve entered the next code into class.php:

<?php $parentCategory = get_queried_object();
    $args = array("child_of" => $parentCategory->term_id);
    $childCategories = get_categories($args);
    if (! empty ($childCategories)): ;?>
        <div class="filter-posts-by-language">
            <button class="all-languages active">
                ALL
            </button>
            <?php 
            foreach ($childCategories as $youngster) { ;?>
                <button class="language-<?php echo $child->name; ?>" sort="button">
                    <a href="#!" data-slug="<?php echo $child->slug;?>"><?php  echo $child->identify;?></a>
                </button>
            <?php }; ?>
        </div>
        <script>
            jQuery(doc).prepared(operate($) {
                $(".language-JPN").on("click", operate() {
                    $(".all-languages.active").removeClass("active");
                    $(".language-ENG.active").removeClass("active");
                    $(this).addClass("active");

                    $.ajax({
                        sort: "POST",
                        url: "'/wp-admin/admin-ajax.php'",
                        dataType: "html",
                        knowledge: {
                            motion: "filter_posts_by_lang",
                            class: $(this).knowledge("slug"),
                        },
                        success: operate(res) {
                            $("#category-posts-page").html(res);
                        }
                    })
                    
                });
                
                $(".language-ENG").on("click", operate(){
                    $(".all-languages.active").removeClass("active");
                    $(".language-JPN.active").removeClass("active");
                    $(this).addClass("active");  
                });
                
                $(".all-languages").on("click", operate(){
                    $(".language-ENG.active").removeClass("active");
                    $(".language-JPN.active").removeClass("active");
                    $(this).addClass("active");  
                });     
            });
        </script>
    <?php endif;?>

And the next into features.php:

operate filter_posts_by_lang() {
$categorySlug = $_POST["category"];

$ajaxposts = new WP_Query([
    "posts_per_page" => -1,
    "category_name" => $categorySlug,
    "orderby" => "menu_order",
    "order" => "desc",
]);

$response = '';

if ($ajaxposts->have_posts()) {
    whereas($ajaxposts->have_posts()) : $ajaxposts->the_post();
        $response .= get_template_part("category.php");
    endwhile;
} else {
    $response = "empty";
}

echo $response;
exit;
}

add_action("wp_ajax_filter_posts_by_lang", "filter_posts_by_lang");
add_action("wp_ajax_noprive_filter_posts_by_lang", "filter_posts_by_lang");

I might actually recognize any assist.
Thanks!