Solved

linking frames without a first reload

Posted on 1997-03-24
6
209 Views
Last Modified: 2013-12-25
I have a main questionnaire which has several sections with
lots of checkboxes etc. and which is in "frame1".  I have a navigation frame "frame2" which has links to the top of each section and also has the main submit button form the questionnaire.

problem - the user loads the frames and starts to check the checkboxes.  If they then navigate using the buttons in frame2 then the questionnaire frame reloads and jumps rather than just jumps ***only on the first one though*** after that everythings works ok.  Of course the reload loses all their selections that first time!

Is there some way to set up the frames and links to avoid this first reload?

thanks

-barbara
0
Comment
Question by:barbara032497
  • 4
  • 2
6 Comments
 
LVL 4

Accepted Solution

by:
jshamlin earned 100 total points
Comment Utility
If you want to jump from place to place in a document without reloading the document, you omit the document's name - instead of <A HREF="this.html#position>, simply use <A HREF="#position">

The problem is, if you're doing this among frames, you _must_ name the document in the top frame (to load it from the bottom frame), which causes the page to reload, dropping all the values.

Of course, you already know this ...

There is no HTML-only work-around to this (even if the top and bottom frame are different parts of the same page, the first click will cause the top frame to reload, though subseuqnet clicks _may_ not) - and so ... it's JavaScript time.

In the bottom document, you'll need a bit of Javascript to preserve the values the user has entered.  This should work:

First,in the BODY tag of the top frame, add this ...

<BODY onLoad="restoreValues()">

For each link in the bottom, add this ...

<A HREF="page.html#location" onClick="saveValues()">

In the <HEAD> of the document on the bottom of the screen, place this ...

var valArray

function saveValues(){
     var x=0;
     while(x < parent.frames[0].forms[0].elements.length){
        valArray[x] = parent.frames[0].forms[0].elements[x]
        x++
        }
     }

function retoreValues(){
     var y = 0
     while (y < parent.frames[0].forms[0].elements.length){
        parent.frames[0].forms[0].elements[y] = valArray[y]
        y++
        }
     }

What this will do is store the values from the first frame in a variable attached to the second frame the moment the user clicks a link.  The top frame will then reload, but immediately (probably before the user even notices it), all the information is restored to the form in the top frqame from the second frame's variable.










0
 

Author Comment

by:barbara032497
Comment Utility
Sounds like a workablesolution but I'm struggling to reference
the right bits...my page has the questionnaire at the topand
the navigation frame below so
     parent.frames[0] should be the contentframe
     parent.frames[1] should be the toolbar frame

Using the code suggested gives me the error
   Window.forms has no property indexed by '0'

I spent most of last night trying to work out how to reference
the frames/forms but failed.  Any help would be appreciated.  
I can up the value of the question for the extra hassle :-)

thanks for your speedy answer yesterday... this really is an
important fix.

-barbara

0
 
LVL 4

Expert Comment

by:jshamlin
Comment Utility
DOH!

I left an important bit out of the object references - document (so that the script could access the content rather than the frame object.  And so ... change each object reference to ...

parent.frames[0].document.forms[0].elements.length
                ^^^^^^^^^

Also, the < in the script might be mistaken for an HTML tag initiator by some browsers (I've had this problem before)- so where I originally suggested this ....
     (y < parent.frames[0].document.forms[0].elements.length)
use this instead ...
     (y != parent.frames[0].document.forms[0].elements.length+1)

Same thing for the while() of x in the other function.

To avoid being a moron twice (<g>), I tested this script with the aforementioned changes, and everything works well.  One minor "bug" is that the first time the page loads, restoreValues() puts the word "null" in the first text box.  To cure that, add a HIDDEN to the form as the first input <INPUT TYPE="HIDDEN" NAME="nevermind"> - that should be ignored by the script (unless there's a variable $nevermind someplace) and will catch the "null" on the first load.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 4

Expert Comment

by:jshamlin
Comment Utility
Foiled again ... since this page is in text that isn't monospaced, the ^^^^^ in the above comment probably looks a little weird - doesn't highlight what I intended it to.  The significant addition to the object is the "document" bit.
0
 

Author Comment

by:barbara032497
Comment Utility
Well, I'm half way there now.  The above code saves ok
to the valArray when a link is pressed (had to use the
new array command with netscape though) but the content
frame does not seem to be able to access the same
valArray ie. the array length on save looks fine, the
array length on the restore valArray is null.  A scope
problem... how do you reference the variables of
another frame?  You said you tried out the above and it
worked ok... probably something funny I'm doing!

gee, I'll be glad when this works.  I have a couple of
folk breathing down my neck for it!!

many thanks again... getting closer.

-barbara
0
 
LVL 4

Expert Comment

by:jshamlin
Comment Utility
It's just me being a dope again <g>.  

Not all browsers will treat a variable in the parent document as a global variable to scripts in child frames.  (If they'd only get together and define a standard, things would be a lot easier for all of us) - and without that, you'll have to kludge a bit to create a place where the values can be stored in the bottom frame that will be accessible by a script in the top frame.

This is going to be ugly, but functional ...

In the bottom frame, you'll need to create a FORM with the same number of fields as the form in the top frame (field names and types are unimportant) - this will provide the permanent and accessible "holding place" that you need.  To make this invisible to the user, I suggest setting the bottom frame as SCROLLING="NO" and using a transparent graphic (or whatever else) to push the FORM fields off the screen.

... told you it was going to be ugly - but it'll work (and I really can't think of another method).

And now, use the following script bits ...

TOP FRAME --------------------------------------------------

make the BODY tag onLoad="restoreValues()"

add to the HEAD the following function

function restoreValues(){
var x = 0
while (x != parent.frames[0].document.forms[0].elements.length + 1){
parent.frames[0].document.forms[0].elements[x].value =
parent.frames[1].document.forms[0].elements[x].value;
x++
}
}

BOTTOM FRAME --------------------------------------------------

make each HREF tag onClick="saveValues()"

add to the HEAD the following function:

function saveValues(){
var x = 0
while (x != parent.frames[0].document.forms[0].elements.length + 1){
parent.frames[1].document.forms[0].elements[x].value =
parent.frames[0].document.forms[0].elements[x].value;
x++
}
}

-------------------------------------------------------------

Unlike the previous "solution", this will work for MSIE (since it doesn't have an array object) and the previous problem with "null" should be overcome.

Sorry for all the red herrings.
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

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

728 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