Ajax / Javascript / PHP / Jquery -> Dynamic Data With Range Sliders

[Failing_Solutions]

I'm looking for some advice, and help with using range sliders as filters for data on a product-line we offer.

 

The sliders will allow users to set a min & max acceptable values for a particular section of the part.

 

An example: we have a dust boot which can expand and contract and has 2 different end sizes. All this data is stored in our sql database.

 

What I want to do is basically like Google Finance Does with their stock screener. http://www.google.com/finance/stockscreener

 

I would like to have 4 sliders.

Slider 1: Top End Size Range

Slider 2: Bottom End Size Range

Slider 3: Maximum Allowable Length

Slider 4: Minimum Allowable Size (Collapsed)

 

Below the sliders I want to display a table with all parts that match the selections as the sliders change I want it to filter out / in parts, like is done with the Google Wave-Like slider here http://demo.tutorialzine.com/2009/10/google-wave-history-slider-jquery/demo.php

 

Sorry for such a long explanation but here is where I'm a little stuck.

The sliders I understand, fairly simple with Jquery.

Getting the data from the database seems pretty simple with MYSQL / PHP

 

Now if I only had access to these 3 languages I think I could make it work, but it would require a lot of re-quering the database every time somebody mouses out on a slider and thus requiring a page refresh to display the query results.

 

That doesn't seem like the best way to do it, both the examples above simply change the page contents of the table based on the position of the slider.  I think I need to use AJAX .. but honestly that is one I haven't used before and I am very open to any help / advice / examples you can point to.

 

Thank you for your time

 

 

[nogray]

Since you are already using jquery, review this and follow some of the examples to learn how to request data using ajax

 

http://api.jquery.com/jQuery.get/

[Failing_Solutions]

Hi Nogray,

 

I appreciate you taking the time to comment. That seems like good technical information I may reference. Perhaps you know of some live examples or tutorials you can point me to?

[nogray]

The best way to learn ajax is to play with it. You can use the examples on jquery website or make your own

try to create a PHP file as the following

<?php echo "Hello Ajax"; ?>

and create another HTML file to request the content, create a script to as the following

​$.get('URL_TO_PHP_PAGE', function(txt){ alert(txt); });​​​​​​​​​​​​​​​​​

[Failing_Solutions]

Yes this was very helpful,

 

I'm at the point now where I've got one my first slider accepting the ranges from an initial query and incrementing correctly.

 

I was using thinking of using XHTML to pass the slider values to the php processing page. Which would execute the query then pass back the table with the matching products back to the page.

 

Now I'm stuck on how to pass multiple queries though the Form post / URL. I got an example from w3schools which shows passing one value via javascript function, I understand that I need to build the URL to get multiple parameters to be passed but that is proving to be a little of a challenge for me.

 

I'm going to mark this one as a resolved and appreciate your help.

 

I may need some more help but will provided specific code and a specific questions to help illustrate where I'm stuck.

 

Thanks again.