locked
Some Issues With ModalPopupExtender and Animations RRS feed

  • Question

  • User-1193791088 posted

    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

    1. my browser debugger says this
    2. <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

    Saturday, February 10, 2018 5:14 PM

All replies