Link to home
Start Free TrialLog in
Avatar of Stefan Motz
Stefan MotzFlag for United States of America

asked on

Hide row when retrieving data from database

The page below is supposed to show the Message recordset when the visible table row is clicked.
It's working fine when I remove the table header, so I commented it out. Is there a way to modify the javascript so that I can also sort the data by clicking the table header?
Thank you for your help
<!-- #include virtual="/Connections/Authentication.asp" -->
<%
if request.querystring("sort")<>"" then
   sort=request.querystring("sort")
else
   sort="ID desc"
end if

set rs = Server.CreateObject("ADODB.Recordset")
rs.CursorLocation = 3  ' adUseClient

rs.Open "SELECT * FROM HR_Letters ORDER BY " & sort & " " & request.querystring("order"), conn

rs.PageSize = 10
intPageCount = rs.PageCount

Select Case Request("Action")
	case "<<"
		intpage = 1
	case "<"
		intpage = Request("intpage")-1
		if intpage < 1 then intpage = 1
	case ">"
		intpage = Request("intpage")+1
		if intpage > intPageCount then intpage = IntPageCount
	Case ">>"
		intpage = intPageCount
	case else
		intpage = 1
end select
%>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/Scripts/Styles.css" type="text/css" />
<script type="text/javascript" src="/jquery/jquery-1.8.2.min.js"></script>

<script type="text/javascript">
$(function() {
  $('tr:odd acronym').hide();
  $('tr:even').click(function() {
    if (!$(this).next().find('acronym').is(':visible')) {
      $('tr:odd acronym').hide();
    }
    $(this).next().find('acronym').slideToggle();
  });
});

</script>
</head>
<body>

<table align="center" class="border">
<!--
<tr>
<td >
<%if request.querystring("order") = "DESC" then%>
<a href="Disability1.asp?sort=First_Name&order=ASC">First Name</a>
<%else%>
<a href="Disability1.asp?sort=First_Name&order=DESC">First Name</a>
<%end if%>
</td>
<td >
<%if request.querystring("order") = "DESC" then%>
<a href="Disability1.asp?sort=Last_Name&order=ASC">Last Name</a>
<%else%>
<a href="Disability1.asp?sort=Last_Name&order=DESC">Last Name</a>
<%end if%>
</td>
<td align="center" class="hand">
<%if request.querystring("order") = "DESC" then%>
<a href="Disability1.asp?sort=Emp_Id&order=ASC">Emp#</a>
<%else%>
<a href="Disability1.asp?sort=Emp_Id&order=DESC">Emp#</a>
<%end if%>
</td>
</tr>
//-->
<%
rs.AbsolutePage = intPage
For intRecord = 1 To rs.PageSize
%>


<tr><td class="border"><%=rs("First_Name")%></td><td class="border"><%=rs("Last_Name")%></td><td class="border"><%=rs("Emp_Id")%></td></tr>

<tr><td class="border" colspan="3"><acronym><%=rs("Message")%></acronym></td></tr>

<%
rs.MoveNext
If rs.EOF Then Exit For
Next
rs.Close
set rs = Nothing
Conn.Close
set Conn = Nothing
%>
</table>
 

 </body>
 </html>




    

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Stefan Motz

ASKER

I did some research and I found another way it can be done. This way I'm able to display the table header and sort the data:
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function($) {
			$('#accordion').find('.accordion-toggle').click(function(){
	
				//Expand or collapse this panel
				$(this).next().slideToggle('fast');
	
				//Hide the other panels
				$(".accordion-content").not($(this).next()).slideUp('fast');
	
			});
		});
	</script>
	<style>
		.accordion-toggle {cursor: pointer; margin: 0;}
		.accordion-content {display: none;}
	</style>
</head>
<body>
<div id="accordion">
<table border="1">
<tr class="accordion-toggle"><td>Accordion 1</td></tr>
<tr class="accordion-content"><td>Cras malesuada ultrices augue molestie risus.</td></tr>
<tr class="accordion-toggle"><td>Accordion 1</td></tr>
<tr class="accordion-content"><td>Cras malesuada ultrices augue molestie risus.</td></tr>
<tr class="accordion-toggle"><td>Accordion 1</td></tr>
<tr class="accordion-content"><td>Cras malesuada ultrices augue molestie risus.</td></tr>


</div>

</body>
</html>

Open in new window

Thank you very much!
The code you posted is essentially the same as the second method I posted above - you use classes to target the row. However, by removing the <p> from the equation you loose the slide effect because <tr> elements don't respond to toggle. So it will work in that they rows will show and hide but you won't get the slide effect.
Thank you Julian!
I'm using the your second option, it looks nice.
You are most welcome.