Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite
1

I'm hoping someone can point me in the right direction. I'm primarily a PHP developer but I'm really trying to get my head around jquery and javascript more due to the increasing number of AJAX work requests we receive.

Basically I have a sidebar filter that works fine. It is based on 3 things. A group, category and sub category. So for example, Boots as the category, Leather (type) as a sub category and Black (colour) as tertiary filter. At the moment it works based on a GET form. However I want to use live filters instead so as they click a checkbox, it updates the results based on a query. I can write all the PHP for this but I'm struggling to get the data together by jQuery. I've looked at using jQuery .each and .change.

There are 3 groups of checkboxes and they are all based on arrays. So for example again: category[], subcategory[], tertiary[].

Thanks in advance for the help.

Some example HTML 

<input id="$ProdCatLabel" class="side_filter_checkbox" name="ProdCatFil[]" type="checkbox" value="$ProdCat">
<input id="$ProdSubCatLabel" class="side_filter_checkbox" name="ProdSubCatFil[]" type="checkbox" value="$ProdSubCat">
<input id="$BrandingLabel" class="side_filter_checkbox" name="BrandFil[]" type="checkbox" value="$Branding">

My attempts:

var prodcats = $('side_filter_prodcats[name="ProdCatFil[]"]:checked')
                   .map(function() { return $(this).val() })
                   .get()
                   .join(",");

var prodsubcats = $('side_filter_prodsubcats[name="ProdSubCatFil[]"]:checked')
                   .map(function() { return $(this).val() })
                   .get()
                   .join(",");

$.ajax({
    type: "POST",
    url: "[ENTER PHP URL HERE]",   
    data: "ProdCats=" + prodcats + "ProdSubCats=" + prodsubcats,                                        
    success: function(msg) { $(".content_area").html(msg); }
});

Am I barking up the right tree here?

share|improve this question
add comment (requires an account with 50 reputation)

1 Answer

up vote 2 down vote

Ok let's say your checkboxes have the classes category, subcategory and tertiary. You could attach a click event handler to each group that calls the function to load in the correct data, passing the checkbox value and a class or data-attribute to the function as parameters.

// Your main DOM ready function
$(document).ready(function() {

    // Checkboxes click function
    $('input[type="checkbox"]').on('click',function(){
        // Here we check which boxes in the same group have been selected
        // Get the current group from the class
        var group = $(this).attr("class");
        var checked = [];

        // Loop through the checked checkboxes in the same group
        // and add their values to an array
        $('input[type="checkbox"].' + group + ':checked').each(function(){
            checked.push($(this).val());
        });

        refreshData(checked, group);
    });

    function refreshData($values, $group){
        // Your $values variable is the array of checkbox values
        // ie. "boot", "shoe" etc
        // Your $group variable is the checkbox group
        // ie. "category" or "subcategory" etc.
        // Now we can perform an ajax call to post these variable to your php
        // script and display the returned data

        $.post("/path/to/data.php", { cats: $values, type: $group }, function(data){
            // Maybe output the returned data to a div
            $('div#result').html(data);
        });
    }

});

Here's an example of the checkbox click function in action: http://jsfiddle.net/F29Mv/1/

share|improve this answer
Thanks for your answer - i'll give it a go and report back – 30secondstosam Dec 7 '12 at 14:49
also - why use $.post rather than $.ajax ? is there a difference? – 30secondstosam Dec 7 '12 at 15:06
Theres a couple of differences, essentially $.post is just a shorthand ajax POST function. I tend to prefer to use the $.ajax function as you can define the method (GET, POST) and there's a few more paramenters. Check it out: api.jquery.com/jQuery.ajax – Steve O Dec 7 '12 at 15:12
hi - in my PHP file i'm simply just taking the get (i changed it to get rather than post) and doing this: echo $Values = $_GET['cats']; echo $Groups = $_GET['type']; this is not working and it is somehow killing the page - however i put the alert box into it and it does show me the values... – 30secondstosam Dec 7 '12 at 15:57
Hi, you don't need to keep the variable names the same. You can return whatever data you like by simply echoing out the result of the query in PHP. If you simply do echo "hello world; in your php file it will return hello world as data to your $.ajax function. – Steve O Dec 7 '12 at 17:21
show 1 more commentadd comment (requires an account with 50 reputation)

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.