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.
LVL 7
ManjuIT - Project ManagerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

chaauCommented:
Is jQuery an option?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
This is most likely going to require some form of javascript or jquery and possibly ajax.

If you don't have a lot of records, below is a very simple idea sending all records to the browser, hiding 4 until a plus sign is clicked.  If you have many hundreds of rows of data, it may be better to only send the one row to the browser and use ajax to call the rest.

This code is all in html and css, you can back in your asp code to output in this format.  

http://jsbin.com/wuhure/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  
<style>
  div[class*='_all']{ visibility: hidden;}
</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').css('visibility', 'visible');
  });
});
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="group">
  <div class="1234_first"><a class="1234" href="javascript:void(0)">+</a>Customer 1234, Root Cause, Score</div>
  <div class="1234_all">Customer 1234, Root Cause, Score</div>
  <div class="1234_all">Customer 1234, Root Cause, Score</div>
  <div class="1234_all">Customer 1234, Root Cause, Score</div>
</div>
  <div class="group">
  <div class="1235_first"><a class="1235"  href="javascript:void(0)">+</a>Customer 1235, Root Cause, Score</div>
  <div class="1235_all">Customer 1235, Root Cause, Score</div>
  <div class="1235_all">Customer 1235, Root Cause, Score</div>
  <div class="1235_all">Customer 1235, Root Cause, Score</div>
</div>
</body>
</html>

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
chaauCommented:
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>

Open in new window

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.