I want to load post content by categories using Ajax

2 Views

I have question.
I would like to load post content, custom post, depends on category.
So first of all I would like to have drop down menu which will list all my categories then once user will select category list of post title will appear in second drop down (post from that particular category) then once that title selected post content will load. All that needs to be done on one page and without reloading so using Ajax. I stacked at the very beginning 

<script type="text/javascript">
$(function(){
            $('#main_cat').change(function(){
                    var $mainCat=$('#main_cat').val();

                    // call ajax
                     $("#sub_cat").empty();
                        $.ajax({
                            url:"/wp-admin/admin-ajax.php",
                            type:'POST',
                                                        data:'action=my_special_action&main_catid=' + $mainCat,

                             success:function(results)
                                 {
                                //  alert(results);
                $("#sub_cat").removeAttr("style");
                $("#sub_cat").append(results);
                                        }
                                   });
                          }
                                    );
});
</script>

And I found that bit which was inserted into function.php and I do realize that that needs to be modified somehow to pull out posts rather then children of categories

Read More
add_action('wp_ajax_my_special_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
function implement_ajax() {
if(isset($_POST['main_catid']))
            {
            $categories=  get_term_by('child_of='.$_POST['main_catid'].'&hide_empty=0');
              foreach ($categories as $cat) {
                $option .= '<option value="'.$cat->term_id.'">';
                $option .= $cat->term_id;
                $option .= ' ('.$cat->category_count.')';
                $option .= '</option>';
              }

              echo '<option value="-1" selected="selected">Scegli...</option>'.$option;
            die();
            } // end if
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//for users that are not logged in.

Thats as far as i got.
Any help will be appreciated

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Here, i have develop a simple demo for get a post data of depends on category without loading page using Ajax and jQuery.

    Here is a main category, sub category and post dropdowns :

    $args = array(
        'orderby' => 'name',
        'hierarchical' => 1,
        'taxonomy' => 'category',
        'hide_empty' => 1,
        'parent' => 0,
        );
        $categories = get_categories($args);
        ?>
        <select id="main_cat">
            <option value="0">-----Select Category------</option>
        <?php
        foreach($categories as $category) {
            $option .= '<option value="'.$category->cat_ID.'">';
                 $option .= $category->name;
                $option .= '</option>';

        } 
        echo $option;
        ?>
                    </select>
    <select id="sub_cat">
    <option value="0">-----Select Sub Cat------</option> 
    </select>
    <select id="get_this_post">
    <option value="0">------Select Post-----</option> 
    </select>
    <div id="post-content-wrapper">
    </div>

    Now jQuery part: get a change events of dropdowns and retrieve data using ajax action.

    frontend_ajax_object is a object of ajax url. you have to change according as you defined.

    <script type="text/javascript">
jQuery(function($){
            $('#main_cat').change(function(){
                    var $mainCat=$('#main_cat').val();

                    // call ajax
                    console.log(frontend_ajax_object.ajaxurl);
                     $("#sub_cat").empty();
                     $("#get_this_post").empty();
                      $("#post-content-wrapper").html("");
                        $.ajax({
                            url:frontend_ajax_object.ajaxurl,
                            type:'POST',
                             data:'action=get_sub_category&main_catid=' + $mainCat,
                             success:function(results)
                             {
                                //  alert(results);
                                    $("#sub_cat").removeAttr("style");
                                    $("#sub_cat").append(results);
                             }
                        });
                     }
             );

             $('#sub_cat').change(function(){
                    var $sub_catid=$('#sub_cat').val();

                    // call ajax
                     $("#get_this_post").empty();
                     $("#post-content-wrapper").html("");
                        $.ajax({
                            url:frontend_ajax_object.ajaxurl,
                            type:'POST',
                             data:'action=get_sub_category_posts&sub_catid='+ $sub_catid,
                             success:function(results)
                             {
                               //  alert(results);
                                // $("#sub_cat").removeAttr("style");
                                  $("#get_this_post").append(results);
                             }
                        });
                     }
             );

             $('#get_this_post').change(function(){
                    var $get_this_post=$('#get_this_post').val();

                    // call ajax
                     $("#post-content-wrapper").html("");
                        $.ajax({
                            url:frontend_ajax_object.ajaxurl,
                            type:'POST',
                             data:'action=get_page_data&this_post_id='+ $get_this_post,
                             success:function(results)
                             {
                               //  alert(results);
                                $("#post-content-wrapper").html(results);
                             }
                        });
                     }
             );
});
</script>

    Now, here is a ajax function which is used to get a data based on selected fields.

    add_action('wp_ajax_get_sub_category', 'get_sub_category');
add_action('wp_ajax_nopriv_get_sub_category', 'get_sub_category');
function get_sub_category() {
    if(isset($_POST['main_catid']))
    {
        global $post;

        if(!empty($_POST['main_catid']))
        {
            $args = array('parent' => $_POST['main_catid']);
            $categories = get_categories( $args );
            $option = "<option value='0'>Select sub cat</option>";
            foreach($categories as $category) { 
                $option .= '<option value="'.$category->term_id.'">';
                 $option .= $category->name;
                $option .= '</option>';

            }
            echo $option;
            wp_die();
        } // end if
    }
}

add_action('wp_ajax_get_sub_category_posts', 'get_sub_category_posts');
add_action('wp_ajax_nopriv_get_sub_category_posts', 'get_sub_category_posts');
function get_sub_category_posts() {
    if(isset($_POST['sub_catid']))
    {
        global $post;

        if(!empty($_POST['sub_catid']))
        {
            $args = array( 'posts_per_page' => 5, 'offset'=> 0, 'category' => $_POST['sub_catid'] );

            $myposts = get_posts( $args );
            $option = "<option value='0'>Select Post</option>";
            foreach( $myposts as $post ) : setup_postdata($post); 
                 $option .= '<option value="'.get_the_ID().'">';
                 $option .= get_the_title();
                $option .= '</option>';
            endforeach; 
            echo $option;
            wp_die();
        } // end if
    }
}
add_action('wp_ajax_get_page_data', 'get_page_data');
add_action('wp_ajax_nopriv_get_page_data', 'get_page_data');
function get_page_data() {
    if(isset($_POST['this_post_id']))
    {
        global $post;

        if(!empty($_POST['this_post_id']))
        {
            $p_id= $_POST['this_post_id'];

            echo '<h1>'.get_the_title($p_id).'</h1>';
            echo '<p class="the_content">'.get_post_field('post_content', $p_id).'</p>';

            wp_die();
        } // end if
    }
}

    I hope this demo will helps you. i have tested and it is working fine. let me know if this is helps you!

    Thank you!