C# event using jQuery - c#

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!");
});

Related

Why is my ASP.NET jQuery RadSlider arrow click event not firing?

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.

displaying message box using javascript by avoiding postback like click events. The ok, cancel buttons should only close the messgae box

i faced a situation when the user clicks on any button or linkbutton on page it should display messagebox. so i am displaying message box by addin javascript function to window.onbeforeunload.
Till now it works fine. i just want not to display the message box when the user clicks on ok or cancel button without doing any postback events. So i kept "return false" on ok and cancel button. When i click on these ok , cancel button its displaying another message box in IE as "Message from web page false".
Mmm... I question this technique in two ways:
Why do you expect 'return false' to consistently suppress this event for your ok and cancel buttons? Why would IE suppress the event based on a return value of false?
What's this business of attaching to the window.onbeforeunload event? Should you not be responding to a click event on these elements?
Honestly it sounds like IE is providing a reasonable action based on your code: the onbeforeunload event is firing, and it's displaying a messagebox of false, which is what you're returning.
Here's a couple of ideas.
a. Instead of using return false to suppress the messagebox for your ok and cancel buttons, in your callback function, use and if/then to check and see if one of these was clicked. If so, just return and do not execute the code for the modal.
b. Bind all buttons, links, and inputs to the click event, instead of onbeforeunload. Then use the check in (a) above in the same way.
Using jQuery to bind the event:
$(document).ready( function(){
$('button').on('click', function(e) {
if ((e.target.id === 'ok') || (e.target.id === 'cancel')) {
return();
} else {
// display message box
}
})
});
Hope this helps!
DISCLAIMER: I haven't actually seen the code, so this is sort of a shot in the dark.

Postback Issue With Objects In ASP.NET C#

I have some buttons on a web form in my ASP.NET project. The end user has to interact with these buttons like you would with a calculator. My issue is that ever time the end user clicks a button the page is refreshed because of postback. I tried to turn postback off like so:
if (!Page.IsPostBack)
{
protected void btn7_Click(object sender, EventArgs e)
{
const string stringNumber7 = "7";
var text = txtNumber.Text;
text += stringNumber7;
txtNumber.Text = text;
CheckMaxLength();
}
}
But then the click event will not fire. I have tried using images, image buttons, image maps. I can't get the result I want from those object either. I would like to be able to stop postback, but still have my button click event to fire like the would in a windows app. I have see some forums talking using a update panel. I am not sure how to implement an update panel correctly. I am not familiar with AJAX controls.
Does anyone know how I can accomplish want I want to do using an update panel? Or how to stop postback and still fire server side code?
If the botton is invoking local / client side JavaScript, return false within the control event attribute which will cancel the PostBack.
<button onclick="MyMethod();return false;">Click Me</button>
of if you are using a server side control:
<asp:button runat="server" OnClientClick="MyMethod();return false;" />

Closing a panel with animation using __doPostBack

I have a Custom User Control that will display messages to the user ie. Information, Error, Success. This is based off of Clickable Panel Closure I would like to add animation to the closing of the message using jquery but I am not sure how to implement this. Any suggestions? Outside of the controls being displayed my project is almost identical to the one in the link
call your own JS function and do the animations inside it. Then call the __doPostBack. Make sure to postback after the animation is done.
E.g:
Javascript:
function my__doPostBack(eventTarget, eventArgument) {
my_PanelAnimateFunction(function() {
__doPostBack(eventTarget, eventArgument);
});
}
function my_PanelAnimateFunction(callback) {
//do animation stuff
doAnimation();
//callback so that the __doPostBack is executed
callback();
}
Codebehind:
var script = String.Format("my__doPostBack('{0}', '');", myPanel.ClientID);
myPanel.Attributes.Add(HtmlTextWriterAttribute.Onclick, script);

disable/enable buttons

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?

Categories

Resources