0

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!

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;
});
| improve this answer | |

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.