Filtering a loop by category using Ajax in Wordpress

Well, I looked around for hours and hours, and it seems to me that there are so many ways to do this, since I had never used Ajax before and knew little about havascript, it became too complicated for me.

I have a loop on my main page (index) or wordpress, and I want to have a filter, a drop-down menu with different categories, which when clicked on it displays only messages displayed on the same screen. I need the loop to be updated using ajax, so the whole page remains intact while you use the filter.

this is what i have in the index file:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6")</script>
<script type="text/javascript">
$(function(){
     $('#main_cat').change(function(){
         var $mainCat=$('#main_cat').val();
          $("#sub_cat").empty();
              // call ajax
                  $.ajax({

              url:"<?php bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",       
              type:'POST',
              data:'action=my_special_ajax_call&main_catid=' + $mainCat,
              success:function(results)
              {
            //  alert(results);
              $('#sub_cat *').fadeOut(500);
              $('#sub_cat + p').fadeOut(500);
              $("#sub_cat").append(results);
                  $('#sub_cat').load('http://localhost:8888/public_html/wp-content/themes/twentyten-child/templateloop.php');
              $('#sub_cat + p').fadeIn(1);
                  }
                      });

            }
    );
});

The drop-down list with categories is as follows:

<?php
wp_dropdown_categories('show_count=0&selected=-1&hierarchical=1&depth=1&hide_empty=0&exclude=1&show_option_none=Main Categories&name=main_cat');
?>

, , ajax wp , ( wp_dropdown_categories). , templateloop.php, wp, . #sub_cat div, , , , im ( , div #sub_cat).

, ive , , , .

functions.php :

function implement_ajax() {
if(isset($_POST['main_catid']))
            {
              echo '<?php $paged = (get_query_var("paged")) ? get_query_var("paged") : 1; query_posts("cat='.$_GET['maincatid'].'&paged=$paged"); ?>';

            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.

, , :

       <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 query_posts("cat=1,2,3,4,5&paged=$paged"); ?>

wp_query, , . . .

+3
1

, . AJAX. post_class(), , , . , , , , "", " - ". , , , .

, - 400 - . : jQuery . change. , ( , wp_dropdown_categories() .), show() hide() .

0

All Articles