CODEWITHSUNDEEP
phpjavascriptjquerymysqljquery-ui
Simon Kiely
Simon Kiely

Reputation: 6050

Run MySQL query when value in JQuery slider changes

I wish to run an SQL query each time the user finished changing the position of a slider on the screen. For instance, imagine I have the slider set to 1, then I wish to retrieve all rows where the ID is 1 also. I want this information to be updated on the screen as you slide through the slider.

I am using the JQueryUI slider. Here is the code I am working from. What's the best way I can do this ?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Slider - Vertical slider</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.9.1.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.mouse.js"></script>
    <script src="../../ui/jquery.ui.slider.js"></script>
    <link rel="stylesheet" href="../demos.css">
    <script>
    $(function() {
        $( "#slider-vertical" ).slider({
            orientation: "vertical",
            range: "min",
            min: 0,
            max: 100,
            value: 60,
            slide: function( event, ui ) {
                $( "#amount" ).val( ui.value );
            }
        });
        $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
    });
    </script>
</head>
<body>

<p>
    <label for="amount">Volume:</label>
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider-vertical" style="height:200px;"></div>

<div class="demo-description">
<p>Change the orientation of the slider to vertical.  Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
</div>
</body>
</html>

Thanks a lot :)

Upvotes: 2

Views: 930

Answers (1)

PaReeOhNos
PaReeOhNos

Reputation: 4428

In your slide function, you'll want to make an ajax request to your server. The request will obviously be dependent on how your app is setup, but in the app, you can just run your query for the data you want, and have it return the result of the query back to the ajax call. Then with that response you can do whatever you like. So for example, I'd do something like the following :

slide: function(event, ui) {
    $.get({
        url: "/app/address?id=" + ui.value,
        success: function(data, status, xhr) {
            ... Handle response here ...
        }
    });
}

I agree with @vlzvl though, it's not a great idea to run this on the slide method. A change method would be far better as you'll greatly reduce the number of ajax requests as it'll only fire when you stop sliding rather than on every movement of the slider

Upvotes: 1

Related Questions