ansaurus

Question

JQuery Slider Examples With Classic ASP?

Answer 1

A:

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/

Scott Hanselman 2009-05-22 08:28:50

Answer 2

+5 A:

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"&gt;&lt;/script&gt;
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  <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...)

balexandre 2009-05-22 08:42:25

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!

leen3o 2009-05-22 08:57:48

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 2009-05-22 09:01:12

how are you displaying that list of products? Table, UL, GridView (.NET) ?

balexandre 2009-05-22 09:04:05

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

leen3o 2009-05-22 09:05:55

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 2009-05-22 09:06:31

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

leen3o 2009-05-22 09:06:43

Awesome I get what you are saying... Any code examples would be VERY appreciated :)

leen3o 2009-05-22 09:07:35

answer added, hope it's ok for you. if not, drop me a line :)

balexandre 2009-05-22 13:09:31

Answer 3

+2 A:

balexandre 2009-05-22 09:45:30

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 2009-05-22 11:04:17

he asked for something easy and practical... JSON is not easy cause you have to change a lot of things in the code...

balexandre 2009-05-22 11:10:58

ansaurus

tags:

views:

answers:

JQuery Slider Examples With Classic ASP?

related questions