php - Run MySQL query when value in JQuery slider changes -


i wish run sql query each time user finished changing position of slider on screen. instance, imagine have slider set 1, wish retrieve rows id 1 also. want information updated on screen slide through slider.

i using jqueryui slider. here code working from. what's best way can ?

<!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 orientation of slider vertical.  assign height value via <code>.height()</code> or setting height through css, , set <code>orientation</code> option "vertical."</p> </div> </body> </html> 

thanks lot :)

in slide function, you'll want make ajax request server. request dependent on how app setup, in app, can run query data want, , have return result of query ajax call. response can whatever like. example, i'd following :

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

i agree @vlzvl though, it's not great idea run on slide method. change method far better you'll reduce number of ajax requests it'll fire when stop sliding rather on every movement of slider


Comments