In the last few days I have been working on a small project to get a really nice form for one of my sites. The form uses a lot of JavaScript for all sorts of fancy things (such as check user input to make sure we don't accept total crap such as an empty entry or just "1" as a credit card number.)

The information finds itself in an IFRAME, which was the easiest way to get the time to load at decent speed and  to better manage the form in a separate area and not the main landing page. This will make it easier to maintain the landing page itself.

however, that created problems with jQuery code since I visually dealing with a single window, but in reality I'm working with two distinct documents (the landing page document and the IFRAME or form document.) Frankly, I did not expect jQuery to actually work at all in such a context. The fact is, it does work somewhat, but some functions are broken. I use the following to hide the close button window (a circle with a cross in it) from the IFRAME:

$('#close-button',window.parent.document).css('display','none');

Another thing I wanted to do is unbind() an event from another widget. To do that, I tried the obvious as per my preceeding example:

$('#shadow',window.parent.document).unbind('click');

It just didn't work. I've looked for a good reason and could not really see one. Just in case I tried the following before giving up:

$('#shadow',window.parent.document).unbind();

And nothing... The click() function was still getting called no matter what. That's when I decided to call a function in the parent window instead. That worked pretty well. The call became:

// IFRAME
window.parent.document.unbind_shadow();

// Parent Window
$('#shadow').unbind();

As we can see, the jQuery call is exactly the same, only in one case we specify the context but that seems to be a bit bogus (i.e. the context is probably not taken in account properly everywhere.) Similarly, the parent window can call some of the IFRAME hidden functions using a global variable in the parent which get initialized by the IFRAME and later used by the parent if defined.

// Parent Window initialize the function to 0 or false
my_child_function = 0;
// Parent Window checks pointer before calling
if(my_child_function) {
  my_child_function();
}

// IFRAME can set the function pointer as in
function my_func()
{
  // do something...
}
window.parent.my_child_function = my_func;

As we can see, we set the variable to 0 or false so when we are about to call that function we can first make sure it was defined properly. If so, we do the call as expected. In this example I put no parameters in the call, but you can use similar global variables to allow for parameters defined by the child.

IMPORTANT NOTE

When you create many global variables, you want to start their name with the name of your library or page. This is important to avoid clashes. For example, a Linux Page specific variable could be written as:

                             linux_page_close_button = $('#linux-page-close-button');