Home > Software engineering >  OnClick inside anything on Modal crash it
OnClick inside anything on Modal crash it

Time:05-13

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.

Appears Modal

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.

After OnClick

ASPX Modal

                <div  id="mymodal" tabindex="-1" role="dialog"
                    aria-labelledby="exampleModalCenterTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                    <div >
                        <div  role="document">
                            <!-- Modal content-->
                            <div >
                                <div >
                                    <button type="button"  data-dismiss="modal">&times;</button>
                                    <h4 >Monthly Member Payment Detail </h4>
                                </div>
                                <div >
                                    <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 >
                                        <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  style="width: 45%">
                                            <div id="dvdScroll"  onscroll="setScrollPosition(this.scrollTop);">
                                                <asp:GridView ID="tableToSelect" runat="server" CssClass="tableFixHead" OnRowDataBound="tableToSelectRowDataBound" OnSelectedIndexChanged="OnToSelectIndexChanged">
                                                    <RowStyle CssClass="defaultRowStyle" />
                                                </asp:GridView>
                                            </div>
                                        </div>
                                        <div  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  style="width: 45%">
                                            <div >
                                                <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 >
                                    <button type="button"  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

CodePudding user response:

Well i can only guess at this point but try to remove this:

e.Row.Cells[3].Visible = false;

and check whats happend. I think you may get IndexOutofRange Exception.

Anyway, did you tried to debug this app? Or puts some logs and check in which moment app crashes?

CodePudding user response:

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.

  • Related