createElement() and events between 2 frames

Posted on 2003-03-07
Medium Priority
Last Modified: 2010-04-06

I'm using JavaScript and DHTML to do most of my stuff. Right now I have a frame with most of the application, and a hidden frame that's used to have events accessing databases.
The problem is that at some point I have to create new objects from the hidden frame, and I add them to the document of the "normal" frame.
Now the problem is that when I create those objects from the normal frame, everything is ok. But when I do it from the hidden frame, for some reason the events don't get any event object...

Any idea what the problem might be, or a workaround?

Question by:Ashe
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2

Expert Comment

ID: 8095997
Interesting questing but I'm getting a bit confused about all your events, event objects, events accessing databases, objects...

1) are you talking about event-handler functions in the "normal" frame calling code in the "hidden" frame? or vice versa?

2) what objects do you create? Just ordinary JS-objects you invented or (as the question-title may suggest) HTML-element objects via .createElement()?

3) what are those "new objects" are supposed to do? call some code? in what frame is this code located?

4) if these objects *are* HTML-elements, are they supposed to have event-handlers attached?

5) if so, where are the event-handler functions located?

6) is the hidden frame "static" or is its location.href changing somehow?

7) as it sounds ike you have a big pile of code, pls. provide some BRIEF example code of the "cross-frame-interfaces" you've implemented (eg. function headers), the lines that "attach" handlers to your new elements/objects and try to explain in more detail what happens when and where (frames)

CirTap, trying to help.
LVL 14

Expert Comment

ID: 8096952
You cannot create elements from document (hidden frame in your case) and then append them to a different document(your real frame).
Every DOM object can be appended only if it is a child of this current object.

So to fix your problem, when you create the objects from the hidden frame use :

var oObject = top.frames["nameofrealframe"].document.createElement("INPUT");

where "nameofrealframe" is the name of your content frame and "INPUT" is the name of the object you want to create.

Author Comment

ID: 8098186
Well, I'm creating them from the "real" frame...
Basically in my JS I change the URL of the hidden frame, like "something.asp"
This something.asp does its stuff, then generates javascript that will create the elements (but with the document object present in the real frame).
Basically everything is alright, and the elements are displayed. Just that when events like onmouseover are fired the event object (the variable called event, to make sure you understand what I'm talking about), is just null...
Thanks for the suggestion though
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users


Expert Comment

ID: 8099362
oh, you answered no. 2) and 6)

To get the picture:

in the hidden frame:
var elt = otherFrame.document.createElement("XXX");

then either [mega-assumption, because you don't tell us]:
  elt.attachEvent("MOUSEOVER", "fncHandler()")
(I hope I got their syntax right)

or is it given as

and finally sth. like:

Last try:
*WHERE* is fncHandler() located/defined?
which frame defines the code for the event-handler functions?
what function tells you event==null?

I'd be *very* helpful if you'd answer these question.

LVL 14

Expert Comment

ID: 8100717
Ashe , when you test the event, you are tesing the event ofbject of the hidden frame. you should be testing the event in wihch the event was fired :
inside the event handler will give you the event.

Author Comment

ID: 8101537
Hidden frame :

a = realframe.document.createElement( 'DIV' );
realframe.document.appendChild( a );
Then a and all its children (a table, and a td, most of the time) get their handlers set :
a.onmouseover = somefunction;

This function is defined in both the hidden and the real frame, since I include the .js files in both frames.
My event handler is just :

function somefunction()
  return event.srcElement.m_cParent.SomeFunction();

This is where event is null.
I tried to do it by specifying the frame for the event, as avner suggested.

Any other ideas? (at least I feel a bit less alone now, in this office nobody gets anything more "complex" than var i; heheh)

LVL 14

Accepted Solution

avner earned 300 total points
ID: 8102144
Then change the
function somefunction()
 return event.srcElement.m_cParent.SomeFunction();

to :
function somefunction()
 return top.frames["frameName"].event.srcElement.m_cParent.SomeFunction();

Author Comment

ID: 8102231
Well, I thought I tried that already, guess I didn't (maybe I tried with the hidden frame, since they're created from there).
Anyway, thanks very much to both of you, works when specifying the frame for the event.

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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 if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

764 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