We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >
Open and shut div inside Repeater using javascript code.[Answered]
8 replies
Last post Mar 22, 2021 01:51 AM by XuDong Peng
Last post Mar 22, 2021 01:51 AM by XuDong Peng
Member
295 Points
910 Posts
Open and shut div inside Repeater using javascript code.
Mar 07, 2021 03:44 PM|peterthegreat|LINK
<td align="left" > <div id="lnkfield" > <asp:HiddenField ID="HiddenField1" runat="server" Value='<%#DataBinder.Eval(Container, "DataItem.MessageID")%>'/> <asp:LinkButton ID="LinkButton1" CommandArgument='<%#DataBinder.Eval(Container, "DataItem.MessageID")%>' CommandName="Messages" runat="server"><%#DataBinder.Eval(Container,"DataItem.Subject")%></asp:LinkButton> <span id="demo" onclick="updateParameter2(this)" class="icon-envelope-close" style=" color:Highlight"></span> <div id="DIVSent" style="display:none;"> <asp:Label ID="LabelBody" runat="server" Text='<%#DataBinder.Eval(Container, "DataItem.Body")%>'></asp:Label> </div> </div> </td>I want to be able to open div to show content and close again. I would also like to revolve the class attribute value to reflect a open, then shut div container. From icon-envelope-close to icon-envelope-open.
All-Star
53711 Points
24035 Posts
Re: Open and shut div inside Repeater using javascript code.
Mar 07, 2021 04:01 PM|mgebhard|LINK
This should be a trivial task for someone with your experience. For some strange reason you did not share the updateParameter2() function. Why??? It makes no sense. The community cannot help you with your code if you do not share the code on the forum.
All-Star
58464 Points
15788 Posts
Re: Open and shut div inside Repeater using javascript code.
Mar 07, 2021 04:34 PM|bruce (sqlwork.com)|LINK
Also id’s are supposed to be unique, but you are using fixed id’s in a loop, especially on the div you want to display. Maybe you should use a class name, or better yet a data-val, that you can use in a css selector.
Member
295 Points
910 Posts
Re: Open and shut div inside Repeater using javascript code.
Mar 07, 2021 09:17 PM|peterthegreat|LINK
All-Star
58464 Points
15788 Posts
Re: Open and shut div inside Repeater using javascript code.
Mar 08, 2021 03:38 PM|bruce (sqlwork.com)|LINK
In you markup the next element sibling is a span. So you need to navigate two siblings.
this should be trivial debugging in the browser.
Contributor
2400 Points
749 Posts
Re: Open and shut div inside Repeater using javascript code.
Mar 18, 2021 08:14 AM|XuDong Peng|LINK
Hi peterthegreat,
According to the code you provided, I did not find the icon style you used, I just used similar icons for testing.
If you need to change the icon style, you only need to modify the classList of the element accordingly.
Something like this:
<head runat="server"> <title></title> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" /> <script> function updateParameter2(th) { if (th.nextElementSibling.style.display === "none") { th.nextElementSibling.style.display = "block"; th.classList.remove('fa-eye'); th.classList.add('fa-eye-slash'); } else { th.nextElementSibling.style.display = "none"; th.classList.remove('fa-eye-slash'); th.classList.add('fa-eye'); } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:Repeater ID="Repeater1" runat="server"> <HeaderTemplate> <table style="border-collapse:collapse" border="1"> <tr> <td>Header1 </td> <td>Header2 </td> </tr> </HeaderTemplate> <ItemTemplate> <tr> <td style="text-align: left"> <div id="lnkfield"> <asp:HiddenField ID="HiddenField1" runat="server" Value='<%#DataBinder.Eval(Container, "DataItem.MessageID")%>' /> <asp:LinkButton ID="LinkButton1" CommandArgument='<%#DataBinder.Eval(Container, "DataItem.MessageID")%>' CommandName="Messages" runat="server"><%#DataBinder.Eval(Container,"DataItem.Subject")%></asp:LinkButton> <span id="demo" onclick="updateParameter2(this)" class="fa fa-eye" style="color: Highlight"></span> <div id="DIVSent" style="display: none;"> <asp:Label ID="LabelBody" runat="server" Text='<%#DataBinder.Eval(Container, "DataItem.Body")%>'></asp:Label> </div> </div> </td> <td > some text </td> </tr> </ItemTemplate> </asp:Repeater> </div> </form> </body>protected void Page_Load(object sender, EventArgs e) { DataTable dt = new DataTable(); dt.Columns.Add("MessageID"); dt.Columns.Add("Subject"); dt.Columns.Add("Body"); dt.Rows.Add("1001", "Subject01", "BodyBodyBody111"); dt.Rows.Add("1002", "Subject02", "BodyBodyBody222"); dt.Rows.Add("1003", "Subject03", "BodyBodyBody333"); Repeater1.DataSource = dt; Repeater1.DataBind(); }Result:
Best regards,
Xudong Peng
Member
295 Points
910 Posts
Re: Open and shut div inside Repeater using javascript code.
Mar 21, 2021 09:25 PM|peterthegreat|LINK
Curious to know what the ==='none' signifies in this context?
Thanks
Member
295 Points
910 Posts
Re: Open and shut div inside Repeater using javascript code.
Mar 21, 2021 09:28 PM|peterthegreat|LINK
how do you debug javascript code?
Contributor
2400 Points
749 Posts
Re: Open and shut div inside Repeater using javascript code.
Mar 22, 2021 01:51 AM|XuDong Peng|LINK
Hi peterthegreat,
This part of the code is used to determine how the current element is displayed. For example, the value of ‘none’ means that the element is not displayed, and ‘block’ means that it is displayed as a block-level element.
For more details, you could refer to related documents: https://www.w3schools.com/cssref/pr_class_display.asp
You can use F12 to open/close the developer tools, and view the running status of the code in the Console column, and you could use console.log() to print values or elements to see if the code is executed as you expect. You could also view the detailed code of the script in the Sources column, and add breakpoints to execute the code for debugging.
Here is a good article: Browser Developer Tools Tutorial: 10+ Tricks You Must Know.
Best regards,
Xudong Peng