Filtering the loop by category using Ajax in Wordpress - ajax

Question

Well, I have been looking everywhere for hours and hours and it seems like there's so many ways to do this, since I have never used Ajax before and have little knowledge of havascript, its become too hard for me.
I have the loop on my front page (index) or wordpress and I want to have a filter, a dropdown menu with different categories, that when clicked, the only posts showing in that same screen are the ones from that category. I need the loop to be refreshed with ajax, so the whole page is still left intact while you use the filter.
this is what i have on my 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 dropdown with the categories goes like this:
<?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');
?>
So, the dropdown works, and it's supposed to ajax load a wp template file with a query filtering only one category (grabbed from the wp_dropdown_categories). And the loading works fine if I have a dummy text in the templateloop.php file, but when I have the wp query, nothing happens. the #sub_cat div, which is where the loop is located and was supposed to be switched by the template file just dissapears with all the post listing and im left only with the top half of the page (until where the #sub_cat div used to be).
There has been so much trial and error, ive tried with the query call in the template file, in the index file, in the functions, i never seem to get any result.
on my functions.php file ive got this:
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.
and the query line i used to use before all this, in the index file is:
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("cat=1,2,3,4,5&paged=$paged"); ?>
i've tried using the wp_query but it's just going nowhere, i really need guidance. Any help is appreciated. thank you.

Answer 1

That is more complicated than it needs to be. You shouldn't need additional queries or AJAX at all. If you theme is using the post_class() function as it should be, your posts all have classes associated with your categories. These classes are the category name prepended with 'category-'-- 'category-uncategorized', for example. All you really need to do is show and hide posts based on those classes.
I haven't written anything specifically for your circumstance but I have done this with some very large search results-- sometimes 400 or more per page-- and it works quite well. Here is the idea: Use jQuery to watch your select menu. You want change. When the select changes, parse the information to work out the category (I don't know off hand what information wp_dropdown_categories() includes in its markup.), show() the selected category and hide() everything else.