implement chanied filters/seach options in a datagrid using ajax

Let´s say I have some sort of datagri开发者_StackOverflowd and I want to add a couple chained filters like in this site: http://www.yelp.com/search?find_desc=bar&ns=1&find_loc=Minneapolis%2C+MN (sort by,distance,price etc).

Each time a user clciked in a filter link it will update the content of datagrid accordingly. But I would also need to update the links in other filters to take account of the changes. Ex: if i change the order field I need to add/update ?order_field=x in all the other filters links.

What you think is the best way to implement such scenario? Should i create a function that, when a filter link is clicked, it update the query string params of all the other filters? Or use hidden fields to record the selected option in each filter?

I would like a reusable solution if possible.

---

Since the data is loading via AJAX, there shouldn't be any links to update - at least not if you mean anchor tags <a>. You don't even need to store the filters in a hidden field.

I would store all the filters as a JSON object. Depending on how your API is set up, you may have to convert the JSON object to something usable by your API or you may even be able to pass on the JSON object directly in the $.ajax request.

This sample code assumes you have a textbox with id="price" in the markup. I intentionally left convert_filters_to_parameters blank because you didnt provide any details as to your API. jQuery will in turn serialize those parameters into a GET or POST request before it sends them out.

var filters = { 
    distance:null,
    price:null,
    sortBy:'distance'
}

//this assumes you have a textbox with id="price" 
$('#price').changed(function()
{
    filters.price = $(this).val();
    refresh_data();
});

function refresh_data()
{
    var parameters = convert_filters_to_parameters(filters);
    $.ajax('/my_api', 
            {
                //i left out a lot of properties here for brevity
                data: parameters,
                success: function(response) { alert(response); }
            });
}