JQuery Slider Examples With Classic ASP?

Question

I'm about to try and implement the JQuery slider into an old Classic ASP store, where the slider would control the price range. So have a price between say $40 and $80 and you could use the slider to go between $50 and $60...

Anyone know of any examples of using the slider with ASP in this way? I'm guessing I store the values in hidden values, and then make the page post the values async back on itself?

Thanks

balexandre · Accepted Answer · 2010-09-03T10:39:03.930

6

the slider gives you the chance to add a minimum, maximum values as well the a step...

try this code below and implement it in your ASP code

<!DOCTYPE html> 
<html> 
 <head>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
  <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

  <style type="text/css"> 
    #slider { margin: 10px; width: 300px; }
    body { font-size: 20px; }
  </style>

  <script type="text/javascript">
  $(document).ready(function(){

    $("pre a").bind("click", function() {   // show current hidden value
        alert($("#prdRange").val());
    });

    $("#slider").slider({ 
            min: 40,            // minimum amount
            max: 80,            // maximum amount
            step: ((80 - 40) / 10),     // steps ... 
            slide: function(event, ui) {    // fire this when change
                $("#lbl").text(ui.value + ",00 €");
                $("#prdRange").val(ui.value);
            }
        });
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="slider"></div>
<span id="lbl">40,00 €</span>
<input type="hidden" id="prdRange" value="40" />

<pre>min: 40 Euros, max: 80 Euros, <a href="#">range chosen</a></pre>

</body>
</html>

all you have to do is change the values with the asp value when you load the page like

$("#slider").slider({ 
        min: <%= ProductMinValue %>,                    // minimum amount
        max: <%= ProductMaxValue %>,                    // maximum amount
        step: <%= ProductStepValue %>,     // steps ... 
        slide: function(event, ui) {    // fire this when change
            $("#lbl").text(ui.value + ",00 €");
            $("#prdRange").val(ui.value);
        }
    });

see this code live in JSBin (you can edit it by adding /edit to the URL...)

edited Sep 03 '10 at 10:39

answered May 22 '09 at 08:42

balexandre

73,608
45
233
342

Thats fantastic! Thanks for the code.. Can I be cheeky and ask you one more thing, how would I async post this value back to the page? I know its easy with .NET, but when then users move the slider(s) I need it to async post the value(s) to the SQL Query so it knows what products to show? Again thanks for taking the time to post up the code sample! – YodasMyDad May 22 '09 at 08:57
let me try if what you say is: you want to present a list of products based on that output value on the fly (ajaxing it)? – balexandre May 22 '09 at 09:01
how are you displaying that list of products? Table, UL, GridView (.NET) ? – balexandre May 22 '09 at 09:04
Yes thats correct... As they change the slider, the products on the page are filtered based on the value of the slider (Ajax)? I'm guessing I would need to implement this? http://docs.jquery.com/Ajax .. Again appreciate your help, thank you – YodasMyDad May 22 '09 at 09:05
the easiest way to accomplish this is using the jQuery LOAD method, that will load the content of a page, let's say: getProductsList.asp and you will pass as a query string the value that you get from the Slidder... That getProductsList.asp will get that query string and call the DB and produce the TABLE, UL, GridView and show it... need the code? – balexandre May 22 '09 at 09:06
Its classic ASP thats being pulled out into a table... based off a simple SQL Query.. Nothing complicated, just getting the AJAX bit / slider sorted – YodasMyDad May 22 '09 at 09:06
Awesome I get what you are saying... Any code examples would be VERY appreciated :) – YodasMyDad May 22 '09 at 09:07
answer added, hope it's ok for you. if not, drop me a line :) – balexandre May 22 '09 at 13:09

balexandre · Answer 2 · 2009-05-22T11:12:03.847

This answer is for Ajaxing the base code...

Procedure:

The output for the slider changed. It now loads a productList.asp passing the value from the slider.
The productList.asp is a simple ASP page that picks up the Query String "value" and build a table of products using that value.
Right now it only get the QueryString and populates the 4 products with that value.

Code:

slider.html

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
  <style type="text/css">
    #slider { margin: 10px; width: 300px; }
    #lbl { font-size: 22px; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){

    $("pre a").bind("click", function() {   // show current hidden value
        alert($("#prdRange").val());
    });

    $("#slider").slider({ 
            min: 40,                    // minimum amount
            max: 80,                    // maximum amount
            step: ((80 - 40) / 10),     // steps ... 
            slide: function(event, ui) {    // fire this when change
                var newValue = ui.value;
                $("#lbl").text(newValue + ",00 €");
                $("#prdRange").val(newValue);

                $("#prdList").load("productList.asp #prdTableList", { 'value' : newValue }, function(){
                   //alert("products in range of " + newValue + ",00 € loaded");
                 });
            }
        });
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="slider"></div>
<span id="lbl">40,00 €</span>
<input type="hidden" id="prdRange" value="40" />

<pre>min: 40 Euros, max: 80 Euros, <a href="#">range chosen</a></pre>

<div id="prdList"></div>

</body>
</html>

productList.asp

<%
    Dim newValue    
    newValue = Request("value") & ",00 &euro;"
%>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="prdTableList">
    <table style="width:100%;">
        <tr>
            <td style="width:50%;">Product</td>
            <td>Price</td>
        </tr>
        <tr>
            <td><a href="#">PRD 001<a></td>
            <td><%= newValue%></td>
        </tr>
        <tr style="background-color:#ccc;">
            <td><a href="#">PRD 002<a></td>
            <td><%= newValue%></td>
        </tr>
        <tr>
            <td><a href="#">PRD 003<a></td>
            <td><%= newValue%></td>
        </tr>
        <tr style="background-color:#ccc;">
            <td><a href="#">PRD 004<a></td>
            <td><%= newValue%></td>
        </tr>
    </table>
  </div>
</body>
</html>

Note: I'm only loading the #prdTableList output (load("productList.asp #prdTableList"...), and not the entire productList.asp page, so there will be no problem to have HTML tags and is a good way to debug, because all we need to do in that page is call it with the value query string like:

productList.asp?value=47

Output:

alt text http://www.balexandre.com/temp/2009-05-22_1311.png

This is bandwidth inefficient. A JSON solution would be better for that. There are definitely classic ASP JSON classes, such as http://www.webdevbros.net/2007/04/26/generate-json-from-asp-datatypes/ — Matthew Flaschen, May 22 '09 at 11:04
he asked for something easy and practical... JSON is not easy cause you have to change a lot of things in the code... — balexandre, May 22 '09 at 11:10

score 0 · Answer 3 · answered May 22 '09 at 08:28

0

Sure, just use the jQuery Slider: http://docs.jquery.com/UI/Slider or any of the sliders found with The Google. http://www.keepthewebweird.com/demo/slider/

answered May 22 '09 at 08:28

Scott Hanselman

17,712
6
74
89

JQuery Slider Examples With Classic ASP?

3 Answers3