Solved

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

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
This video shows how to use Hyena, from SystemTools Software, to update 100 user accounts from an external text file. View in 1080p for best video quality.

739 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