Some Issues With ModalPopupExtender and AnimationsRSS

1 reply

Last post Feb 13, 2018 02:48 AM by Eric Du

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

RobertH3

Member

8 Points

98 Posts

Some Issues With ModalPopupExtender and Animations

Feb 10, 2018 05:14 PM|RobertH3|LINK

On my page I have a modalpopup for page options

I have a listview that filters another listview by creating a pager that is alphabetical instead of numerical

I have a listview that displays a table - in the table I have a modal popup that display options for that row

IMPORTANT! Everything works fine

UNTIL I ADD ANIMATION TO THE Modal

then

my browser debugger says this

<input class="devtools-plaininput text-filter" value="" placeholder="Filter output" type="search" />
<input value="on" type="checkbox" /> 
<div class="message javascript log error">TypeError: n._events is undefined[Learn More] MsAjaxJs:1:56832 </div> 
<div class="cm-s-mozilla message console-api warn warn">setAnimationTarget(id) is deprecated. Use set_animationTarget(id) instead. </div> 
<div class="cm-s-mozilla message console-api warn warn"> ScriptResource.axd:416:13 </div> 
<div class="message javascript log warn">Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery-1.10.2.js:5389:28 </div>
 <div class="cm-s-mozilla message console-api warn warn">setStartValue(value) is deprecated. Use set_startValue(value) instead. </div> 
<div class="cm-s-mozilla message console-api warn warn"> ScriptResource.axd:416:13 </div> 
<div class="message javascript log error">TypeError: this._onHiding.get_animation(...) is null[Learn More]</div>

and when I select a button to display the table using the Alphabetical Pager - doesn't work

IMPORTANT

It only STOPS working when I add <OnHiding> to the Modals

            <asp:Panel runat="server" ID="PnlAccounts" CssClass="container">
                <div class="admin-page-header">
                    <div class="col-xs-1">
                        <asp:Button ID="Btn_Options" runat="server" CssClass="btn font-weight-bold btn-xl float-xs-left" Text="&#xf0e4;" ToolTip="Dashboard" />
                        <ajx:ModalPopupExtender ID="MPE_Options" runat="server" TargetControlID="Btn_Options" PopupControlID="Pnl_Options" OkControlID="Btn_Ok_Options" CancelControlID="Btn_Close_Options" BackgroundCssClass="bg-modal" >
                            <Animations>
      <OnShown>
         <FadeIn Duration="0.5" Fps="40" />
      </OnShown>
                    <OnHiding>
                        <FadeOut Duration="0.5" Fps="40" />
                    </OnHiding>
                            </Animations>
                        </ajx:ModalPopupExtender>
                        <asp:Panel ID="Pnl_Options" runat="server" CssClass="modal-ajx action" Style="display: none">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h3>ACCOUNT OPTIONS</h3>
                                    </div>
                                    <div class="modal-body">
                                        <div class="list-group">
                                            <asp:Button ID="Btn_CustomerAccounts_Summary" runat="server" Text="SUMMARY" CssClass="btn btn-secondary btn-block btn-lg" PostBackUrl="~/Admin/Company/Items/Product/Products.aspx" ToolTip="New Item" />
                                            <asp:Button ID="Btn_Register" runat="server" CssClass="btn btn-secondary btn-block btn-lg" Text="REGISTER NEW" OnClick="BtnCreateNewAccount_Click" CommandArgument="0" />
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <asp:Button ID="Btn_Close_Options" runat="server" Text="CLOSE" CssClass="btn btn-secondary btn-lg" />
                                        <asp:Button ID="Btn_Ok_Options" runat="server" Text="CLOSE" CssClass="btn-modal" />
                                    </div>
                                </div>
                            </div>
                        </asp:Panel>
                    </div>
                    <div class="col-xs-10"><span class="heading">Customer Accounts</span></div>
                    <div class="col-xs-1">
                        <asp:Button ID="BtnCreateNewAccount" runat="server" Text="&#xf067;" CssClass="float-xs-right btn btn-xl font-weight-bold mr-1" ToolTip="Add Or Create A New Account" OnClick="BtnCreateNewAccount_Click" />
                    </div>
                </div>

                <asp:ListView ID="ListView_PagerTop" runat="server" DataSourceID="SqlData_Paging">
                    <ItemTemplate>
                        <td>
                            <asp:Button Text='<%# Eval("AccountName") %>' runat="server" ID="AccountPaging" CommandArgument='<%# Eval("AccountName") %>' OnClick="AccountPaging_Click" CssClass="btn btn-primary" />
                        </td>
                    </ItemTemplate>
                    <LayoutTemplate>
                        <table runat="server" id="itemPlaceholderContainer" class="table-pager">
                            <tr runat="server" id="itemPlaceholder"></tr>
                        </table>
                    </LayoutTemplate>
                </asp:ListView>

                <asp:ListView ID="ListView_Accounts" runat="server" DataSourceID="SqlData_Accounts" DataKeyNames="AccountId">
                    <ItemTemplate>
                        <tr class="data-table-row">
                            <td>
                                <asp:Button ID="Btn_Account_Actions" runat="server" Text="&#xf142;" CssClass="btn btn-primary btn-md" />
                                <ajx:ModalPopupExtender ID="MPE_Actions_Accounts" runat="server" TargetControlID="Btn_Account_Actions" PopupControlID="Pnl_AccountActions" OkControlID="Btn_Ok_AccountActions" CancelControlID="Btn_Close_AccountActions" BackgroundCssClass="bg-modal" >
                                    <Animations>
      <OnShown>
         <FadeIn Duration="0.5" Fps="40" />
      </OnShown>

                                    </Animations>
                                </ajx:ModalPopupExtender>
                                <asp:Panel ID="Pnl_AccountActions" runat="server" CssClass="modal-ajx action" Style="display: none">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h3>CUSTOMER ACCOUNT ACTIONS</h3>
                                            </div>
                                            <div class="modal-body">
                                                <div class="popup-group-row">
                                                    <label for="Lab_Popup_AccountId">Account ID:</label>
                                                    <asp:Label Text='<%# Eval("AccountId") %>' runat="server" ID="Lab_Popup_AccountId" />
                                                </div>
                                                <div class="popup-group-row">
                                                    <label for="Lab_Popup_AccountName">Account Name:</label>
                                                    <asp:Label Text='<%# Eval("AccountName") %>' runat="server" ID="Lab_Popup_AccountName" />
                                                </div>
                                                <asp:Button ID="BtnManageAccount" runat="server" CssClass="btn btn-primary btn-block btn-xl" PostBackUrl='<%# Eval("AccountId","~/Admin/Customer/Account/Manage.aspx?AccountId={0}") %>' Text="&#xf0ad;&nbsp;MANAGE" />
                                                <asp:Button ID="BtnPrintAccount" runat="server" Text="&#xf02f;&nbsp;PRINT" CssClass="btn btn-primary btn-block btn-xl" PostBackUrl='<%# Bind("AccountId","~/Admin/Customer/Account/Print.aspx?AccountId={0}") %>' />
                                            </div>
                                        <div class="modal-footer">
                                            <asp:Button ID="Btn_Close_AccountActions" runat="server" Text="CLOSE" CssClass="btn btn-secondary btn-xl" />
                                            <asp:Button ID="Btn_Ok_AccountActions" runat="server" Text="CLOSE" CssClass="btn-modal" />
                                        </div>
                                        </div>
                                    </div>
                                </asp:Panel>
                            </td>
                            <td>
                                <asp:Label Text='<%# Eval("AccountId") %>' runat="server" ID="AccountIdLabel" />
                            </td>
                            <td>
                                <asp:Label Text='<%# Eval("AccountName") %>' runat="server" ID="AccountNameLabel" />
                            </td>
                            <td>
                                <asp:Label Text='<%# Eval("AccountType") %>' runat="server" ID="AccountTypeLabel" />
                            </td>
                            <td>
                                <asp:Label Text='<%# Eval("CustomerType") %>' runat="server" ID="CustomerTypeLabel" />
                            </td>
                            <td>
                                <asp:Label Text='<%# Eval("AccountStatus") %>' runat="server" ID="AccountStatusLabel" />
                            </td>
                            <td>
                                <asp:Label Text='<%# Eval("CreditRating") %>' runat="server" ID="CreditRatingLabel" /></td>
                            <td>
                                <asp:Label Text='<%# Eval("PriceLevel") %>' runat="server" ID="PriceLevelLabel" />
                            </td>
                        </tr>
                    </ItemTemplate>
                    <LayoutTemplate>
                        <table runat="server" id="itemPlaceholderContainer" class="data-table">
                            <tr runat="server" class="thead-primary-faded">
                                <th></th>
                                <th runat="server">Acct Id</th>
                                <th runat="server">Name</th>
                                <th runat="server">Account Type</th>
                                <th runat="server">Customer Type</th>
                                <th runat="server">Status</th>
                                <th runat="server">Credit Rating</th>
                                <th runat="server">Price Level</th>
                            </tr>
                            <tr runat="server" id="itemPlaceholder"></tr>
                        </table>

                    </LayoutTemplate>
                </asp:ListView>
                <asp:ListView ID="ListView_PagerBottom" runat="server" DataSourceID="SqlData_Paging">
                    <EmptyDataTemplate>
                    </EmptyDataTemplate>
                    <ItemTemplate>
                        <td>
                        <asp:Button Text='<%# Eval("AccountName") %>' runat="server" ID="AccountPaging" CommandArgument='<%# Eval("AccountName") %>' OnClick="AccountPaging_Click" CssClass="btn btn-primary" />
                            </td>
                    </ItemTemplate>
                    <LayoutTemplate>
                        <table runat="server" id="itemPlaceholderContainer" class="table-pager">
                            <tr runat="server" id="itemPlaceholder"></tr>
                        </table>
                    </LayoutTemplate>
                </asp:ListView>
                <asp:SqlDataSource ID="SqlData_Paging" runat="server" ConnectionString='<%$ ConnectionStrings:DefaultConnection %>' SelectCommand="SELECT DISTINCT SUBSTRING(AccountName, 1, 1) AS AccountName FROM CuAccount" />

I have Toolkit 18.1 using Firefox

I get the same issue in Chrome and IE as well - Animations work fine, but then all buttons on the page not connected to a modal do not work

So this tells me that some of the code used is deprecated and should be updated, but there is an issue with the OnHiding animation

BEFORE you say my code does not have a scriptmanager - It is on the MasterPage - I wouldn't be able to post this issue if it didn't work - which it wouldn't work if I Didn't have a scriptmanager - That is Not the issue

- Reply
Eric Du
Contributor

6720 Points

2715 Posts

Re: Some Issues With ModalPopupExtender and Animations

Feb 13, 2018 02:48 AM|Eric Du|LINK

Hi RobertH3,

According to your description, this issue is very oddly, please try use AnimationExtender to realize the animations, for more details, please check this tutorial:

Animated AJAX ModalPopupExtender Modal Popup using AnimationExtender example in ASP.Net:

http://www.aspforums.net/Threads/438652/Animated-AJAX-ModalPopupExtender-Modal-Popup-using-AnimationExtender-example-in-ASPNet/

if it still not work, i think you could use some jquery plugin to realize this effect:

Like jQueryUI dialog: https://jqueryui.com/dialog/

Like BootStrap modal: https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Like jQuery Fade function: https://www.w3schools.com/jquery/jquery_fade.asp

Best Regards,

Eric Du

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.