Refresh Page after closing Modal Popup using jQuery

Mehram

SOLVED CLOSED ACTIVE ANSWERED
User: Mehram
Posted: on Mar 27, 2023 07:52 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3540
Sample Code: Download

Sir,

I have a model page in my page inside UpdatePanel

On click "btnSave" the data is saving but the page not refresh like fade.

For refreshing page I need to use response.redirect

This practice loss all save variable values,

Please guide how to resolve this issue without redirect.

<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="ModelTitleId1">Manage Style</h4>
                </div>
                <div class="modal-body">
                    <div class="box-body table-responsive">
                        <div class="row" id="div1" runat="server" visible="true">
                            <div class="col-xs-12">
                                <asp:Label ID="lblMessageStyle" runat="server"></asp:Label>
                                <table class="table table-bordered">
                                        <tr>
                                            <td style="vertical-align: middle">ID
                                            </td>
                                            <td>
                                                <asp:TextBox ID="txtCusOrderDetId" Width="50px" runat="server" CssClass="img img-rounded" ForeColor="#666699" Style="border: 1px solid #000; color: black; background-color:aquamarine" Enabled="false"></asp:TextBox>
                                            </td>
                                        </tr>
                            <tr>
                                <td style="width: 200px;">Style #</td>
                                <td>
                                    <asp:DropDownList ID="cboStyleNo" runat="server" CssClass="chzn-select" Width="200px"></asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px;">Brand/Label</td>
                                <td>
                                    <asp:DropDownList ID="cboBrandOrLabel" CssClass="chzn-select" runat="server" Width="200px"></asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 200px;">Color(s)</td>
                                <td>
                                    <asp:DropDownList ID="cboColors" runat="server" CssClass="dropdownlist chzn-select" Width="200px"></asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px;">Fabric Code</td>
                                <td>
                                    <asp:DropDownList ID="cboFabric" runat="server" CssClass="dropdownlist chzn-select" Width="300px"></asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                    <td style="width: 100px;">Pocket Lining</td>
                                <td>
                                    <asp:DropDownList ID="cboPocketLining" runat="server" CssClass="dropdownlist chzn-select" Width="300px"></asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 140px;">Size From - To</td>
                                <td>
                                    <asp:TextBox ID="txtSizeFromTo" runat="server" Width="100px"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px;">Consumption</td>
                                <td>
                                    <asp:TextBox ID="txtConsumption" runat="server" Width="100px"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px;">UOM</td>
                                <td>
                                    <asp:DropDownList ID="cboUOM" runat="server" CssClass="chzn-select" Width="100%"></asp:DropDownList>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px;">Order Qty</td>
                                <td>
                                    <asp:TextBox ID="txtOrderQty" runat="server" Width="100px" CssClass="floattext" Style="text-align: right;"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 70px;">Add %</td>
                                <td>
                                    <asp:TextBox ID="txtCuttingPercentage" runat="server" Width="100px" CssClass="floattext" Style="text-align: right;"></asp:TextBox>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 100px;">Rate</td>
                                <td>
                                    <asp:TextBox ID="txtRate" runat="server" Width="100px" CssClass="floattext" Style="text-align: right;"></asp:TextBox>
                                </td>
                            </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="btnSave" Width="100px" runat="server" Text="Save" OnClick="btnAddDetail_Click" CssClass="btn btn-info"  />
                    <button type="button" class="btn btn-info" style="width: 100px;" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

Download FREE API for Word, Excel and PDF in ASP.Net

AjayV

0 3

Reply
ANSWER
User: AjayV
Replied: on Mar 27, 2023 11:33 PM
Modified: on Mar 31, 2023 05:34 AM
Report

Hi Mehram,

Please refer below sample.

HTML

<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'
    media="screen" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<center>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#MyPopup">
        Open Modal</button>
</center>
<div class="modal fade" id="MyPopup" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" id="ModelTitleId1">Manage Style</h4>
                </div>
                <div class="modal-body">
                    <div class="box-body table-responsive">
                        <div class="row" id="div1" runat="server" visible="true">
                            <div class="col-xs-12">
                                <asp:Label ID="lblMessageStyle" runat="server"></asp:Label>
                                <table class="table table-bordered">
                                    <tr>
                                        <td style="vertical-align: middle">ID
                                        </td>
                                        <td>
                                            <asp:TextBox ID="txtCusOrderDetId" Width="50px" runat="server" CssClass="img img-rounded" ForeColor="#666699" Style="border: 1px solid #000; color: black; background-color: aquamarine" Enabled="false"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 200px;">Style #</td>
                                        <td>
                                            <asp:DropDownList ID="cboStyleNo" runat="server" CssClass="chzn-select" Width="200px"></asp:DropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 100px;">Brand/Label</td>
                                        <td>
                                            <asp:DropDownList ID="cboBrandOrLabel" CssClass="chzn-select" runat="server" Width="200px"></asp:DropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 200px;">Color(s)</td>
                                        <td>
                                            <asp:DropDownList ID="cboColors" runat="server" CssClass="dropdownlist chzn-select" Width="200px"></asp:DropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 100px;">Fabric Code</td>
                                        <td>
                                            <asp:DropDownList ID="cboFabric" runat="server" CssClass="dropdownlist chzn-select" Width="300px"></asp:DropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 100px;">Pocket Lining</td>
                                        <td>
                                            <asp:DropDownList ID="cboPocketLining" runat="server" CssClass="dropdownlist chzn-select" Width="300px"></asp:DropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 140px;">Size From - To</td>
                                        <td>
                                            <asp:TextBox ID="txtSizeFromTo" runat="server" Width="100px"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 100px;">Consumption</td>
                                        <td>
                                            <asp:TextBox ID="txtConsumption" runat="server" Width="100px"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 100px;">UOM</td>
                                        <td>
                                            <asp:DropDownList ID="cboUOM" runat="server" CssClass="chzn-select" Width="100%"></asp:DropDownList>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 100px;">Order Qty</td>
                                        <td>
                                            <asp:TextBox ID="txtOrderQty" runat="server" Width="100px" CssClass="floattext" Style="text-align: right;"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 70px;">Add %</td>
                                        <td>
                                            <asp:TextBox ID="txtCuttingPercentage" runat="server" Width="100px" CssClass="floattext" Style="text-align: right;"></asp:TextBox>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 100px;">Rate</td>
                                        <td>
                                            <asp:TextBox ID="txtRate" runat="server" Width="100px" CssClass="floattext" Style="text-align: right;"></asp:TextBox>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            Do you wish to continue?
                            <asp:RadioButtonList ID="rblChoice" runat="server" RepeatDirection="Horizontal">
                                <asp:ListItem Text="Yes" Value="Y" />
                                <asp:ListItem Text="No" Value="N" />
                            </asp:RadioButtonList>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="btnSubmit" />
                        </Triggers>
                    </asp:UpdatePanel>
                </div>
                <div class="modal-footer">
                    <asp:Button ID="btnSubmit" Width="100px" runat="server" Text="Save" CssClass="btn btn-info" />
                    <button type="button" class="btn btn-info" style="width: 100px;" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
     $(document).ready(function () {
         $("#btnSubmit").click(function () {
             $('.modal-content').hide();
              location.reload();
          })
     })
</script>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Refresh Page after closing Modal Popup using jQuery

Company

Explore

Follow us

Contact Us