Ajax Filtering results using jQuery, sliders, radio, checkbox

I want a page where I will display a table, the table displayed is based on selections made on the page and is updated via ajax.

I have two range sliders on the page, one is for price and another is for size also there is checkboxes on the page which are so you can select wood, metal and / or plastic.

I need help on how I should structure the jQuery to pass all these parameters in.

I know how to do the php and how to generate a table, etc. But I am stuck with structuring the jQuery, to allow for all the various selections please any help with this is appreciated.

Update---------------------------------------------------------------

Hi

Thanks for the responses but the plan has slightly changed:

I have a ul list of materials, wood / plastic and metal,

The user should select one of these first and then the table is displayed.

When the table is displayed also a jquery ui range slider is displayed here you can change size range and the table should update based on these selections, note that the material selected would need to be resent, and the sizes selected via ajax (basically need the code to remember the material selected).

Pl开发者_如何学Cease see the code below that I have at the moment:

 

$(function() {
    $slider = $("#slider");//Caching slider object
    $size = $("#size");//Caching size object
    $slider.slider({
        range: true, // necessary for creating a range slider
        min: 0, // minimum range of slider
        max: 50, //maximimum range of slider
        values: [0, 50], //initial range of slider
        step: 0.2,
        slide: function(event, ui) { // This event is triggered on every mouse move during slide.
            $size.html('$' + ui.values[0] + ' - $' + ui.values[1]);//set value of  size span to current slider values
        },
        stop: function(event, ui){//This event is triggered when the user stops sliding.
            getDiamonds();
        }
    });
    $size.html($slider.slider("values", 0) + 'm - ' + $slider.slider("values", 1) + 'm');
});

function getTable(){
    $.ajax({
        type: "POST",
        url: "getTable.php",
        data: "szMin="+$slider.slider('values', 0)+"&szMax="+$slider.slider('values', 1)+"material="+$('#material_type').val(),
        success: function(responseText){
            $('#txtHint').html(responseText);
            $(".tablesorter").collapsible("td.collapsible", {collapse: true})
            .tablesorter({sortList: [[5,1]],headers: {0: {sorter: false}}, widgets: ['zebra'], onRenderHeader: function (){this.wrapInner("");}, debug: false})
            .tablesorterPager({container: $("#pager"), positionFixed: false});
            $("tr.first_row_class").hover(
                function () {$(this).children('td').attr("style","background-color:#FDF5CE");},function () {$(this).children('td').removeAttr("style");});
        }
    });
};
$(function() {
    $( '#selectable' ).selectable({
        stop: function() {
            var selectedLI = $('.ui-selected', this).attr("id");
            //alert(selectedLI);
        }
    }); 
}); 

after this I have ul li list (li has the id="plastic / wood or metal"

.

Once the material is selected I would like the slider to be displayed, and ajax should be posted with values from the range slider and materialType should be remembered.

Sorry if I have repeated myself just trying to be as clear as possible. Finally I would also like the jquery as efficient as possible and I may consider putting additional sliders and selections later.

Thanks for the help. Ps, there is no submit button, the updates should happen on release of the slider and or click of the materialtype.

Your question is not that clear, but I think the following function would be helpful..

    function wrapData($jqr){
        if(typeof $jqr == 'string') {$jqr = $($jqr)}
        var data = {};
        $jqr.find('select,input:text,input:hidden,textarea,input:password').each(function(){
            var $t = $(this);
            var name = $t.attr('name')||$t.attr('id');
            data[name] = $t.val();
        });
        $jqr.find('input:checkbox').each(function(){
            var $t = $(this);
            var name = $t.attr('name')||$t.attr('id');
            if($t.is(':checked')){
                data[name] = true;
            } else {
                data[name] = false;
            }
        });
        $jqr.find('input:radio').each(function(){
            var $t = $(this);
            var name = $t.attr('name')||$t.attr('id');
            if($t.is(':checked')){
                data[name] = $t.val();
            }
        });
        return data;
    }

$('#submit').click(function(){ var data = wrapData('#all_inputs')
   /* you can then send the parameters to your server */ })

Hope that helps you.