Hidden Frames for Storing Data: Minimizing Server Trips

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>

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.  

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.

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

 

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.  

Ethrbunny,

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

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

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.

innerHTML works fine in IE.

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

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

Lots of great resources on the web. Google for '+innerHTML +dhtml' for a start.

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