I'm building application using pop-ups. I'm getting new information with Ajax in the main page and updating the popup page. In the side window (pop-up) I've got a table and when new data is received I'm just adding row in this table. In FF, Chrome and Opera that is working pretty well but when I try to append child (no matter if I'm using jquery or not) IE gives me a Unspecified error. I'm trying to append the child directly to the table like that:
var tableHeader = this.config.newResultsWindow.document.getElementById('newResultsTableHeader');
tableHeader.appendChild(newRow);
When I'm using just innerHTML (for example this.config.newResultsWindow.document.body.innerHTML = updatedTable) everything is OK but the table's content is very big and I cant write it all every time.
What can I do?
IE doesn't allow the moving of nodes between different document's , so a node created in document A cannot be inserted to document B
have you tried catching the error, it might tell you more than 'Unspecified':
try {
tableHeader.appendChild(newRow);
} catch(error) {
alert(error);
}
I hope it helps,
Rob
Found something that worked for me. Try appending the HTML inside of the newRow variable:
tableHeader.appendChild(newRow.html());
Related
After an AJAX request I get a string with some HTML data like this:
var test = '<div id="test-options"><option value="">Select</option><option value="true#153237119">XS</option><option value="true#153237120">S</option><option value="true#153237121">M</option><option value="true#153237122">L</option><option value="true#153237123">XL</option><option value="true#153237124">XXL</option></div><div class="athoerstuff">Ather stuff here</div>';
I want to append this and after it's appended get only the content of div without the wrapper:
var li = $(test).appendTo('form');
$("body").find('#test-options').html();
-------------------------------
The problem was coming only on IE9 because the options without having the wrapper.
IE9 was looking at the options inside the div and realized that this is invalid. That is why, IE9 was not getting me the options.
I added a select wrapper in the server side script where I was making the request (option values) and, instead of:
$('#test-options').html();
I added:
$('#test-options select').html();
The result result was same as previous code, but now working on IE9 as well.
Thank you all for your help.
Maybe somebody can tell me why IE9 is not getting the options without the select wrapper and other browsers do?
If you are trying to get the options html then you can simply do like below,
$(test).unwrap().html();
instead of appending to body and retrieving the content.
http://jsfiddle.net/XYhbg/
The above is under the assumption with the data that you had in the test variable. Let me know if it is any different.
I need help with this. I am new to using XPath in javascript and this one has stumped me.
My script retrieves the contents of a web page using xmlhttp and then wraps it up in a 'div':
div=document.createElement('div');
div.innerHTML=xmlhttp.responseText.replace(/<img[^>]*>/);
I need to access the body content of this wrapped division and I am using Xpath to do this:
bodyContent = document.evaluate("//*[#id='bodyContent']", div ,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null);
bodyContent = bodyContent.snapshotItem(0);
While this works perfectly well in firefox and retrieves the required XpathObject it does not give the desired result for google chrome browser. Where instead of returning the bodyContent division of the 'div' element created (and passed as contextNode) it returns the bodyContent of the current document page.
I have checked and in chrome -- the correct xmlhttp.reponseText is received.
Any ideas regarding this?
Thanks,
Does document.evaluate(".//*[#id='bodyContent']", div ,null,XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,null) give you the desired result in both browsers?
So, I have this pretty complex ajax thing going.
It loads new html (including div tags and all) to show up on the page.
I included a 'more' link to load additional data.
This more link links to my javascript function. The 'more' link is located in a div, which I gave a unique id. The next time the load function is called, I use document.getElementById(the id).style.display="none"; to "remove" this div from the look of the page.
I set error traps for this, the div with that id is found without problems, but javascript fails to change my style property.
I tested alert(document.getElementById(the id).innerHTML); and that worked without problems - hence the title of the question.
So, does anyone have any ideas/do I need to offer more information? The main problem is that it doesn't throw any errors anywhere, yet it fails to complete the task I asked...
Here's a bit of code to go with it -
try
{
var myidthing = "morelink" + ContentStart.toString(); //the id is correct
var div = document.getElementById(myidthing);
if (!div)
{
}
else
{
div.style.display="none"; //this doesn't work, but doesn't raise an error
alert(div.innerHTML); //this works without problem
}
}
catch(theerr)
{
alert(theerr);
}
------------------------->EDIT<-------------------------
I'm incredibly sorry if I upset any people.
I'm also angry at myself, for it was a stupid thing in my code. Basically, I had a variable that stored the contents of a parent div. Then I (succesfully) removed the div using the removeChild() method. Then my code pasted the contents of that vaiable (including the div I wanted gone) back into the parent div.
I switched around the order and it works fine now.
Again, excuse me for this.
Throwing out a few ideas of things to look for:
You said the div is generated by javascript. Is it possible the div you are targeting is not the one you think you are? It could be you are targeting another div, which is already hidden, or obstructed... or maybe the innerHTML you are displaying goes with a different element than the one you intend to target. Put an alert or script breakpoint in the if(!div) case, also, and see if it's going down that path.
If the above code is only a stripped-down version of your actual code, check your actual code for typos (for example: style.display = "none;";)
Using the FireBug plugin for FireFox, inspect the target element after the operation completes, and make sure that the display: none appears in the style information. If not, use FireBug's debugger to walk through your javascript, and see if you can figure out why.
Use FireBug to break on all script errors, in case there is another error causing this behavior.
Try empty quotes instead of 'none' and see if that works?:
document.getElementById('element_id').style.display="";
Failing that, don't change the style, just add a class which hides the element.
How exactly does it relate to jQuery? I know the library uses native javascript functions internally, but what exactly is it trying to do whenever such a problem appears?
It means you've tried to insert a DOM node into a place in the DOM tree where it cannot go. The most common place I see this is on Safari which doesn't allow the following:
document.appendChild(document.createElement('div'));
Generally, this is just a mistake where this was actually intended:
document.body.appendChild(document.createElement('div'));
Other causes seen in the wild (summarized from comments):
You are attempting to append a node to itself
You are attempting to append null to a node
You are attempting to append a node to a text node.
Your HTML is invalid (e.g. failing to close your target node)
The browser thinks the HTML you are attempting to append is XML (fix by adding <!doctype html> to your injected HTML, or specifying the content type when fetching via XHR)
If you are getting this error due to a jquery ajax call $.ajax
Then you may need to specify what the dataType is coming back from the server. I have fixed the response a lot using this simple property.
$.ajax({
url: "URL_HERE",
dataType: "html",
success: function(response) {
$('#ELEMENT').html(response);
}
});
Specifically with jQuery you can run into this issue if forget the carets around the html tag when creating elements:
$("#target").append($("div").text("Test"));
Will raise this error because what you meant was
$("#target").append($("<div>").text("Test"));
This error can occur when you try to insert a node into the DOM which is invalid HTML, which can be something as subtle as an incorrect attribute, for example:
// <input> can have a 'type' attribute
var $input = $('<input/>').attr('type', 'text');
$holder.append($input); // OK
// <div> CANNOT have a 'type' attribute
var $div = $('<div></div>').attr('type', 'text');
$holder.append($div); // Error: HIERARCHY_REQUEST_ERR: DOM Exception 3
#Kelly Norton is right in his answer that The browser thinks the HTML you are attempting to append is XML and suggests specifying the content type when fetching via XHR.
It's true however you sometimes use third party libraries that you are not going to modify. It's JQuery UI in my case. Then you should provide the right Content-Type in the response instead of overriding the response type on JavaScript side. Set your Content-Type to text/html and you are fine.
In my case, it was as easy as renaming the file.xhtml to file.html - application server had some extension to MIME types mappings out of the box. When content is dynamic, you can set the content type of response somehow (e.g. res.setContentType("text/html") in Servlet API).
You can see these questions
Getting HIERARCHY_REQUEST_ERR when using Javascript to recursively generate a nested list
or
jQuery UI Dialog with ASP.NET button postback
The conclusion is
when you try to use function append, you should use new variable, like this example
jQuery(function() {
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form:first"));
});
In the example above, uses the var "dlg" to run the function appendTo.
Then error “HIERARCHY_REQUEST_ERR" will not come out again.
I encountered this error when using the Google Chrome extension Sidewiki. Disabling it resolved the issue for me.
I'm going to add one more specific answer here because it was a 2 hour search for the answer...
I was trying to inject a tag into a document. The html was like this:
<map id='imageMap' name='imageMap'>
<area shape='circle' coords='55,28,5' href='#' title='1687.01 - 0 percentile' />
</map>
If you notice, the tag is closed in the preceding example (<area/>). This was not accepted in Chrome browsers. w3schools seems to think it should be closed, and I could not find the official spec on this tag, but it sure doesn't work in Chrome. Firefox will not accept it with <area/> or <area></area> or <area>. Chrome must have <area>. IE accepts anything.
Anyway, this error can be because your HTML is not correct.
I know this thread is old, but I've encountered another cause of the problem which others might find helpful. I was getting the error with Google Analytics trying to append itself to an HTML comment. The offending code:
document.documentElement.firstChild.appendChild(ga);
This was causing the error because my first element was an HTML comment (namely a Dreamweaver template code).
<!-- #BeginTemplate "/Templates/default.dwt.php" -->
I modified the offending code to something admittedly not bulletproof, but better:
document.documentElement.firstChild.nodeType===1 ? document.documentElement.firstChild.appendChild(ga) : document.documentElement.lastChild.appendChild(ga);
If you run into this problem while trying to append a node into another window in Internet Explorer, try using the HTML inside the node instead of the node itself.
myElement.appendChild(myNode.html());
IE doesn't support appending nodes to another window.
This ERROR happened to me in IE9 when I tried to appendChild an dynamically to a which already existed in a window A. Window A would create a child window B. In window B after some user action a function would run and do an appendChild on the form element in window A using window.opener.document.getElementById('formElement').appendChild(input);
This would throw an error. Same with creating the input element using document.createElement('input'); in the child window, passing it as a parameter to the window.opener window A, and there do the append. Only if I created the input element in the same window where I was going to append it, it would succeed without errors.
Thus my conclusion (please verify): no element can be dynamically created (using document.createElement) in one window, and then appended (using .appendChild) to an element in another window (without taking maybe a particular extra step I missed to ensure it is not considered XML or something). This fails in IE9 and throws the error, in FF this works fine though.
PS. I don't use jQuery.
Another reason this can come up is that you are appending before the element is ready e.g.
<body>
<script>
document.body.appendChild(foo);
</script>
</body>
</html>
In this case, you'll need to move the script after the . Not entirely sure if that's kosher, but moving the script after the body doesn't seem to help :/
Instead of moving the script, you can also do the appending in an event handler.
I got that error because I forgot to clone my element.
// creates an error
clone = $("#thing");
clone.appendTo("#somediv");
// does not
clone = $("#thing").clone();
clone.appendTo("#somediv");
Just for reference.
IE will block appending any element created in a different window context from the window context that the element is being appending to.
e.g
var childWindow = window.open('somepage.html');
//will throw the exception in IE
childWindow.document.body.appendChild(document.createElement('div'));
//will not throw exception in IE
childWindow.document.body.appendChild(childWindow.document.createElement('div'));
I haven't figured out how to create a dom element with jQuery using a different window context yet.
I get this error in IE9 if I had disabled script debugging (Internet Explorer) option. If I enable script debugging I don't see the error and the page works fine. This seems odd what is the DOM exception got to do with debugging either enabled or disabled.
function DeleteData(ID)
{
var ctrlId=ID.id;
var divcontents=document.getElementById(ctrlId).innerHTML;
var tabid=ctrlId.replace(/div/,'tab');
var tabcontents=document.getElementById(tabid).innerHTML;
alert(document.getElementById(tabid).innerHTML);
document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";
document.getElementById(ctrlId).innerHTML='';
}
I am trying to replace the Table with empty table but
document.getElementById(tabid).innerHTML="<TBody><tr><td></td></tr><tr><td></td></tr><tr><td></td></tr></TBody>";
this line is causing Unknown Runtime Error
You can't set value to a table's innerHTML, you should access to child cells or rows and change them like that :
document.getElementById(tabid).rows[0].cells.innerHTML = 'blah blah';
For more info/example : Table, TableHeader, TableRow, TableData Objects
In IE8, you cannot change the innerHTML of an object when the code that attempts that is fired from within the object.
For example:
<span id='n1'>
<input type=button value='test' onclick='DoSomething(this);'>
</span>
with the following code tucked in some remote corner of your document:
<script type='text/javascript'>
function DoSomething(element)
{
document.getElementById("n1").innerHTML = "This is a test"
}
</script>
This will fail with the error unknown runtime error. I believe it has to do with the fact that you're trying to replace the HTML code which fired the current line of execution. The onclick event is part of the code being replaced by the DoSomething function. IE8 doesn't like that.
I resolved my issue by setting a timer event for 250 milliseconds, such that the function called at the end of the 250 milliseconds replaces the span's innerHTML.
I find out that in IE8 some elements are in readonly: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.
Therefore if you try to set innerHTML for these elements IE8 notify alter with Unknown Runtime Error.
More details here: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx.
The simplest way is to convert read-only elements to div element.
I had the same issue but my error was because I was inserting a p tag directly underneath a p element as in:
document.getElementById('p-element').innerHTML = '<p>some description</p>';
I don't really see how this is HTML format error; seems more like another IE8 bug.
Great, I had the same situation with setting the innerHTML. When I read this I realised that one of the elements was a TR and one was a TD and the TD was working.
Changing the code so that they're both TDs fixes it, which means that it is a rather non-obvious problem caused by the structure of tables.
Presumably it throws the DOM awry when I start changing table rows since it can't store the table as an array any more.
I'm sure IE could give a more informative error message since it can't be that uncommon for the DOM to change on the fly and it seems strange that this would only throw an error for tables.
Ohh yes - remember that the HTML structure has to be valid.
I tried loading an entire page into a <p> tag - it failed (obviously), changing it to a <div> tag solved my problem!
So remember the HTML structure!
why it happend in IE...
case scenario:
Javascript unknown runtime error in IE while accessing Div inside Div to add ajax contents.
solution:
dont ever place nested divs in between the form tags to play with there contents .. :)
When using YUI try to use
Y.one('#'+data.id).setContent(html);
instead of:
Y.one('#'+data.id).set('innerHTML' , html);
If you need to set innerHTML to "" (empty string) then you can use removeChild instead
This is not a Big issue, since i faced same problem few days ago and the reason this error
occurs in ie is that - There exists an error in our html format or you are using an element other than <td> to replace innerHTML ie use only, dont use tables,divs to replace innerHTML.
SwapnilK