dimanche 28 avril 2019

Bootstrap modal freezes page after modal hide

I have a button on page to open a modal:

<button data-toggle="modal" data-target="#connProductsModal" type="button" class="btn btn-brand"><%= GetGlobalResourceObject("ButtonText", "BTN_EDIT_PRODUCTS") %></button>

this opens following modal:

<div class="modal fade" id="connProductsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <asp:UpdatePanel runat="server" ID="udpEditConnProd">
                    <ContentTemplate>
                        <telerik:RadGrid ID="gvEditConnectedProducts" runat="server" AllowMultiRowSelection="True" RenderMode="Lightweight" Skin="Material" PageSize="25" BorderWidth="0" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="False">
                            <GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
                            <ClientSettings AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnableRowHoverStyle="True">
                            </ClientSettings>
                            <MasterTableView DataKeyNames="ProductId">
                                <Columns>
                                    <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
                                        <HeaderStyle CssClass="myGridHeader" />
                                        <ItemTemplate>
                                            <label class="k-checkbox k-checkbox--brand">
                                                <asp:CheckBox runat="server" ID="cbSelectedItem" AutoPostBack="True" OnCheckedChanged="ToggleRowSelection" />
                                                <span></span>
                                            </label>
                                        </ItemTemplate>
                                        <HeaderTemplate>
                                            <label class="k-checkbox k-checkbox--brand">
                                                <asp:CheckBox runat="server" ID="headerCheckbox" AutoPostBack="True" OnCheckedChanged="ToggleSelectedState" />
                                                <span></span>
                                            </label>
                                        </HeaderTemplate>
                                        <ItemStyle Width="25px" />
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn DataField="ProductCode" HeaderText="<%$ resources: PRODUCT_GRID_CODE %>" UniqueName="Address" Visible="True">
                                        <HeaderStyle CssClass="myGridHeader" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="<%$ resources: PRODUCT_GRID_NAME %>" UniqueName="first_name" Visible="True">
                                        <HeaderStyle CssClass="myGridHeader" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="ProductNumber" HeaderText="<%$ resources: PRODUCT_GRID_NUMBER %>" UniqueName="Address" Visible="True">
                                        <HeaderStyle CssClass="myGridHeader" />
                                    </telerik:GridBoundColumn>
                                </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <asp:LinkButton runat="server" ID="btnAddSelectedProducts" OnClick="btnAddSelectedProducts_OnClick" class="btn btn-brand"><%= GetGlobalResourceObject("ButtonText", "BTN_UPDATE") %></asp:LinkButton>
            </div>

        </div>
    </div>
</div>

when I press "Save" in modal it should update a grind inside a update panel with conditional update mode. The trigger is the save button in the modal.

This works...but the modal will not close after the method is done.. I use this in code behind to "hide" the modal, witch works..

 ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "$('#connProductsModal').modal('hide');", true);

but then the page (all java-script functions) freezes :/ If I skip the "hide" function everything works as it should but the modal does not close.

Any idea?




1 commentaire: