Solved

Hidden Frames for Storing Data:  Minimizing Server Trips

Posted on 2003-10-24
14
420 Views
Last Modified: 2010-04-06
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.
0
Comment
Question by:bgernon
  • 5
  • 5
  • 4
14 Comments
 
LVL 1

Expert Comment

by:ethrbunny
ID: 9616374
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>
0
 

Author Comment

by:bgernon
ID: 9616845
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.  
0
 
LVL 1

Expert Comment

by:ethrbunny
ID: 9617382
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.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9617574
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

 
0
 

Author Comment

by:bgernon
ID: 9617581
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.  
0
 

Author Comment

by:bgernon
ID: 9645573
Ethrbunny,

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

Expert Comment

by:VincentPuglia
ID: 9645870
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



0
 
LVL 1

Accepted Solution

by:
ethrbunny earned 155 total points
ID: 9645918
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.
0
 

Author Comment

by:bgernon
ID: 9646083
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.
0
 
LVL 1

Expert Comment

by:ethrbunny
ID: 9646091
innerHTML works fine in IE.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9646122
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
0
 

Author Comment

by:bgernon
ID: 9646246
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
0
 
LVL 1

Expert Comment

by:ethrbunny
ID: 9646274
Lots of great resources on the web. Google for '+innerHTML +dhtml' for a start.
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9646348
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
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are two main kinds of selectors in CSS: One is base selector like h1, h2, body, table or any existing HTML tags.  For instance, the following rule sets all paragraphs (<p> elements) to red: (CODE) CSS also allows us to define our own custom …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question