ASP.NET AJAX Control Toolkit

Re: Slider extender, client events (get event into javascript)

Danny117 — Fri, 19 Dec 2008 15:28:40 GMT

It's not open but here's another method. Why didn't I find this yesterday when I was looking for "Slider" "javascript"

Here's method two to get the slider event into a javascript after that i'ts upto you.

$addHandler($get("txtr"), "change", updateslide);

txtr is the id of the textbox

change is the event

updateslide is the name of the javascript to call ajax will pass in an object.

<asp:TextBox ID="txtr" runat="server"></asp:TextBox>

<cc1:SliderExtender ID="SliderExtender1" runat="server" Enabled="True"

RaiseChangeOnlyOnMouseUp="false" Minimum="0" Maximum="255"

TargetControlID="txtr">

function updateslide(x) {

// what ever you want to do....

// var dec = x.target.value;

// var hex = parseInt(dec).toString(16);

// if (hex.length < 2) {

// hex = "0" + hex;

}

$addHandler($get("txtr"), "change", updateslide);

</script>

Re: Slider extender, client events

huenemeca — Fri, 05 Jan 2007 02:11:48 GMT

Thanks,
It worked great.

Re: Slider extender, client events

Garbin — Thu, 04 Jan 2007 17:01:07 GMT

Hi,

please check the following example:

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Slider Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="TheScriptManager" runat="server"></asp:ScriptManager>
    
    <asp:TextBox ID="txtSlider" runat="server"></asp:TextBox>
    <asp:Label ID="lblSliderBound" runat="server"></asp:Label>
    
    <ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server"
        TargetControlID="txtSlider" BoundControlID="lblSliderBound" BehaviorID="sliderBehavior"
        Steps="3"></ajaxToolkit:SliderExtender>
    
    <script type="text/javascript">
    <!--
        function pageLoad(sender, e) {
            var slider = $find('sliderBehavior');
            slider.add_valueChanged(onValueChanged);
        }
        
        function onValueChanged(sender, e) {
            alert('Value changed!');
        }
    //-->
    </script>
    </form>
</body>
</html>

Re: Slider extender, client events

huenemeca — Thu, 04 Jan 2007 16:32:12 GMT

Hello,

I am trying to get this to work so that I can have the slider use a AJAX call to report it's position to the system. But when I use $find('BehaviorID') I get null. I am actually using the behaviorID of the slider extender control. Can you show me an example of this working?

Also, is there any plans to add the valueChanged event to the Extender so that I can just say ValueChanged='myjavascriptFunction'? It seems like a control in the AJAX toolkit should have this sort of functionality.

Thanks,
Mike

Re: Slider extender, client events

DanNsk — Thu, 30 Nov 2006 05:27:24 GMT

I forgot to tell that i'm trying to add this script dynamically, in a Page_Load event handler of a page
so the only working solution i've found -

string script = "Sys.Application.add_init(function() {\n" +
" var slider1 = $find('" + SliderExtender1.BehaviorID + "');\n" +
" if (slider1) slider1.add_valueChanged(function() { alert('value changed!'); });\n" +
" });\n";

ScriptManager.RegisterStartupScript(Page, GetType(), "StartupValuesFunction", script, true);

Re: Slider extender, client events

Garbin — Wed, 29 Nov 2006 21:22:53 GMT

Hi,

you can give an id to the behavior using the BehaviorID property in the extender control. Then, you can write

$find('behaviorID').add_valueChanged(function() { alert('value changed!'); });

Slider extender, client events

DanNsk — Wed, 29 Nov 2006 14:54:38 GMT

I have slider extender on a page , which is bound to a hidden field, and has some textbox as an target control.
Slider extender has valueChanged event, is there any way to attach my handler to it ?
My idea was $find('controlId').add_valueChanged( function() {} ); , but doesn't work.