Solved

How to do post back and play Ajax animation on clicking a button?

Posted on 2012-04-07
4
779 Views
Last Modified: 2012-04-10
Hi

I have  an asp.net panel containing a dialoggue that flies out with an Ajax animation

The flyout animation works just fine.

When a dialogue button is pressed in the dialogue, I need to:

1) close the panel with an animation
2) then do a postback to record information on the server

The problem is the close animation only runs once. If I reload the page (or visit another page and return) the animation no longer fires. If I add OnClientClick="return false;" to the button (as suggested in the Ajax Animation example), the animation runs every time but I don't get my postback.

Can anyone suggest how I can achieve both aims?

<cc1:AnimationExtender ID="CloseAnimation" runat="server" TargetControlID="btnClose">
    <Animations>
                                <OnClick>
                                     
                                       <Sequence AnimationTarget="info">
                                     <StyleAction   Attribute="overflow" Value="hidden"/>
                                       <StyleAction Attribute="display" AnimationTarget="btnClose" Value="none"/>
                                       <Parallel Duration="1" Fps="15" >
                                           <Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" />
                                          <FadeOut />
                                       </Parallel>
                                    </Sequence >
                                </OnClick>
                                
    </Animations>
</cc1:AnimationExtender>

Open in new window


<div id="info">
        <div id="btnCloseParent" class="btnCloseParent">
            <asp:LinkButton ID="btnClose" CssClass="btnClose" runat="server" Text="X" ToolTip="Close" />
        </div>
        <h2>
            Heading </h2>
        <p>
           Html content here</p>
        <p>
        <asp:Literal ID="litHMTLTitle" runat="server" />
        <asp:Literal ID="litHMTL" runat="server" />
        <div id="ButtonHolder">
            <div id="MPButton1">
                <asp:Button ID="Button1" runat="server" />
            </div>
            <div id="MPButton2">
                <asp:Button ID="Button2" runat="server" />
            </div>
        </div>
    </div>

Open in new window

0
Comment
Question by:davnhm
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 18

Accepted Solution

by:
Jerry Miller earned 500 total points
ID: 37820071
If you put the button inside of an UpdatePanel, the button will do a postback each time according to this article:

"Using Buttons with UpdatePanel Controls

Partial-page rendering makes it possible to refresh portions of a page without a postback. UpdatePanel controls enable you to mark parts of the page that participate in partial-page rendering. By default, the behavior of controls inside an UpdatePanel control, including Button controls, is to perform an asynchronous postback instead of a postback. This refreshes only the contents of the UpdatePanel control from which the postback originates.

In addition to the scenario of a Button control that is inside an UpdatePanel control, you can use Button controls with UpdatePanel controls in the following scenarios:

    Defining a Button control that is outside an UpdatePanel control as an AsyncPostBackTrigger control for that panel. When the button is clicked, it performs an asynchronous postback and refreshes the contents of the panel.

    Defining a Button control that is inside an UpdatePanel control as a PostBackTrigger for the panel. When the button is clicked, it performs a postback even though it is inside an UpdatePanel control."


http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.aspx
0
 

Author Closing Comment

by:davnhm
ID: 37820193
It works, not perfectly, but well enough. Thanks
0
 

Author Comment

by:davnhm
ID: 37826502
On further testing, this method fails after two uses. The button eventually becomes disabled and does nothing on click.
0
 
LVL 18

Expert Comment

by:Jerry Miller
ID: 37830659
If the button is becoming disabled, there is something wrong in the code. I use buttons in UpdatePanels all of the time without any issues.
0

Featured Post

Free Backup Tool for VMware and Hyper-V

Restore full virtual machine or individual guest files from 19 common file systems directly from the backup file. Schedule VM backups with PowerShell scripts. Set desired time, lean back and let the script to notify you via email upon completion.  

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
There's a multitude of different network monitoring solutions out there, and you're probably wondering what makes NetCrunch so special. It's completely agentless, but does let you create an agent, if you desire. It offers powerful scalability …
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question