locked
Bootstrap 4 Modal Needs Completely Destroyed RRS feed

  • Question

  • User-973788521 posted

    Hello, I have a Modal Window that keeps retaining data when hidden. Is there a way to completely empty the form/grid when hidden?

    Here's the code I have. It <g class="gr_ gr_166 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="166" data-gr-id="166">doesnt</g> work. I tried a dozen different things. This last try was was to clear each element. I really want a way to just say, on <g class="gr_ gr_202 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar multiReplace" id="202" data-gr-id="202">hide</g> - blow it out of existence. 

    <script type="text/javascript">
        $('#lmDocView').on('hidden', function(){
            document.getElementById('<%= ASPxFormLayout1_E2.ClientID %>').value = "";
        });
    </script>
    <div class="modal fade" id="lmDocView" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="largeModalLabelDocView">Document Viewer</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body1">
                    <h2>Paperwork Review</h2>
                    <div class="form-horizontal">
                        <hr/>
                        <dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server" ColCount="1" Width="33%" EnableTheming="True" Theme="SoftOrange">
                            <Items>
                                <dx:LayoutGroup ColCount="1" ColSpan="1" Caption="Locate Documents">
                                    <Items>
                                        <dx:LayoutItem ColSpan="1" Caption="Enter Patient ID">
                                            <LayoutItemNestedControlCollection>
                                                <dx:LayoutItemNestedControlContainer runat="server">
                                                    <dx:ASPxTextBox ID="ASPxFormLayout1_E2" runat="server">
                                                    </dx:ASPxTextBox>
                                                </dx:LayoutItemNestedControlContainer>
                                            </LayoutItemNestedControlCollection>
                                        </dx:LayoutItem>
                                        <dx:LayoutItem ColSpan="1" Caption="Enter the Patient's Date of Birth">
                                            <LayoutItemNestedControlCollection>
                                                <dx:LayoutItemNestedControlContainer runat="server">
                                                    <dx:ASPxDateEdit ID="ASPxFormLayout1_E3" runat="server">
                                                    </dx:ASPxDateEdit>
                                                </dx:LayoutItemNestedControlContainer>
                                            </LayoutItemNestedControlCollection>
                                        </dx:LayoutItem>
                                        <dx:LayoutItem ColSpan="1" Caption="" HorizontalAlign="Right" VerticalAlign="Middle" Width="75px">
                                            <LayoutItemNestedControlCollection>
                                                <dx:LayoutItemNestedControlContainer runat="server">
                                                    <dx:ASPxButton ID="btnFind" runat="server" OnClick="ASPxFormLayout1_E1_Click" Text="Find" Width="75px" AutoPostBack="False" CausesValidation="False">
                                                    </dx:ASPxButton>
                                                </dx:LayoutItemNestedControlContainer>
                                            </LayoutItemNestedControlCollection>
                                        </dx:LayoutItem>
                                    </Items>
                                </dx:LayoutGroup>
                            </Items>
                        </dx:ASPxFormLayout>
                        <br/>
                        <br/>
                        <dx:ASPxGridView ID="ASPxGridView1" Width="100%" runat="server" AutoGenerateColumns="false"
                                         Styles-AlternatingRow-BackColor="AliceBlue" KeyFieldName="Name" Theme="SoftOrange">
                            <SettingsAdaptivity>
                                <AdaptiveDetailLayoutProperties ColCount="1"></AdaptiveDetailLayoutProperties>
                            </SettingsAdaptivity>
    
                            <SettingsDataSecurity AllowDelete="False" AllowEdit="False" AllowInsert="False"/>
    
                            <EditFormLayoutProperties ColCount="1"></EditFormLayoutProperties>
                            <Columns>
                                <dx:GridViewDataTextColumn FieldName="Name" Caption="Document Name"/>
                                <dx:GridViewDataHyperLinkColumn FieldName="Name" Caption="Document Name">
                                    <PropertiesHyperLinkEdit NavigateUrlFormatString="~/Documents/{0}" Target="_blank" Text="View">
                                    </PropertiesHyperLinkEdit>
                                </dx:GridViewDataHyperLinkColumn>
                                <dx:GridViewDataTextColumn FieldName="Name" Caption="Signature" ReadOnly="True" VisibleIndex="2">
                                    <DataItemTemplate>
                                        <dx:ASPxButton ID="btnNewWindow" AutoPostBack="False" Text="Sign" CssClass="btn-danger" runat="server" OnClick="OpenWindow"/>
                                    </DataItemTemplate>
                                </dx:GridViewDataTextColumn>
                            </Columns>
    
                            <Styles>
                                <AlternatingRow BackColor="AliceBlue"></AlternatingRow>
                            </Styles>
                        </dx:ASPxGridView>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    Monday, October 15, 2018 9:14 PM

All replies

  • User839733648 posted

    Hi doctork32,

    According to your description and code, I'm sorry that I could not reproduce your problem.

    Becasue the control you've used is DevExpress which needs authorization key,

    But I would like to give you some advice.

    I've removed the controls and just added a textbox in it.

    Then I've succeed to clear the content of textbox when modal is hidden by using the following event of Bootstrap.

    $('#myModal').on('hidden.bs.modal', function (e) {
      // do something...
    })

    And the working well code is as following: 

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $(document).on("hidden.bs.modal", "#lmDocView", function () {
                    document.getElementById("textbox1").value = " ";
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#lmDocView">
                Launch demo modal
            </button>
            <div class="modal fade" id="lmDocView" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="largeModalLabelDocView">Document Viewer</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body1">
                            <h2>Paperwork Review</h2>
                            <div class="form-horizontal">
                                <asp:TextBox runat="server" ID="textbox1"></asp:TextBox>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>

    result:

    For more about the event of Bootstrap, you coud refer to: https://getbootstrap.com/docs/4.1/components/modal/#modalhide 

    Best Regards,

    Jenifer

    Tuesday, October 16, 2018 6:58 AM