Solved

Hidden Frames for Storing Data:  Minimizing Server Trips

Posted on 2003-10-24
14
411 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
 
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now