Search code examples
javascriptajaxfunctionundefinedframeset

Javascript Function is not defined despite the fact that it is

I'm working on updating an old site designed for ie8 and uses framesets to manage the layout.

I'm adding a piece of code to one frame that will create a div on another frame and load content into it through AJAX. The problem is, for whatever reason, it keeps saying my function is undefined when I call it through an onclick. Weirdly enough, this only happens when it's loaded though AJAX, not when it's loaded as itsown page.

I've already checked the JS and there's no syntax errors anywhere on the page.

Here is the function I'm trying to run if anyone wants to see it:

function closePopup() {
    alert('');
}

I've removed all other javascript from the page and it still says it's undefined.

Edit: Here is the jQuery code to load the page:

var main = top.frames["Main"].document;
$.ajaxSetup({ cache: false });
var centeringDiv = $("<div />", main)
.css({
  "position": "absolute",
  "top": "25%",
  "text-align": "center",
  "width": "100%",
  "z-index": "100"
})
.appendTo(main.body);
var lookUpDiv = $("<span />", main)
.attr("id", "lookUpDiv")
.css({
  "background-color": "#ffffff",
  "padding": "10px",
  "text-align": "center"
})
.text("Loading: Please Wait.")
.load("associateLookup.asp")
.appendTo(centeringDiv);
Solution

  • From a comment above: when working with interconnected <iframe> content, it's important to remember that separate frames are treated as separate global contexts. Each has it's own window, in other words. It's possible to navigate references that link the frames, as the code in the OP is doing when it refers to top.frames["Main"]. References in "onclick" etc. attributes also must take that into account; similarly, code that wants to add functions or global values to other frames must do so explicitly.