Screen hangs when click on Add

Question

User-1499457942 posted

Hi

  I have below code . Screen goes blank

 protected void btnAdd_Click(object sender, EventArgs e)
        {
            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            sb.Append(@"<script type='text/javascript'>");
            sb.Append("$('#addModal').modal('show');");
            sb.Append(@"</script>");
            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AddShowModalScript", sb.ToString(), false);
        }


<asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <div class="row">
        <div class="col-md-12">
            <div class="form-group">
                <div class="table-responsive">
                    <asp:ScriptManager ID="ScriptManager" runat="server" />
                    <asp:UpdatePanel ID="upnlUsers" runat="server">
                        <ContentTemplate> 
                            <div class="btn-toolbar">
                                <asp:Button ID="btnAdd" runat="server" class="btn btn-primary" OnClick="btnAdd_Click" Text="Add New" />
                            </div>
                            <asp:GridView ID="gvwI" runat="server" AutoGenerateColumns="false" AllowSorting="true" Font-Size="9pt"
                                BackColor="LightGoldenrodYellow" BorderColor="Tan"  ForeColor="Black" GridLines="none"
                                CssClass="table table-striped"  HeaderStyle-HorizontalAlign="Center" 
                                EmptyDataText="No Records Found!" EmptyDataRowStyle-ForeColor="Red" EmptyDataRowStyle-CssClass ="gvEmpty"
                                AutoGenerateEditButton="True" onrowcancelingedit="gvwInflator_RowCancelingEdit"   
                                onrowediting="gvwInflator_RowEditing"  onrowupdating="gvwInflator_RowUpdating">
                                <AlternatingRowStyle BackColor="PaleGoldenrod" />
                                <Columns>
                                    <asp:BoundField DataField="EntryNo" HeaderText="EntryNo" InsertVisible="False" ReadOnly="True" SortExpression="No" />
                                    <asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info"
                                        ButtonType="Button" Text="Edit" HeaderText="Edit Record">
                                        <ControlStyle CssClass="btn btn-info"></ControlStyle>
                                    </asp:ButtonField>
                                    <asp:BoundField HeaderText="Ir" DataField="Ir" />
                                    <asp:BoundField HeaderText="Dr" DataField="Dr" />
                                </Columns>
                            </asp:GridView>
                        </ContentTemplate>
                        <Triggers>
                        </Triggers>
                    </asp:UpdatePanel>

                    <!-- Add Record Modal Starts here-->

Thanks
                    <div id="addModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="addModalLabel">Add New Record</h3>
                        </div>
                        <asp:UpdatePanel ID="upAdd" runat="server">
                            <ContentTemplate>
                                <div class="modal-body">
                                    <table class="table table-bordered table-hover">
                                        <tr>
                                            <td>Ir : 
                                        <asp:TextBox ID="txtIr" runat="server"></asp:TextBox>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Dr : 
                                        <asp:TextBox ID="txtDr" runat="server"></asp:TextBox>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="modal-footer">                          
                                    <asp:Button ID="btnAddRecord" runat="server" Text="Add" CssClass="btn btn-info" OnClick="btnAddRecord_Click" />
                                    <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
                                </div>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="btnAddRecord" EventName="Click" />
                            </Triggers>
                        </asp:UpdatePanel>
                    </div>
                    <!--Add Record Modal Ends here-->
                </div>
            </div>
        </div>
    </div>
</asp:Content>

Answer 1

User-1716253493 posted

Acualy, nothing happend with the js in client

Use this script to show modal by client page load, server click

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>

The server button will create the script, then after page loaded the script is executed in client.

Answer 2

User-1499457942 posted

Hi

  I have writen below code but on click nothing is working , alert message is also not getting printed

protected void btnAdd_Click(object sender, EventArgs e)

        {

            System.Text.StringBuilder sb = new System.Text.StringBuilder();

            sb.Append(@"<script type='text/javascript'>");

            sb.Append("$(function () {");

            sb.Append(" $('#addModal').modal('show');});");

            sb.Append("</script>");

            ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AddShowModalScript", sb.ToString(), false);

        }

Thanks

Answer 3

User-1716253493 posted

You can place the js in div runat="server" say id="div1", test it to show the modal in windows load

If work, then set div1 visible="false"

in click button div1.Visible = true