I'm using the Telerik RadSlider with jQuery 1.10.2. Currently I am capturing 2 events:
OnClientValueChanged: Fires when either the up/down arrow handles are clicked, or the drag slider is in the process of being moved.
OnClientSlideEnd: Fires when the drag slider has finished moving (but does not fire when the arrow handles are clicked).
My question is how can I detect when only the up/down arrow handles are clicked? Obviously I could just hook into the OnClientValueChanged (1st event above) and call the function hooked up to the OnClientSlideEnd (2nd event), but since I am doing calculations and saving values to the database each time the OnClientSlideEnd is triggered, it would be incredibly inefficient to do the calculations and save these values each time the slider handle is dragged.
Here is my current RadSlider setup. Please note that the handles are generated dynamically, but on inspecting the element in Chrome, it has a class of "rslHandle":
$(document).ready(function myfunction() {
$('.rslHandle, .rslHorizontal, .RadSlider').live('click', 'body', function () {
alert('arrow clicked');
});
});
<telerik:RadSlider ID="radSliderTest" runat="server" CssClass="CustomSliderLook" OnClientValueChanged="OnClientSlideChanged" OnClientSlideEnd="OnClientSlideEnd" MaximumValue="100" TrackMouseWheel="true" Width="300px" />
I've tried the outdated "live click", "on click", and just the plain ol' "click" method and none have triggered. Looking through Telerik's documentation for events on the RadSlider, I haven't been able to find anything for the arrow change events other than what is posted here. Thanks very much for your help!
Ok I found the solution. It worked by capturing the mouseup event like so:
$(".rslHandle").live('mouseup', function (e) {
alert('arrow clicked');
});
I just tried the click() jQuery way of attaching to the click event:
function pageLoad() {
$telerik.$(".rslHandle").click(function () { alert(1); });
}
which uses the Sys.Application.Load (preferred for IScriptControls like this).
or
$telerik.$(document).ready(function () {
$telerik.$(".rslHandle").click(function () { alert(1); });
});
where an anonymous function is attached in the document.ready jQuery event.
Both use the jQuery Telerik provide.
You can cascade the selectors and/or use the OnClientLoad event of the slider itself so you can know which is the HTML element where the slider is created.
I am not sure, however, why using the built-in events is not OK with you. If you need the final value, regardless of how many times the end user changes it, why not simply use the radSliderTest.SelectedValue property on the server? Ultimately, the page will be POST-ed so you can get the rest of the textboxes, dropdowns, etc., so you can use this moment to get the slider value on the server without any additional code. The slider also offers the AutoPostBack property so when the user changes the value, it can POST the page and fire the OnValueChanged server event.
Related
I have a button which causes a postback and also calls the javascript function hideInsert() which looks something like this:
function hideInsert() {
$('.hide').hide();
alert("hide");
}
All it does is hiding tablerows marked with ".hide". This works as intended but since the postback occurs, everything gets reset.
Is there anyway I can click the button to trigger the postback and then run the function, after the postback has occurred?
I have been looking at this http://msdn.microsoft.com/en-us/library/z9h4dk8y.aspx but with no success.
I would then need to press another button which would trigger the showInsert() function, which would need a similar function.
In whatever event makes most sense according to your current architecture, include:
if (Page.IsPostBack) {
ClientScript.RegisterStartupScript(this.GetType(), "HideOnPostback", "$(function() { hideInsert(); })", true);
}
Page_Load is a common place to include logic like this.
Alternatively, if you will never need whatever is classed as .hide after they postback and they are server-side controls, you could always set them to Visible = false.
I have an asp.net page with two user controls. Each of which are in separate updatepanel's One user control has three textboxes. I want to update the second updatepanel based on change of text/ focus out in first user control. How can I access both user control's textboxes, and other controls in page and update the updatepanel on change of text ?
updatepanel1
user control1
textbox1
textbox2
textbox3
updatepane2
usercontrol2
label1
Regards,
Asif Hameed
Whoa, UpdatePanels! That takes me back. Triggering UpdatePanels to "postback" asynchronously from the client has always been a bit of a kludge. The common way was to register an AsyncPostBackTrigger with a hidden button's click event and then explicitly call its click event on the client side. However, a solution with a few less layers of indirection is to call the ASP.NET AJAX library's __doPostback() JS function.
Assuming you're using jQuery (which may be far-fetched considering you're still using UpdatePanels!), you can add an event handler to the 'focusout' event of your UserControl1 to trigger the asynchronous postback of your UpdatePanel2. I would recommend putting this JS outside of one of your UpdatePanels.
$('#userControl1').on('focusout', function() {
__doPostback('UpdatePanel2UniqueId', '');
});
I dug up a good article that explains the technique of using __doPostback in a bit more detail.
Easily refresh an UpdatePanel, using JavaScript
I have written a custom control in C# (inherited from Forms.Control) and it seems to working fine, but if you press the button fast enough a problem occurs: only every other click will call the click event handler. This doesn't happen if you don't press it fast (less than once a second). The mouseUp and mouseDown handlers always get called no matter how fast you click the button.
Of course doesn't happen with the canned winform button.
I cannot use the canned button because I'm writing an application for the .net compact framework, so I need a custom control in order to make the UI more presentable. Also, I tested out my code on the full version of the .net framework, and I still have the same problem.
Any help would be greatly appreciated. Thank you!
If you are clicking rapidly enough, you are getting into DoubleClick territory.
According to above MSDN Page the order of events are:
The following series of events is raised by the control when such a user action takes place:
MouseDown event.
Click event.
MouseClick event.
MouseUp event.
MouseDown event.
DoubleClick event.
MouseDoubleClick event.
MouseUp event
If you will notice there is only one Click event per DoubleClick
For a way to disable it try looking at this MSDN Page discussing ControlStyles.
From above link:
StandardClick -- If true, the control implements the standard Click behavior.
StandardDoubleClick -- If true, the control implements the standard DoubleClick behavior. This style is ignored if the StandardClick bit is not set to true.
So try this in your controls constructor or load event:
this.SetStyle(ControlStyles.StandardClick, true );
this.SetStyle(ControlStyles.StandardDoubleClick, false);
Since SetStyle does not appear to be in the Compact Framework you could add a DoublClick Event and have it trigger the Click event Programmically like this.
YourClickEvent(sender, new MouseEventArgs(System.Windows.Forms.MouseButtons.Left,1,0,0,0));
When you click your control fast enough, it calls double click rather than click.
So, you should do something like this in your click function:
{
control.Enabled = false;
......
control.Enabled = true;
}
I need ASP.NET C# button click event to be done by the jQuery. The following sample code taken from my project in which instead of document.write('Passed') I need C# button click even to be done. How it can be done?
Sample code in which button click Button1_Click to be replaced instead of document.write
$("#slider").draggable({
axis: 'x',
containment: 'parent',
drag: function(event, ui) {
if (ui.position.left > 550) {
document.write('Passed');
$("#well").fadeOut();
} else {
}
}
I'm not sure if this is what you want, but you could trigger the 'click' event for the button on the page using jQuery. This would cause your event to fire server side, as it would if the button had been manually clicked -
$('#yourbuttonid').trigger('click');
I'm little confused here now. But This is what you want to be replace document.write
$("#Button1").click(function() {
alert("Hello world!");
});
I'm working in ASP .Net. I need to be able to click a button, disable it, have the code behind kick in and execute some functions and once they are done, enable the button again. There is no postback taking place per say in this project as we are using an UpdatePanel. About as far as I've been able to get successfully is using this syntax to disable it on the code behind Page_Load function:
btnConnect.Attributes.Add("onClick", "document.body.style.cursor = 'wait';this.disabled = true;" + ClientScript.GetPostBackEventReference(btnConnect, string.Empty) + ";");
This disables the button and allows the code behind to execute. I just can't figure out how to re-enable the button once the functions that run in the code behind are done. Is there a way to capture when the code behind is done?
Are you able to use jQuery instead? Consider a flow like this:
on click, disable button
call/POST to an ASP.NET URL as needed
re-enable the button when the URL call returns. Update page elements, redirect, alert as needed.
You can use a timeout approach after the disable:
var that = this; //pointer to button
window.setTimeout(function() { document.body.style.cursor = '';that.disabled = false; }, 1000);
This approach can be useful to prevent a double-postback too.
Or the update panel finishes it fires the Sys.WebForms.PageRequestManager.endRequest event. Add an event handler to reenable the button in there as another alternative.
In addition to above...
Yes, you are using an UpdatePanel, but a PostBack is occurring.
So, in your submit button event, after successful processing is complete, remove the attribute for onClick you added above, have you tried to enable the button in the code behind and then issue an Update() on your UpdatePanel?