Solved

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

Posted on 2012-04-07
4
771 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
Real-time is more about the business, not the technology. In day-to-day life, to make real-time decisions like buying or investing, business needs the latest information(e.g. Gold Rate/Stock Rate). Unlike traditional days, you need not wait for a fe…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

756 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