Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2012-04-07
4
Medium Priority
?
800 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 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

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…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Have you created a query with information for a calendar? ... and then, abra-cadabra, the calendar is done?! I am going to show you how to make that happen. Visualize your data!  ... really see it To use the code to create a calendar from a q…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…

722 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