How do you solve innerhtml problems in IE?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Parody
Forum Contributor
Posts: 252
Joined: Fri May 06, 2005 7:06 pm
Location: Great Britain

How do you solve innerhtml problems in IE?

Post by Parody »

I am writing an ajax application which sends a whole form in GET variables to a page and then replaces the div in which the original form was placed with a new, modified form. The only part which doesn't appear to work is replacing the original form with the output of the page. I'm using innerhtml to replace the divs which I know has "problems" in Internet Explorer, I recieve an unknown runtime error, but the whole script works in Firefox. I've used innerhtml before and it works fine and it works fine now as long as I don't try and put html into the div, plain text works. I would like someone to explain in extremely simple terms for me and everyone else who will come across this why there is a problem and how it can be worked around.

I would like a simple fix which I can write quickly, I don't want to struggle writing a DOM script which will take me days to make it work for any html. There are functions out there already written, like 'betterinnerhtml', but the latest build gives an error.

Could someone please provide a definitive solution to this most annoying of problems? :D
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: How do you solve innerhtml problems in IE?

Post by Jonah Bron »

Try putting the responseText into the div, instead of the responseHTML

Code: Select all

document.getElementById('div').innerHTML = ajax.responseText;
Parody
Forum Contributor
Posts: 252
Joined: Fri May 06, 2005 7:06 pm
Location: Great Britain

Re: How do you solve innerhtml problems in IE?

Post by Parody »

I just found a piece of script on the jQuery website which appears to replace innerhtml and it works!

For anyone else trying to solve innerhtml woes:

Code: Select all

$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});
 
In the above example #results is refering to the div named 'results'.

The page is:
http://docs.jquery.com/Ajax/jQuery.ajax#options

Thanks PHPyoungster for alerting me back to this topic. I'd lost all hope of solving this :D
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: How do you solve innerhtml problems in IE?

Post by s.dot »

A hack for IE would be to use javascript to create a containing div, and then give the div the contents by using newDiv.appendChild(). I would quote the article I read this hack at, but I forget.

It has worked for me on occasion.. however when sending large amounts of content to the page, sometimes even that doesn't work.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Re: How do you solve innerhtml problems in IE?

Post by Kieran Huggins »

jQuery FTW! It totally deprecates all that cross-browser crap.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: How do you solve innerhtml problems in IE?

Post by s.dot »

Kieran Huggins wrote:jQuery FTW! It totally deprecates all that cross-browser crap.
If you're speaking of the .html(data) function.. it totally didn't work in IE with a large data string. It worked in firefox and opera though.

I was using it to fade out a forum thread and then fade back in with the entire thread passed as the data string. ie chokkkeedddd!
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Post Reply