Closing a panel with animation using __doPostBack - c#

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);

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.

Run Javascript function after postback in asp.net

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.

C# event using jQuery

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

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?

Adding an onmouseover attribute to an <asp:Panel> in a <asp:Repeater>

I have a repeater containing several several panels.
I have noticed that there is no onmouseover attribute of the <asp:Panel>.
I have read that I can add the attribute to the panel by calling in the page_load:
PanelID.Attributes.Add("onmouseover", "Script to Run");
The problem is that I am in a repeater, and the PanelID is generated by asp.net like ContentPlaceHolder_ctl01_myID_0 so not only it is hard to figure out, but VS2010 does not recognise it as a proper object and throws an error on it, plus I have to attach it on every item, so I need to use a for or foreach, but I don't know what to iterate on.
Is there a way like
foreach(childcontrol in Repeater.ChildControlsISpecificallyNeedPossiblyIdentifiedBySomeID)
{
childcontrol.Attributes.Add("onmouseover", "Script to Run");
}
to do this in C# in the Page_Load eventhandler?
I want to run a client side onload, onmouseclick and onmouseout on the panels too, so I want to attach those attributes too.
Thinking outside the box, instead of specifying the onmouseover-attribute inline using ASP.NET, you can attach the javascript event listeners in javascript.
Give the panel a CSS class:
<asp:Panel CssClass="panel"></asp:Panel>
Using jQuery, the syntax to bind the event handlers would be as follows:
$(".panel").mouseover(functionToRun);
If you're not using jQuery, you'll need a bit more code, but I'm sure you get the idea.
panel is represented with div on client side, you can get the client side id by using SomePanel.ClientID however if you are referring to the triggering panel you can always use this in the JavaScript
would not put all the event handlers on each element
Add the attribute to the panel in the event of repeater onitemdatabound and find the control in that, as this event will called for each and every time the row is bound so that you dont have to call it foreach.
You may consider using ItemDataBound event.
protected void myRepeater_ItemDataBound(object source, RepeaterCommandEventArgs e) {
if(e.Item.ItemType == ListItemType.Item){
Panel pnl = (Panel)e.Item.FindControl("myPanel");
pnl.Attributes.Add"onMouseOver", "yourFnctionName()");
}
}

Categories

Resources