[jQuery] jQuery append returning document or head is null error
Dear Folks,
I am getting a "document or head is null" error. I have explained the
context below. It is a long email; please bear with me.
I am uploading a file using an iframe as follows:
<form id="file_upload_form">
some stuff...
<input type="submit" value="submit" onclick="upload_file();">
</form>
<iframe id="upload_target" name="upload_target" src="" style="width:
0;height:0;border:0px solid #fff;"></iframe>
<script type="text/javascript">
document.getElementById('file_upload_form').target = "upload_target";
upload_file = function()
{
jQuery('#file_upload_form').submit();
}
</script>
The file is submitted and returns the HTML code below that is passed
to the iframe:
<html>
<head>
required javascript files
</head>
<body>
namespace.reload_tab();
</body>
</html>
The reload_tab function is executed and targets elements outside the
iframe like so:
jQuery(window.top.getElementById('some id').some_function();
The final step of this function appends some HTML using jQuery's
append. This works, but an error is returned after the HTML is
rendered in Firebug as follows:
"document or head is null"
The error is reported as being in the globalEval function in jQuery
and complains about the line below:
var head = document.getElementsByTagName("head")[0] ||
document.documentElement,
script = document.createElement("script");
I believe that jQuery is not finding a particular element in the DOM
because it is not using 'window.top.getElementById()' which it may
need to execute to access elements outside the iframe. However, the
HTML is appended correctly so I do not understand why this is
happening.
Thanks in advance,
Cheers,
Nandu