This works partly. All elements are being copied but the slider-clone is not working/sliding. This must be because it is missing the required handles. How to add these?
Also, after the user clicks on a save button, I need to be able to reach the newly created elements server-side so I can store their values.
Would it be easier, perhaps, to use the jQuery UI slider instead? This should make creating new ones using javascript a lot easier. Have a look at the
demos of the jQuery UI Slider here to see if they fit your need.
Dont forget to click "Mark as Answer" on the post that helped you.
This credits that member, earns you a point and marks your thread as Resolved so we will all know you have been helped.
When using the jQuery UI slider it would probably be easier to create new sliders using javascript just as you said. But the functionality I am looking for needs to be implemented into an existing site. One which already uses AJAX slider allover. Using multiple
kind of sliders next to each other is not desirable.
Sometimes, you may try exploring the source code. By viewing the source in browser, you can see at the bottom of the page, there is the function $create().
bas bloemink
Member
170 Points
72 Posts
Clone sliderextender with JavaScript/jQuery
Jun 28, 2011 08:14 AM|LINK
Hi all, I need to copy (clone) a slider (sliderextender) with JavaScript. Is that possible and how can I do it?
My code currently looks very simple:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </asp:ToolkitScriptManager> <asp:Button ID="btnClone" runat="server" Text="Clone" OnClientClick="cloneNow();return false" /> <div id="orig"> <asp:TextBox ID="txtSlider" runat="server"></asp:TextBox> <asp:Label ID="lblSliderValue" runat="server" Text="Label"></asp:Label> <br /> <asp:TextBox ID="txtComment" runat="server"></asp:TextBox> <asp:SliderExtender ID="SliderExtender1" runat="server" TargetControlID="txtSlider" BoundControlID="lblSliderValue"> </asp:SliderExtender> </div> <div id="dest"> </div> <script type="text/javascript"> function cloneNow() { var elem = $('#orig').clone(true, true); elem.appendTo('#dest'); } </script> </div> </form> </body> </html>This works partly. All elements are being copied but the slider-clone is not working/sliding. This must be because it is missing the required handles. How to add these?
Also, after the user clicks on a save button, I need to be able to reach the newly created elements server-side so I can store their values.
Hope somebody can help me out! Thanks in advance!
robert.weste...
Contributor
2352 Points
399 Posts
Re: Clone sliderextender with JavaScript/jQuery
Jun 28, 2011 12:45 PM|LINK
Hi bas bloemink,
Would it be easier, perhaps, to use the jQuery UI slider instead? This should make creating new ones using javascript a lot easier. Have a look at the demos of the jQuery UI Slider here to see if they fit your need.
Hope it helps!
/Robert
Dont forget to click "Mark as Answer" on the post that helped you.
This credits that member, earns you a point and marks your thread as Resolved so we will all know you have been helped.
bas bloemink
Member
170 Points
72 Posts
Re: Clone sliderextender with JavaScript/jQuery
Jun 28, 2011 02:29 PM|LINK
Hi Robert,
When using the jQuery UI slider it would probably be easier to create new sliders using javascript just as you said. But the functionality I am looking for needs to be implemented into an existing site. One which already uses AJAX slider allover. Using multiple kind of sliders next to each other is not desirable.
Thanks for your reply!
BU XI - MSFT
All-Star
22367 Points
2704 Posts
Microsoft
Re: Clone sliderextender with JavaScript/jQuery
Jun 30, 2011 07:39 AM|LINK
Please try use $create() method,
<input type="button" onclick="create_a_new_slider();" value="CLONE" />
<div id="orig">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:SliderExtender ID="SliderExtender1" runat="server"
TargetControlID="TextBox1"
BoundControlID="TextBox2"
RaiseChangeOnlyOnMouseUp="false">
</asp:SliderExtender>
</div>
<div id="dest"></div>
<script type="text/javascript">
function create_a_new_slider() {
$('#dest')
.append($('<input name="TextBox3" type="text" id="TextBox3" />'))
.append($('<input name="TextBox4" type="text" id="TextBox4" />'));
$create(Sys.Extended.UI.SliderBehavior, { "BoundControlID": "TextBox4", "Maximum": 100, "Minimum": 0, "RaiseChangeOnlyOnMouseUp": false, "id": "SliderExtender2" }, null, null, $get("TextBox3"));
}
</script>
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
bas bloemink
Member
170 Points
72 Posts
Re: Clone sliderextender with JavaScript/jQuery
Jun 30, 2011 11:49 AM|LINK
Thanks for your reply! It works prefectly!
I have changed the $create() method a little and added values for: RailCssClass, HandleCssClass and HandleImageUrl
<script type="text/javascript"> function create_a_new_slider() { $('#dest') .append($('<input name="TextBox3" type="text" id="TextBox3" />')) .append($('<input name="TextBox4" type="text" id="TextBox4" />')); $create(Sys.Extended.UI.SliderBehavior, { "BoundControlID": "TextBox4", "Maximum": 100, "Minimum": 0, "RailCssClass": "slider_horz_entry_rail", "HandleCssClass": "slider_horz_entry_handle", "HandleImageUrl": "./images/slider_horz_default.png", "RaiseChangeOnlyOnMouseUp": false, "id": "SliderExtender2" }, null, null, $get("TextBox3")); } </script>How does someone know what to pass to the $create() method (for example if later I would like to create another kind of extender)?
BU XI - MSFT
All-Star
22367 Points
2704 Posts
Microsoft
Re: Clone sliderextender with JavaScript/jQuery
Jul 01, 2011 02:43 AM|LINK
Sometimes, you may try exploring the source code. By viewing the source in browser, you can see at the bottom of the page, there is the function $create().
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
mani153197
Member
6 Points
3 Posts
Re: Clone sliderextender with JavaScript/jQuery
Nov 06, 2012 02:10 AM|LINK
Hi im using $create() for the first time.
Sys.Application.add_init(function() {
$create(Sys.Extended.UI.CalendarBehavior, { "endDate": "Sun, 30 Sep 2012 00:00:00 GMT", "format": "yyyy-MM-dd", "id": "Grid3_New_ctl0" + len + "_CalendarExtender4", "startDate": "Sun, 01 Jan 1995 00:00:00 GMT" }, null, null, $get("Grid3_New_ctl0" + len + "_txt_t_n_overdueinterest3"));
});
I have in wrote above code in javascript in button click Function.
while debugger above code is compling sucessfull, but coming to Event it what wan not raising.
Can any of You , explain whats the problem.
Try always to reduce no of lines in Coding