jqueryUI Slider: Setting minimum and maximum values in range from DB

I have a jQueryUI slider on my website that deals with price range.

I have a products table in mysql that has various entries.

I am using the slider to filter the results, but I need to set the min开发者_StackOverflow中文版imum and maximum prices from the records in my database.

Should I just generate (with php) hidden fields in my html that contain the minimum and maximum and then use jQuery to obtain them? Or is there a better way of achieving this, maybe using AJAX?

Thanks

---

Either of the ways you have described would get the job done, I would probably go for the hidden fields.

Another option might be to have your php put the values into your javascript file directly.

you just need to change the header in your php file to get the output to be read as javascript by the browser.

this would do it.

Header("content-type: application/x-javascript");

you can the set the values right in the javascript via your php (as in any other php file).

Include it on your page as you would any other javascript file and job done, its simple and dynamic. :)

---

If you care about accessibility, the safest way would be to provide the form element, then hide it with Javascript so users without javascript can still use your website. You can then add an AJAX update function.

If the page is dynamic, you should use the form.

---

Get our results using a php script and output it as JSON, like this:

<?php

$sql = 'SELECT MAX(price) as max, MIN(price) as min FROM products';

// .. do query, get row ...

echo(json_encode(array(
    "max"=>$max,
    "min"=>$min
)));

?>

then use $.getJSON or $.ajax (jQuery) to get the results and use them in your slider like this:

<script type="text/javascript">
$(document).ready(function() {
    var max, min;
    $.ajax({
        url: "script.php",
        dataType: "json",
        async: false,
        success: function(data) {
            data = data[0];
            max = data.max;
            min = data.min;
        }
    });

    $.slider({
        max: max,
        min: min
    });
});
</script>

this is quickly written and untested, but i hope your get the all around idea ;)