Hidden Frames for Storing Data: Minimizing Server Trips

I design ASP intranet pages.  I want to design a page that has three columns.  The information in the first two columns, once pulled from the database, stays the same, but the 3rd column changes as users select the office they wish to view.  Instead of having to get the information for the first two columns every time the page is resubmitted, I thought it might be a good idea to store the data in a hidden frame.  Here's the problem:  My javascript skills are pretty fundamental.  I have no idea how to get thie information from the hidden frame to the main frame, once I have pulled it from the database with an SQL statement.  From what little information I have found on the web, I think I am supposed to move my data into a javascript array.  Then call the array from the home page.  I've read Mark Burnham's articles using this method, that is where I got the idea.  However, even after reading his articles, I am still clueless about the complete process.  Any suggestions on other articles I can read? or possible books I should look at?  Some functions I can use?  Is there a better way to do this other than frames?  Too much data for session variables.  Thx.
bgernonAsked:
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.

ethrbunnyCommented:
Load everything into the page - but put it into <DIV> elements with STYLE='visibility:hidden' - when you want to display a particular one change its STYLE='visiblity: visible' after hiding the previous one. Each item in col3 would get a unique ID= at load time.

Each item in cols 1 and 2 can have ONCLICK="changeDisp(<unique ID for col 3>);".

<script>
prevItem = -1;
function changeDisp(newItem)
{
     // hide the previous item
     if (prevItem != -1) hideItem(prevItem);
   
     // show the new item
     showItem(newItem);

}

function hideItem(item)
{
     document.getElementById(item).style.visibility = 'hidden';
}

function showItem(item)
{
     document.getElementById(item).style.visibility = 'visible';
}
</script>
bgernonAuthor Commented:
Thank you Ethrbunny.  I've used hidden div blocks before.  I suppose if I put each block in the same location on the page and change visibility as each individual office is requested, it could work.  I am wondering if the web page might take longer to load this way as opposed to just loading the one office each time the page is submitted.  The data for the first two columns would already be loaded in the hidden page.  I'd still like to explore using a hidden frame if anyone has some info on that method.  
ethrbunnyCommented:
Loading would be faster this way (the div method) as you'd have fewer round trips to the server. The rendering is much faster than the page loading process.

Mapping HTML from one frame to another is pretty easy - each frame object has an .innerHTML property that contains all the markup text. You would simply have to map in and out from hidden to visible each time the selection changes. Just be aware that in either event you'll prob want to preload all the information - making a trip to the server for new bits each time would be tedious for the user at best. And much more likely to end up with an error code.

Another issue worry about with loading into a hidden frame is how to deal with those cases where a page starts to load and never finishes or returns a 404. Normally you'd just hit F5 but if the frame in question is invisible the user doesn't know that its stuck / broken. Only that 'nothing happens when I click'.

In any event its pretty easy to run a comparison.
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

VincentPugliaCommented:
Hi,

  I am not an asper (asps are snakes :)

But, someone I helped sent me the following code (which created arrays in javascript)

//*  create javascript transaction code array
var arTransactionCode = new Array();<br>
var arDebitCredit = new Array();<br>
var arDescription = new Array();<br>

//*  load array from recordset<br>
 
<%<br>
     for(i=0; !jsTransactionCode.eof; i++) {<br>
%><br>
          arTransactionCode[<%=i%>] =  "<%=jsTransactionCode('TransactionCode').value%>";     <br>
          arDebitCredit[<%=i%>] =  "<%=jsTransactionCode('DebitCredit').value%>";<br>
          arDescription[<%=i%>] =  "<%=jsTransactionCode('TransactionDescription').value%>";<br>
<%
     jsTransactionCode.moveNext();<br>
     }<br>
%><br>

hope this helps some

regarding div vs frames vs server calls -  the initial server download would take the most amount of time.  Once you have your data on the client's machine, there is no time difference between div/frameset rendering.
If you are talking about megabytes of data that needs to be downloaded -- I, for one, would rather wait the five minutes for the server than wait 3 hours for the initial download (i'm running at 28,800 bps  :(

Vinny

 
bgernonAuthor Commented:
You've got me thinking using divs has good possibilities.   I'm thinking I could speed up the first time page load with getRows.  Ater that, each time the user selects a different office, boom, the hidden column becomes visible and the one they were viewing becomes hidden.  Thanks Ethrbunny.  I think I will play with your suggestion.  
bgernonAuthor Commented:
Ethrbunny,

Been studying the code you recommended.  I'm a little fuzzy on how prevItem is identified.  Thx.
VincentPugliaCommented:
hi bgernon

essentially, you set a global variable to an empty string (don't use numbers since your divIDs cannot be numbers, you might as well start with a string).  

your onclick event handler will call the function with the id (again, not numeric == make it something like 'a1, a2, a3....')

ONCLICK="changeDisp(<unique ID for col 3>);".

the function will then check to see if the global variable is empty; if not, it will set the div's style to invisible.   Regardless of its value, it will display the next div with the passed argument.  Finally, it updates the global variable with the passed argument so that the variable is no longer empty.

<script language='javacript'  type='text/javascript'>
prevID = "";
function changeDisp(divID)
{
     if (prevID != "")
       document.getElementById(prevID).style.visibility = 'hidden';
     document.getElementById(divID).style.visibility = 'visible';
     prevID = divID;
}

I do have a few comments, however.

1) the above implies you are creating X number of divs which will then be displayed or not.
2) if you are downloading your information into an array, it would be better to simply create one div and then update its contents according to the passed arguments.  Something like:

onclick=displayDiv(someNdx)   // where someNdx is a unique number pointing into the downloaded array

function displayDiv(ndx)
{
   document.getElementById('theDivID').innerHTML = theArray[ndx];
}


Vinny



ethrbunnyCommented:
BG - mistake on my part.

function changeDisp(newItem)
{
     // hide the previous item
     if (prevItem != -1) hideItem(prevItem);
   
     // show the new item
     showItem(newItem);

****
     prevItem = newItem;
****

}

the point is to make it possible to remove the previous DIV before a new one is displayed.

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
bgernonAuthor Commented:
Thanks VincentPuglia and ethrbunny.  VincentPuglia, the getRows array is a two dimensional array of columns and rows pulled from the database table based on my SQL statement.  It is vbscript. Though I am certain your suggestions have merit, I did not understand your javascript code enough to go with it.  I wish I did.  Are you taking my getRows array and making it a javascript array? I see the possibilities of one Div though using my getRows array.

Ethrbunny, I had just figured out the missing code when your response came.  Thx.

Oh, I should probably add that we use strickly IE here,  .innerHTML is not used for IE is it?  I'm not that familiar with it.
ethrbunnyCommented:
innerHTML works fine in IE.
VincentPugliaCommented:
Hi,

what getRows array?? the javascript/asp code I posted demonstrates how to create a javascript array with asp

Tell the truth, I'm beginning to get real confused.  I thought you already figured out how to download the data into a javascript array -- or are you wending ?

Vinny
bgernonAuthor Commented:
Sorry Vinny, you did explain, but as I said, I do not understand it.  My javascript skills are very fundamental. Basiclly, what I learned in one quarter in college and what little I've picked up here and there.  Perhaps you could suggest a really good javscript book that could help me to better my understanding of javascript.  

Ethrbunny,  guess I'd better do some reading on innerHTML.

Thx, both of you.

Bea
ethrbunnyCommented:
Lots of great resources on the web. Google for '+innerHTML +dhtml' for a start.
VincentPugliaCommented:
Hi bea,

the asp/js code posted above creates 3 javascript arrays.

the following should create a javascript array (but I'm not sure since I don't do asp/vbscript)

<script language='javascript' type='text/javascript'>
var jsArray = new Array('<%= aspArray %>')  
</script>


very easy reading:  Javascript in 25 hours
not light reading: any of O'Reilly's books
specifically, the Definitive Guide to Javascript

online site: www.htmlgoodies.com  <-- where I first learned javascript
Vinny
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
Web Languages and Standards

From novice to tech pro — start learning today.