How to get CPT category checkbox list and show post of selected(multiply) checkboxes via ajax?

Question

I want to create a plugin that outputs Custom Post Type category checkbox list(as in back-end WordPress) to show CPT posts that contain selected on front-end categories(multiply select) after pressing a button with ajax(without reloading).

I took plugin Getting the random post & URL via ajax and modify it, but something is wrong.

In this way i have 2 problems:

1. The checkboxes displays, but checking gives me nothing. I must press submit, page reloading and only then the class "checked" writes to checkboxes i selected. BUT i need do it without reloading.

2. I don't know, how to connect checked box with wp_query to get post via ajax.

Also i have tried wp_category_checklist instead wp_dropdown_categories but it returns white list page.

So as i understand class "checked" must be added by jquery, and in php function, after pressing submit i need have a handler of class "checked". Also i must deactivate reloading page after submit pressing.

So code of my plugin

php

    function get_random_post_tu() {

        // Simple as that, get a random post
        // I put it in an array to make it easier to read
        $args = array(
            'post_type'   => 'portfolio-item','orderby'     => 'rand',
            'numberposts' => 1
        );

        // Add the Category parameter, if set
        if ( isset( $_POST['usecategory'] ) && intval( $_POST['usecategory'] ) != 0 ) {
  $args['tax_query'] = array(
    array(
      'taxonomy' => 'portfolio_category',
      'terms'    => intval( $_POST['usecategory'] )
    )
  );

}
        $posts = get_posts( $args );

        /**
         * This actually gives us an array of post objects, so we should double check 
         * if there is indeed a post in there.
         */
        $data = array();
        if (is_array($posts) && isset($posts[0])) {

            // add this to use on frontend
            $data['status']  = 'success';
            $data['link']    = get_permalink($posts[0]->ID);
            $data['title']   = get_the_title($posts[0]->ID);
            $data['thumb']   = get_the_post_thumbnail($posts[0]->ID);
            $data['content'] = get_post_field('post_content', $posts[0]->ID);

        } else {

            // add a error status
            $data['status'] = 'error';

        }    

        // use the WordPress built in function
        wp_send_json( $data ); // this is required to return a proper result

    }

JQuery

jQuery(document).ready(function($) {
$('.grp_getnew').on('click', function(){
    var data = {
        action: 'get_random_post_tu',
        usecategory: $('#categoryselect').val()
    };

    $.post( ajax_object.ajax_url, data, function(response) {
        if ( response.status != 'error' ) {
            var $link = $("<a href='" + response.link + "'>" + response.title + "</a><span >" + response.content +"</span>");
            $('.grp_content').html($link);
        }
    }, "json");
});

});

Template for output random posts

    <?php
    //$args = array(
    //'taxonomy' => 'endo_wrc_group',
       // 'id' => 'categoryselect'
   // );
   // wp_dropdown_categories( $args );  


    $cat_array = (isset($_POST['place_id'])) ? $_POST['place_id'] : array();
     ?>
 
<form method="post" action="" id="formen">

<?php
    
    $categories=get_categories('taxonomy=portfolio_category&hide_empty=0');
    foreach($categories as $category) {
    
        echo '<div class="formo">';
        echo "<input type='checkbox' name='place_id[]' value='$category->term_id' "; 
        echo (in_array($category->term_id, $cat_array)) ? 'checked="checked"' : '';
        echo "/>";
        echo '<span>'.$category->cat_name.'</span>';
        echo '</div>';
        
    }//end foreach

?>
    <br />
    <input type="submit" value="" id="formbottom" class="grp_getnew">
 </form>
              
       <div class='grp_container'>  
           <span class='grp_content'></span>
       </div>
     <?php
     $out = ob_get_clean();
     return $out;
  }

?>

Help me please! Thank you!

Answer 1

Try adding return false; to prevent the default submit action of the click.

$('.grp_getnew').on('click', function(){
    var data = {
        action: 'get_random_post_tu',
        usecategory: $('#categoryselect').val()
    };

    $.post( ajax_object.ajax_url, data, function(response) {
        if ( response.status != 'error' ) {
            var $link = $("<a href='" + response.link + "'>" + response.title + "</a><span >" + response.content +"</span>");
            $('.grp_content').html($link);
        }
    }, "json");
    return false;
});