jQuery - load() function on success of ajax() POST

[uconnkid3219]

Hey guys, I'm a new member here.  I've been working to create a website for sports blogs.  I have been working to try to fix this one problem for the past several days and have tried going about it a number of different ways without any success.  Bottom line... I'm trying to make a page where all of the blogs will be listed and wanted to have 4 checkboxes where the user can filter the list of blogs so that the list only shows blogs discussing the sport they are interested in.  I am trying to use jQuery/AJAX to update the list once the user checks the sports they want and clicks the "Filter" button.  Once they click the "Filter" button, I wanted the list to refresh with the contents of another PHP page (which contains the blogs list).  The problem I'm experiencing is that when I click the "Filter" button, the page is not updated with the contents of the PHP page.  Also, even though I specified "POST" in the ajax() call... the data is listed in the URL as if I used the "GET" method (which I did not as you will see in my code).  If anyone could please help me to give me an idea of where I'm going wrong in my code, it'd be greatly appreciated!  Thanks so much, here is the code:

 

<script type="text/javascript" src="jquery-1.6.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("form#filter_form").submit(function() {  
    // we want to store the values from the form input box, then send via ajax below  
    var basket   = $('#basket').attr('value');  
    var foot     = $('#foot').attr('value');
    var base     = $('#base').attr('value');
    var soccer   = $('#soccer').attr('value');
        $.ajax({  
            type: "POST",  
            url: "blogfilter.php",  
            data: "basket="+ basket +"& foot="+ foot +"&base="+ base +"&soccer="+ soccer,  
            success: function(){  
                $('#filtered_list').load('blogfilter.php');  
  
            }  
        });  
    return false;  
    });  
});  
            </script>

 

blogfilter.php is the page that contains the PHP code to display the list, and also retrieves the POST values.  And '#filtered_list' is the name of the <div> field that I am trying to load the content (from blogfilter.php) into.

 

So the questions I have are:

 

1.  Anyone know why the load() function is not working on success of the ajax() call?

    NOTE:  I want to load the content of blogfilter.php INTO the filtered_listn<div> field

2.  Any idea why the data is displaying in the URL as if I were using the GET method, when I am using POST?

 

Thanks so much, hopefully I can finally figure this out with some help!!

 

MOD EDIT: code tags added.

[uconnkid3219]

Forgot to clarify... if it makes any difference.. 'basket', 'foot', 'base', and 'soccer' are the names/ids of the 4 checkboxes (labeled basketball, football, baseball, and soccer).  And the value of each of the checkboxes, when checked obviously, is "1".

 

And lastly, loading the content of blogfilter.php should not be an issue with anything in the blogfilter.php coding... because I made code as simple as possible for testing purposes and I made sure that it outputs a statement regardless of whether POST data is set:

 

For clarity... the code from blogfilter.php that retrieves the POST data is:

 

"if(isset($_POST['basket']))

{

    echo "POST['basket'] is set";

}

else

{

    echo "POST['basket'] not set";

}"

 

So even if there were an error in posting/retrieving the data, there should be an output saying "POST['basket'] not set".

 

So I assume the issue must be in the actual load() code itself?

 

[uconnkid3219]

I apologize for a third consecutive post... just trying to narrow down any responses that I may get that I've already tried (since I have done a lot of searching on Google and on here to try solving the problem before posting).  If it were possible to edit posts on here, then I would have done that but instead I have to make consecutive posts.

 

But just so you guys know... I did originally try the following code:

 

"success: function(html){ 

    $('#filtered_list').html(html);"

 

and

 

"success: function(html){ 

    $('#filtered_list').append(html);

 

and as a last ditch effort after trying .html, .append, and .load... I tried a combination (lol):

 

"success: function(){

    $('#filtered_list').load(html('blogfilter.php'))"

 

Just wanted to mention that, so you guys know that I did try the html() function and to provide an idea of some of the many attempts I have made at trying to find the solution.

[Pikachu2000]

When posting code, enclose it within the forum's

 . . . 

BBCode tags.

[uconnkid3219]

I apologize, Pikachu.  Thank you for the assistance!  No one has any idea how I could go about this yet, huh?  I was afraid it might be very simple and I was just making a dumb mistake by overlooking something or whatever.  I guess that's not the case though lol!