Question

I’m sure this is a question that is simple for most. I for some reason am having a brain blank when trying to figure this out. Worst part is, I’ve done this before on a previous project.

Anyway, what I am trying to do is the following:

I have a page that has 1 set of radio buttons, and 5 jQuery sliders. These allow the user to adjust the parameters of their search (for lose diamonds).

Below the sliders, I want to have the search results returned. As the user adjusts the sliders, I plan on using the sliders Stop event to submit the form variables to the query, to update the results.

Ok, for the life of me I can’t seem to figure out how to do this, without the entire page refreshing itself. I have tried to have the results update within a but for some reason, nothing is returned.

Here is my test site location if you want to take a look at what I am trying to do:

http://www.dawnwood.net/ds/diamonds.php

Here is a jpg trying to explain what I’m trying to do:

http://www.dawnwood.net/ds/example.jpg

I seriously appreciate any help you guys can offer. This has been bugging me for several days now. I’ve tried everything from iFrames to Ajax updates. I can’t seem to get the right combination together, so it refreshes the div with the updated results.

Thank you all again,
Derek

PS- right now there is a submit button on the page. That is there only for my testing. I plan on NOT having that there when this is actually working.

PPS-

The last bit of ajax code I tried was the following. It didn’t seem to do anything.

$(document).ready(function(){
$.post('db_query.php', $("#epds").serialize(), function(data) {
                $('#search_results').html(data);
            });
});

Answer 1

Have you tried putting your post event inside an on change event? You’ll need to determine the selector for your inputs, but whenever any of those are changed it should submit the form on your page to update the information.

$(document).ready(function(){
   $(INSERT SELECTOR FOR YOUR SLIDERS).change(function(){
       document.forms["epds"].submit();
   });
});