First of all, excuse me for my level of english and for beign baerly new on this.
I have this, it is a modal with a 2 gridsviews, a textbox and three buttons as you can see. The table i am hidding has a list of information from a sql data base.
Whenever i click on a function inside a modal, for example a button or a row, cause i made possible to click on a row, the modal dissapears and crashes itself, like this.
ASPX Modal
<div class="modal fade" id="mymodal" 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">×</button> <h4 class="modal-title">Monthly Member Payment Detail </h4> </div> <div class="modal-body"> <asp:HiddenField ID="hdId" runat="server" /> <asp:HiddenField ID="hdScrollPosition" runat="server" /> <asp:HiddenField ID="hdIndexToSelect" runat="server" Value="-1" /> <asp:HiddenField ID="hdIndexSelected" runat="server" Value="-1" /> <asp:HiddenField ID="hdListCust" runat="server" Value="nada" /> <div class="mainDiv"> <div style="display: table-row; height: 30px;"> <asp:Label ID="Label1" runat="server">Buscar: </asp:Label> <asp:TextBox ID="txtToSearch" runat="server" Style="height: 25px;" OnTextChanged="onChangedText" AutoPostBack="true"></asp:TextBox> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Img/searchImg.png" CssClass="custImgBtn" OnClick="onBtnSearch" /> </div> <div class="custDiv" style="width: 45%"> <div id="dvdScroll" class="tableFixHead" onscroll="setScrollPosition(this.scrollTop);"> <asp:GridView ID="tableToSelect" runat="server" CssClass="tableFixHead" OnRowDataBound="tableToSelectRowDataBound" OnSelectedIndexChanged="OnToSelectIndexChanged"> <RowStyle CssClass="defaultRowStyle" /> </asp:GridView> </div> </div> <div class="custDiv" style="width: 10%"> <asp:LinkButton CssClass="custButAdd" ID="btnAdd" runat="server" Width="100%" OnClick="btnAdd_Click"> <asp:Image ID="Image1" runat="server" ImageUrl="~/Img/SwipeRightBlack.png" BackColor="Transparent" /> <br /> <asp:Label ID="Label5" runat="server" Text="Añadir"></asp:Label> </asp:LinkButton> <asp:LinkButton CssClass="custButRemove" ID="btnRemove" runat="server" Width="100%" OnClick="btnRemove_Click"> <asp:Image ID="Image2" runat="server" ImageUrl="~/Img/SwipeLeftBlack.png" BackColor="Transparent" /> <br /> <asp:Label ID="Label2" runat="server" Text="Eliminar"></asp:Label> </asp:LinkButton> </div> <div class="custDiv" style="width: 45%"> <div class="tableFixHead"> <asp:GridView ID="tableSelected" runat="server" CssClass="tableFixHead" AutoGenerateColumns="False" ShowHeaderWhenEmpty="True" OnRowDataBound="tableSelectedRowDataBound" OnSelectedIndexChanged="OnSelectedIndexChanged"> <RowStyle CssClass="defaultRowStyle" /> <Columns> <asp:BoundField HeaderText="Nombre Cliente" DataField="Nombre Cliente" /> <asp:BoundField HeaderText="Nombre Contacto" DataField="Nombre Contacto" /> <asp:BoundField HeaderText="E-Mail" DataField="E-Mail" /> <asp:BoundField HeaderText="ID" DataField="ID" /> </Columns> </asp:GridView> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-flat toolbtn" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>C#
protected void tableToSelectRowDataBound(object sender, GridViewRowEventArgs e) { e.Row.Cells[3].Visible = false; if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes["onclick"] = "ToggleOnRowClick('"+e.Row.Cells[3].Text+"',this);"; e.Row.Attributes["style"] = "cursor:pointer"; } } protected void OnToSelectIndexChanged(object sender, EventArgs e) { if (hdIndexSelected.Value != "-1") { int indx = int.Parse(hdIndexSelected.Value); tableSelected.Rows[indx].BackColor = Color.White; tableSelected.Rows[indx].BorderColor = Color.DimGray; tableSelected.Rows[indx].BorderWidth = 1; hdIndexSelected.Value = "-1"; } if (hdIndexToSelect.Value != "-1") { int indx = int.Parse(hdIndexToSelect.Value); tableToSelect.Rows[indx].BackColor = Color.White; tableToSelect.Rows[indx].BorderColor = Color.DimGray; tableToSelect.Rows[indx].BorderWidth = 1; } hdId.Value = tableToSelect.SelectedRow.Cells[3].Text; tableToSelect.SelectedRow.BackColor = ColorTranslator.FromHtml("#aaaaaa"); tableToSelect.SelectedRow.BorderColor = ColorTranslator.FromHtml("#cf002d"); tableToSelect.SelectedRow.BorderWidth = 2; hdIndexToSelect.Value = tableToSelect.SelectedRow.RowIndex.ToString(); }I have more code, but I think I have put the most relevant I would love a bit of help in this, thanks in advance
Advertisement
Answer
I found the problem, i apologize because I did not present valuable information, it turns out that it is a problem with the UpdatePanel that I have, that all the content is inside it.
The problem is that every time the update panel is updated when the server is called, the body remains the same, but the default modal has the fade that makes it hide, and therefore the page remains as shown in the second image.
So I moved the modal outside the updatepanel and put another one inside the modal like this.
Would be something like this
<body> <div id="firstModal"> <asp:UpdatePanel> -- content of modal </asp:UpdatePanel> </div> <asp:UpdatePanel UpdateMode="Conditional"> -- content of the page </asp:UpdatePanel></body>And the main update panel i add a updatemode conditional, cause if not both of them will update and the problem will not be solved.
I hope this helps someone if they need it, and I know I am explaining myself badly sorry for my lack of knowledge.