I have the requirement to be able to show/hide sections dynamically.
The table has rows called from a database, which give the titles of each object, the final cell will say Show More or something using a link button. If the user clicks show more, there is another cell which will appear underneath with the content.
The data appears in labels, and the whole thing is in a datalist. How can I make it so that each one reacts to the linkbutton? I've tried a bunch of options, but nothing comes even close to working. I'm using VB.
I have the requirement to be able to show/hide sections dynamically.
The table has rows called from a database, which give the titles of each object, the final cell will say Show More or something using a link button. If the user clicks show more, there is another cell which will appear underneath with the content.
The data appears in labels, and the whole thing is in a datalist. How can I make it so that each one reacts to the linkbutton? I've tried a bunch of options, but nothing comes even close to working. I'm using VB.
Hi andyjohston.net,
Create an id of that specifc row that show the row when user click on LinkButton. Your code would be like that, modify it according to your need.
<table class="test">
<tr>
<%--This literal control pick data from database--%>
<asp:Literal ID="ltlTitle" runat="server"></asp:Literal>
<td>
<input id="ShowMoreLinkButton" type="button" value="Show More" onclick="toggle();" />
</td>
</tr>
<tr id="HideThis">
<td>
This is show and hide row
</td>
<td>
Place here what you want to show when user click on Button
</td>
</tr>
</table>
function toggle() {
if (document.getElementById("HideThis").style.display == 'none') {
document.getElementById("HideThis").style.display = '';
} else {
document.getElementById("HideThis").style.display = 'none';
}
}
The function needs to be wrapped in a <script> tag
<table class="test">
<tr>
<%--This literal control pick data from database--%>
<asp:Literal ID="ltlTitle" runat="server"></asp:Literal>
<td>
<input id="ShowMoreLinkButton" type="button" value="Show More" onclick="toggle();" />
</td>
</tr>
<tr id="HideThis">
<td>
This is show and hide row
</td>
<td>
Place here what you want to show when user click on Button
</td>
</tr>
</table>
<script type="text/javascript">
function toggle() {
if (document.getElementById("HideThis").style.display == 'none') {
document.getElementById("HideThis").style.display = '';
} else {
document.getElementById("HideThis").style.display = 'none';
}
}
</script>
Yes, I've done that, but still have the same issue. Here is the full error:
Compilation Error
Description:
An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: BC30456: 'toggle' is not a member of 'ASP.personal_filesample_default_aspx'.
Source Error:
Line 63: <%-- <asp:LinkButton ID="LinkButton1" runat="server" CssClass="link"
Line 64: onclick="LinkButton1_Click">Show Description</asp:LinkButton>--%>
Line 65: <asp:LinkButton ID="LinkButton1" runat="server" CssClass="link"
Line 66: Width="100%" OnClick="toggle()">Show Description</asp:LinkButton>
Line 67: </td>
You need to use OnClientClick not OnClick property. ASP.NET controls use the OnClick attribute to point to the handlder in the code behind. OnClientClick is what you use to execute javascript on the page using the control.
Is it possible that it's because the whole thing is in a datalist?
Compilation Error
Description:
An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: BC30451: 'toggle' is not declared. It may be inaccessible due to its protection level.
Source Error:
Line 43: <table width="100%">
Line 44: <tr>
Line 45: <asp:Literal ID="Literal2" runat="server" Text="<%# toggle() %>"></asp:Literal> Line 46: <td colspan="4">
Line 47:
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code
appropriately.
Compiler Error Message: BC30451: 'toggle' is not declared. It may be inaccessible due to its protection level.
Source Error:
Line 43: <table width="100%">
Line 44: <tr>
Line 45: <asp:Literal ID="Literal2" runat="server" Text="<%# toggle() %>"></asp:Literal> Line 46: <td colspan="4">
Line 47:
Hi again modify your code like this.
<script type="text/javascript" language="javascript">
function toggle() {
if (document.getElementById("HideThis").style.display == 'none') {
document.getElementById("HideThis").style.display = '';
} else {
document.getElementById("HideThis").style.display = 'none';
}
}
</script>
<table class="test">
<tr>
<%--This literal control pick data from database--%>
<asp:Literal ID="ltlTitle" runat="server"></asp:Literal>
<td>
<input id="ShowMoreLinkButton" runat="server" type="button" value="Show More" onclick="toggle();" />
</td>
</tr>
<tr id="HideThis" style="display:none;">
<td>
This is show and hide row
</td>
<td>
Place here what you want to show when user click on Button
</td>
</tr>
</table>
One more thing from where you call this javascript function. Please post your complete code here or check my code again. Let me know if any query remains.
andyjohnston...
Member
94 Points
85 Posts
Dynamically Display Sections
Nov 25, 2012 01:21 PM|LINK
I have the requirement to be able to show/hide sections dynamically.
The table has rows called from a database, which give the titles of each object, the final cell will say Show More or something using a link button. If the user clicks show more, there is another cell which will appear underneath with the content.
The data appears in labels, and the whole thing is in a datalist. How can I make it so that each one reacts to the linkbutton? I've tried a bunch of options, but nothing comes even close to working. I'm using VB.
andyjohnston...
Member
94 Points
85 Posts
Re: Dynamically Display Sections
Nov 26, 2012 01:32 PM|LINK
This has been pushed down, but I'm still hoping someone can provide some assistance.
matifnadeem
Contributor
4758 Points
1130 Posts
Re: Dynamically Display Sections
Nov 27, 2012 01:09 PM|LINK
Hi andyjohston.net,
Create an id of that specifc row that show the row when user click on LinkButton. Your code would be like that, modify it according to your need.
<table class="test"> <tr> <%--This literal control pick data from database--%> <asp:Literal ID="ltlTitle" runat="server"></asp:Literal> <td> <input id="ShowMoreLinkButton" type="button" value="Show More" onclick="toggle();" /> </td> </tr> <tr id="HideThis"> <td> This is show and hide row </td> <td> Place here what you want to show when user click on Button </td> </tr> </table> function toggle() { if (document.getElementById("HideThis").style.display == 'none') { document.getElementById("HideThis").style.display = ''; } else { document.getElementById("HideThis").style.display = 'none'; } }Cheers
M Atif Nadeem
Mark as Answer if you got right thing
Read my blog | Follow me on LinkedIn
andyjohnston...
Member
94 Points
85 Posts
Re: Dynamically Display Sections
Nov 28, 2012 02:09 PM|LINK
Thank you for the reply. When I do that, I get the following error:
BC30456: 'toggle' is not a member of 'ASP.personal_filesample_default_aspx'
What could be the cause of that?
KJAK
Participant
1673 Points
478 Posts
Re: Dynamically Display Sections
Nov 28, 2012 03:00 PM|LINK
The function needs to be wrapped in a <script> tag
<table class="test"> <tr> <%--This literal control pick data from database--%> <asp:Literal ID="ltlTitle" runat="server"></asp:Literal> <td> <input id="ShowMoreLinkButton" type="button" value="Show More" onclick="toggle();" /> </td> </tr> <tr id="HideThis"> <td> This is show and hide row </td> <td> Place here what you want to show when user click on Button </td> </tr> </table> <script type="text/javascript"> function toggle() { if (document.getElementById("HideThis").style.display == 'none') { document.getElementById("HideThis").style.display = ''; } else { document.getElementById("HideThis").style.display = 'none'; } } </script>KJAK
andyjohnston...
Member
94 Points
85 Posts
Re: Dynamically Display Sections
Nov 28, 2012 04:01 PM|LINK
Yes, I've done that, but still have the same issue. Here is the full error:
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: BC30456: 'toggle' is not a member of 'ASP.personal_filesample_default_aspx'.
Source Error:
Line 63: <%-- <asp:LinkButton ID="LinkButton1" runat="server" CssClass="link" Line 64: onclick="LinkButton1_Click">Show Description</asp:LinkButton>--%> Line 65: <asp:LinkButton ID="LinkButton1" runat="server" CssClass="link"Source File: C:\Inetpub\webfiles\andyjohnston.net\personal\fileSample\Default.aspx Line: 65
What could the issue be? I can post the code if that would help.
Thanks again for you efforts!
KJAK
Participant
1673 Points
478 Posts
Re: Dynamically Display Sections
Nov 28, 2012 04:30 PM|LINK
You need to use OnClientClick not OnClick property. ASP.NET controls use the OnClick attribute to point to the handlder in the code behind. OnClientClick is what you use to execute javascript on the page using the control.
KJAK
andyjohnston...
Member
94 Points
85 Posts
Re: Dynamically Display Sections
Nov 28, 2012 10:57 PM|LINK
Again, I thank you for you patience.
Now if I run it, I get the following:
Is it possible that it's because the whole thing is in a datalist?
Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.
Compiler Error Message: BC30451: 'toggle' is not declared. It may be inaccessible due to its protection level.
Source Error:
Line 43: <table width="100%"> Line 44: <tr> Line 45: <asp:Literal ID="Literal2" runat="server" Text="<%# toggle() %>"></asp:Literal> Line 46: <td colspan="4"> Line 47:matifnadeem
Contributor
4758 Points
1130 Posts
Re: Dynamically Display Sections
Nov 29, 2012 09:18 AM|LINK
Hi again modify your code like this.
<script type="text/javascript" language="javascript"> function toggle() { if (document.getElementById("HideThis").style.display == 'none') { document.getElementById("HideThis").style.display = ''; } else { document.getElementById("HideThis").style.display = 'none'; } } </script> <table class="test"> <tr> <%--This literal control pick data from database--%> <asp:Literal ID="ltlTitle" runat="server"></asp:Literal> <td> <input id="ShowMoreLinkButton" runat="server" type="button" value="Show More" onclick="toggle();" /> </td> </tr> <tr id="HideThis" style="display:none;"> <td> This is show and hide row </td> <td> Place here what you want to show when user click on Button </td> </tr> </table>One more thing from where you call this javascript function. Please post your complete code here or check my code again. Let me know if any query remains.
Cheers.
M Atif Nadeem
Mark as Answer if you got right thing
Read my blog | Follow me on LinkedIn
andyjohnston...
Member
94 Points
85 Posts
Re: Dynamically Display Sections
Nov 29, 2012 01:26 PM|LINK
Thanks, I'm still getting toggle is not a member of asp.default_asp.
Attached is the cod for the page:
<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:AccessDataSource ID="AccessDataSource1" runat="server" ConflictDetection="CompareAllValues"
DataFile="~/App_Data/FileRequest.mdb" DeleteCommand="DELETE FROM [Part1] WHERE [id] = ? AND (([Prefix] = ?) OR ([Prefix] IS NULL AND ? IS NULL)) AND (([Primary] = ?) OR ([Primary] IS NULL AND ? IS NULL)) AND (([Subject] = ?) OR ([Subject] IS NULL AND ? IS NULL)) AND (([Description] = ?) OR ([Description] IS NULL AND ? IS NULL))"
InsertCommand="INSERT INTO [Part1] ([id], [Prefix], [Primary], [Subject], [Description]) VALUES (?, ?, ?, ?, ?)"
OldValuesParameterFormatString="original_{0}" SelectCommand="SELECT [id], [Prefix], [Primary], [Subject], [Description] FROM [Part1] ORDER BY [Prefix]"
UpdateCommand="UPDATE [Part1] SET [Prefix] = ?, [Primary] = ?, [Subject] = ?, [Description] = ? WHERE [id] = ? AND (([Prefix] = ?) OR ([Prefix] IS NULL AND ? IS NULL)) AND (([Primary] = ?) OR ([Primary] IS NULL AND ? IS NULL)) AND (([Subject] = ?) OR ([Subject] IS NULL AND ? IS NULL)) AND (([Description] = ?) OR ([Description] IS NULL AND ? IS NULL))">
<DeleteParameters>
<asp:Parameter Name="original_id" Type="Int32" />
<asp:Parameter Name="original_Prefix" Type="String" />
<asp:Parameter Name="original_Primary" Type="String" />
<asp:Parameter Name="original_Subject" Type="String" />
<asp:Parameter Name="original_Description" Type="String" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Prefix" Type="String" />
<asp:Parameter Name="Primary" Type="String" />
<asp:Parameter Name="Subject" Type="String" />
<asp:Parameter Name="Description" Type="String" />
<asp:Parameter Name="original_id" Type="Int32" />
<asp:Parameter Name="original_Prefix" Type="String" />
<asp:Parameter Name="original_Primary" Type="String" />
<asp:Parameter Name="original_Subject" Type="String" />
<asp:Parameter Name="original_Description" Type="String" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="id" Type="Int32" />
<asp:Parameter Name="Prefix" Type="String" />
<asp:Parameter Name="Primary" Type="String" />
<asp:Parameter Name="Subject" Type="String" />
<asp:Parameter Name="Description" Type="String" />
</InsertParameters>
</asp:AccessDataSource>
<script type="text/javascript" language="javascript">
function toggle() {
if (document.getElementById("HideThis").style.display == 'none') {
document.getElementById("HideThis").style.display = '';
} else {
document.getElementById("HideThis").style.display = 'none';
}
}
</script>
<asp:DataList ID="DataList1" runat="server" DataKeyField="id" DataSourceID="AccessDataSource1"
Width="100%">
<ItemTemplate>
<table style="width: 100%">
<tr>
<td style="width: 100px">
<asp:Label ID="PrefixLabel" runat="server" Text='<%# Eval("Prefix") %>'></asp:Label></td>
<td style="width: 100px">
<asp:Label ID="PrimaryLabel" runat="server" Text='<%# Eval("Primary") %>'></asp:Label></td>
<td style="width: 100px">
<asp:Label ID="SubjectLabel" runat="server" Text='<%# Eval("Subject") %>'></asp:Label></td>
<td style="width: 100px">
<asp:LinkButton ID="LinkButton1" runat="server" onclick="toggle()">LinkButton</asp:LinkButton></td>
</tr>
<tr id="HideThis" style="display:none;">
<td colspan="4">
<asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>'></asp:Label>
</td>
</tr>
</table>
<br />
</ItemTemplate>
</asp:DataList>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/NewEntry.aspx">New Entry</asp:HyperLink>
</asp:Content>