I'm trying to apply the same animation to multiple TargetControlID's -- for example, in a modal dialog, I would like to have a cancel button and a little "x" graphic in the upper right, either of which closes the dialog.
Seems pretty inelegant to write two identical animations, one for each of these targets. I'd like to have one <AnimationExtender> and apply it to two controls.
Know what I mean? Any ideas?
Sounds like you want to use UpdateProgress control. It can be connected to an UpdatePanel for whatever buttons you have there.
(Or maybe I misunderstand you)
The animation extender adds (VIA JavaScript) a click handler to the target control to start the animation. One simple way to do what you're trying to do would be by simulating a click on the target control whenever your second control is clicked. The AjaxControlToolkit includes a function that can help you do this.
Add this javascript to your page. Set 'onclick' of your second control to call this function:
function secondControlClick() {
$common.tryFireEvent(yourtargetcontrol, 'click');
}
Let me know how this works out for you.
Gabriel
... Two years later...
So the trick is in changing the TargetControlId property of the animation as you guessed. While it's not as easy as jQuery's $["#MyControl"].hover(function {}); syntax it can be done.
There's a couple of hidden properties on the javascript objects that you need to use. The _onHoverOver, _animation, and _target properties, specifically.
For example let's say that you have a button that you'd like to resize if somebody hovers over it, you'd need to create your animation extender and a couple of javascript calls that you reference in your onmouseover event:
<ajaxToolkit:AnimationExtender id="aeAnimateClaimButtons"
runat="server" BehaviorID="showHover" TargetControlID="ctlNonExistent" >
<Animations>
<OnHoverOver>
<Sequence Duration=".4">
<Resize Width="500" Height="100" Unit="px" />
</Sequence>
</OnHoverOver>
<OnHoverOut>
<Sequence Duration=".4">
<Resize Width="200" Height="100" Unit="px" />
</Sequence>
</OnHoverOut>
</Animations>
</ajaxToolkit:AnimationExtender>
Then you'd need to create your functions:
<script type="text/javascript">
function hoverOverButton(senderId) {
var ae = $find("aeAnimateClaimButtons");
ae._onHoverOver._animation._target = $get(senderId);
ae._onHoverOver.play();
}
function hoverOutButton(senderId) {
var ae = $find("aeAnimateClaimButtons");
ae._onHoverOut._animation._target = $get(senderId);
ae._onHoverOut.play();
}
</script>
Then your button:
<input type="button" onmouseover="hoverOverButton(this)" onmouseout="hoverOutButton(this)" />
A word of caution here. The ctlNonExistent thing will probably make your page throw an exception. This is just an example to demonstrate the principle. Also I don't know if the _variables will end up disappearing. They don't seem like public API stuff to me.
Related
I'm trying to use the onclickserver on ASP.net to do something when the user clicks on a button but when I click the button nothing happens.
I really can't see what I'm doing wrong.
Here is the button:
<button id="BttnLead" class="bttnBlck" runat="server" onserverclick="BtnLead_OnClick">Lead</button>
And here the event I'm trying to use:
protected void BtnLead_OnClick(object sender, EventArgs e){}
Thank you.
I would bet it has to do with failed validation somewhere on the page, as #kman pointed out in a comment above. Are you using any <asp:FieldValidator/> controls anywhere on the page? If so, and they're not being handled correctly, all you would need to do to cause this button's postback to be triggered is to add the CausesValidation="false" property to the <button> control. This would have the button avoid the validation code that is (if it's the issue, which I really think it is) inevitably failing and thus never reaching the handler method.
P.S. It should be noted that you do NOT have to use an ASP.NET control (i.e. <asp:Button>) and the pure HTML <button> control with the runat="server" property renders a server side control just the same. However, if you're in the ASP.NET world anyway and you have access to these controls, they do provide some benefit that is nice; but that's a different conversation.
I'm writing an application in C#. I would like to replace the value for the TEXT property after the user clicks (focuses) on a textbox. I would like to set the TEXT value to be blank instead of the words "ENTER NAME HERE" when they click to edit the textbox.
Front-end:
<asp:TextBox Text="ENTER NAME HERE" OnClick="MyTextboxID_OnClick" ID="MyTextboxID" runat="server"></asp:TextBox>
Code-behind:
protected void MyTextboxID_OnClick(object sender, EventArgs e)
{
MyTextboxID.Text = "";
}
I tried to find the answer to this question but the answers didn't quite match what I wanted to do.
I was hoping C# had something similar to Javascript's "OnClick" or "OnFocus" events. I added the OnClick event to the textbox for illustration purposes. This OnClick event doesn't work.
Thank you in advance for your help!
Remember that ASP.NET is primarly server-side. Actions that run in C# require a post-back to the server. The impact of this on a page can be mitigated somewhat by using AJAX, but this is why you don't see an "OnClick" event off the ASP control.
However, you can still use the Javascript "OnClick" event. Since Javascript runs on the client, and the interaction in this instance is entirely handled on the client, you should just use that.
If you are not comfortable using Javascript, you might want to look at TextBoxWatermark server side control.
It is available NuGet.
<asp:TextBox OnClick="MyTextboxID_OnClick"
ID="MyTextboxID" runat="server">
</asp:TextBox>
<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
TargetControlID="MyTextboxID"
WatermarkText="ENTER NAME HERE"
WatermarkCssClass="watermarked" />
You should simply use the following Placeholder="Enter text here."
Option One:
<asp:Textbox id="txtName" runat="server" placeholder="Enter name here." />
Option Two:
$("#<%= txtName.ClientId %>").setAttribute('placeholder', 'Enter name here.');
$("#<%= txtName.ClientId %>").attr('placeholder', 'Enter name here.');
For the Javascript implementation, you would simply place that in your View and wrap it in: <script type="text/javascript"></script>. Those are the ideal approaches to display text which clears on focus.
You could also utilize the Tooltip. Hopefully these examples assist you. Important note, I have no issues with compatibility in IE 8 with the Placeholder. Also these approaches won't force a Postback which can occur due to Server-Side. Which would force you to either do a Postback or implement a Update Panel / Ajax to hide the Postback.
Plugin: https://github.com/mathiasbynens/jquery-placeholder
Why don't you use the place holder attribute and not have to worry about replacing the text at all. This would show when the text box is empty but disappear on focus
I've updated my .Net web application to use Framework 4.5, after the update, all the input buttons (not asp:Buttons), have stopped firing the onclick javascript code, this is only happening on those buttons that are inside a user control (.ascx).
Just for the record, user controls are neither being loaded dinamically nor inside update panels.
My buttons look like this
<input id="cb" onClick="myfunc()" type="button" value="Close" />
My user controls are included to the page as follows
<cc:actionbar id="theActionBar" runat="server"></cc:actionbar>
and the javascript function, which is also included within the user control, is
function myfunc() {
if (confirm("Before closing, please make sure you saved any changes.\nAre you sure you want to close?") == true) {
__doPostBack('theActionBar:theClose', '');
}
}
this works just fine on Framework 3.5 and previous versions.
any idea why is this happening??? or how can I solve this?? I have tried several suggestions I've found over the internet and nothing seems to work.
Thanks in advance.
.
I can't see an obvious reason, but have you considered simplifying your approach to avoid the custom javascript and hard-coded postback event reference? You can get exactly the same behaviour with an ASP.NET button's OnClientClick property:
<asp:Button runat="server" ID="btnClose" Text="Close" OnClick="btnClose_Click" OnClientClick="return confirm('Before closing, please make sure you saved any changes.\nAre you sure you want to close?')" />
Returning false from the OnClientClick code or function prevents the postback.
Switching to this approach may be preferable and may even solve your issue if it's something to do with the postback event reference.
I have this in the
<asp:TextBox ID="svv" OnClick="this.value=''" runat="server">Hello...</asp:TextBox>
OnClick="this.value=''" // On mouse click in textbox it will deleted the text.
How can I set something like
Unclick"this.defautlvalue"; // something like this.
So, when I click the control it will clear the value, if I exit from the control (for example, clicking another textbox) it will return the default value of the textbox.
Thanks
Specifically with C# .NET WebForms you have a few options.
You can go completely front-end with jquery by doing something like this:
$('selector').blur(function() {
// Make sure you do some validation so it doesn't clear everytime
$('selector').val('My Default Text');
});
Or, if you are using the AJAX Control Toolkit, you can simply use The textbox Watermark Control, which will do exactly what you are talking about just by setting a few properties.
You can also go straight javascript like #m.edmondson explain in his answer.
I think you're looking for onBlur:
<input type="text" id="fname" onblur="upperCase()">
This will call upperCase() when the user leaves the box.
You can attach to the client-side onblur event which is called when the focus of your control changes.
Also worth storing the default value in an attribute on the input so you can refer to it in blur event. Believe in ASP.NET web forms you've got to add that attribute in the code-behind though.
I have just started working with the AnimationExtender. I am using it to show a new div with a list gathered from a database when a button is pressed. The problem is the button needs to do a postback to get this list as I don't want to make the call to the database unless it's needed. The postback however stops the animation mid flow and resets it. The button is within an update panel.
Ideally I would want the animation to start once the postback is complete and the list has been gathered. I have looked into using the ScriptManager to detect when the postback is complete and have made some progress. I have added two javascript methods to the page.
function linkPostback() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(playAnimation)
}
function playAnimation() {
var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation();
onclkBehavior.play();
}
And I’ve changed the btnOpenList.OnClientClick=”linkPostback();”
This almost solves the problem. I’m still get some animation stutter. The animation starts to play before the postback and then plays properly after postback. Using the onclkBehavior.pause() has no effect. I can get around this by setting the AnimationExtender.Enabled = false and setting it to true in the buttons postback event. This however works only once as now the AnimationExtender is enabled again. I have also tried disabling the AnimationExtender via javascript but this has no effect.
Is there a way of playing the animations only via javascript calls? I need to decouple the automatic link to the
buttons click event so I can control when the animation is fired.
Hope that makes sense.
Thanks
DG
The flow you are seeing is something like this:
Click on button
AnimationExtender catches action and call clickOn callback
linkPostback starts asynchronous request for page and then returns flow to AnimationExtender
Animation begins
pageRequest returns and calls playAnimation, which starts the animation again
I think there are at least two ways around this issue. It seems you have almost all the javascript you need, you just need to work around AnimationExtender starting the animation on a click.
Option 1: Hide the AnimationExtender button and add a new button of your own that plays the animation. This should be as simple as setting the AE button's style to "display: none;" and having your own button call linkPostback().
Option 2: Re-disable the Animation Extender once the animation has finished with. This should work, as long as the playAnimation call is blocking, which it probably is:
function linkPostback() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(playAnimation)
}
function playAnimation() {
AnimationExtender.Enabled = true;
var onclkBehavior = $find("ctl00_btnOpenList").get_OnClickBehavior().get_animation();
onclkBehavior.play();
AnimationExtender.Enabled = false;
}
As an aside, it seems your general approach may face issues if there is a delay in receiving the pageRequest. It may be a bit weird to click a button and several seconds later have the animation happen. It may be better to either pre-load the data, or to pre-fill the div with some "Loading..." thing, make it about the right size, and then populate the actual contents when it arrives.
With help from the answer given the final solution was as follows:
Add another button and hide it.
<input id="btnHdn" runat="server" type="button" value="button" style="display:none;" />
Point the AnimationExtender to the hidden button so the firing of the unwanted click event never happens.
<cc1:AnimationExtender ID="aniExt" runat="server" TargetControlID="btnHdn">
Wire the javascript to the button you want to trigger the animation after the postback is complete.
<asp:ImageButton ID="btnShowList" runat="server" OnClick="btnShowList_Click" OnClientClick="linkPostback();" />
Add the required Javascript to the page.
function linkPostback() {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(playOpenAnimation)
}
function playOpenAnimation() {
var onclkBehavior = ind("ctl00_aniExt").get_OnClickBehavior().get_animation();
onclkBehavior.play();
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.remove_endRequest(playOpenAnimation)
}