Classic ASP + SQL (Plus button,show/hide)
Team - I am coding a page in classic asp and SQL. I have a query from sql which fetch few data. I know how to display those in Classic asp.
However what i dont know is, lets say, the output of sql gives me something like this,
Customer, Root Cause, Score
Here, for every 1 customer, i will get 5 rows (each differentiated by Root Cause). Client wants me to show only 1 Root Cause & have a plus button in customer. If the end user clicks the +, it should display the other 4.
Any sample query on dynamic table wouldbe greatlyappreciated.
However what i dont know is, lets say, the output of sql gives me something like this,
Customer, Root Cause, Score
Here, for every 1 customer, i will get 5 rows (each differentiated by Root Cause). Client wants me to show only 1 Root Cause & have a plus button in customer. If the end user clicks the +, it should display the other 4.
Any sample query on dynamic table wouldbe greatlyappreciated.
chaau
Is jQuery an option?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I propose a different approach. I popose using the slideToggle('show') function. In my opinion it looks better. JS Bin
<!DOCTYPE html>
<html>
<head>
<style>
div[class*='_all']{ display: none;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){
$('.group a').on('click',function(){
var cust_id = $(this).attr('class');
$('.'+cust_id+'_all').slideToggle('slow');
});
});
</script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="group">
Customer 1234, Root Cause, Score
<a class="1234" href="javascript:void(0)">+</a>
<div class="1234_all">
Customer 1234, Root Cause, Score<br>
Customer 1234, Root Cause, Score<br>
Customer 1234, Root Cause, Score<br>
</div>
</div>
<div class="group">
Customer 1235, Root Cause, Score
<a class="1235" href="javascript:void(0)">+</a>
<div class="1235_all">
Customer 1235, Root Cause, Score<br>
Customer 1235, Root Cause, Score<br>
Customer 1235, Root Cause, Score<br>
</div>
</div>
</body>
</html>
That's essentially the same thing just different animation. There are a lot of options for that part.
I threw that example up as a quick option. The real question is how many rows of data you have. With only 10 customers, that's 50 rows of data and would be fine to send to the browser at once. Several hundred would be ok but you would notice a little lag time and there are ways to flush to the screen in asp. But when you get to 1000 records, it is really too much data to send to the browser. But you could send 200 "first rows" of data and clicking something like the plus sign would send an ajax request for the other 4.
I threw that example up as a quick option. The real question is how many rows of data you have. With only 10 customers, that's 50 rows of data and would be fine to send to the browser at once. Several hundred would be ok but you would notice a little lag time and there are ways to flush to the screen in asp. But when you get to 1000 records, it is really too much data to send to the browser. But you could send 200 "first rows" of data and clicking something like the plus sign would send an ajax request for the other 4.