Solved

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

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction This article shows how to use the open source plupload control to upload multiple images. The images are resized on the client side before uploading and the upload is done in chunks. Background I had to provide a way for user…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
This video explains how to create simple products associated to Magento configurable product and offers fast way of their generation with Store Manager for Magento tool.
I designed this idea while studying technology in the classroom.  This is a semester long project.  Students are asked to take photographs on a specific topic which they find meaningful, it can be a place or situation such as travel or homelessness.…

932 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now