Accessing from the page in LowerFrame to the page in UpperFrame causes undefined error!

Question

My website consists of two frames, let's say upperFrame and lowerFrame.

On the document ready of the page in lowerFrame, it access one of textbox located on the page of upperFrame. Sometimes, since the upperFrame do NOT complete its loading, lowerFrame get the undefined while it access the upperFrame.

Let me know if there are Any solutions/checking to prevent this problem?

Answer 1

How about updating 2 vars in the parent of both frames: topReady and bottomReady. At the top and at the lower frames you set them to call a function that checks if both of them are true. If not it sets the appropriate var to true and once the 2nd frame will be calling the function it will trigger whatever action you want to.

Edit: Another option is to try and use

$(window.parent.upperFrame).ready(function(){
  alert('upperFrame loaded')
});

Answer 2

try jQuery .load() function

The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.

Here is the sample code

Edited:
put code below in document ready of lower iframe.

  $(function(){
   $('#UpperIframeID', window.parent.document).load(function(){  
        var valueOFTextbox = (this).contents().find("#textboxID").val();                                 
   });
 });
   </script>

If it doesn't work in IE then put conditional statement and for IE use .ready() function.