Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


Inner HTML IE malfunction

Posted on 2009-07-15
Medium Priority
Last Modified: 2013-12-08
I'm using innerHTML to put Yahoo Pipes feeds into individual <div>s on my webpage.

It works in Firefox but in IE6,7,8 the feeds often go into the wrong divs. If I refresh the page they often change. You can see my test page online at http://www.isc.co.nz/feedblop.htm. Also, at http://www.isc.co.nz/feeddlop.htm I have included an alert box, which makes even Firefox get <div> confusion.

They should appear in this same order as the captions: Reuters International, US and UK [usually identified by London headlines], New Zealand news, business and finally sport.

Researching via Google I've found several statements [even at MSDN] that IE can get confused using .innerHTML and send each output to the incorrect <div>. That describes my problem exactly. I've tried 2 of the suggested solutions without success: making the <div> names very different, and using a placeholder [see bottom of snippet]. Maybe I've executed them incorrectly.

Can you help?
<script type="text/javascript">
var puthere = new Array();
var count1 = 0;
var count2 = 0;
function getFeed(feed,div_id) {
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://pipes.yahoo.com/pipes/pipe.run?_id=602dddd329a9ec7139334702e9785a76&_render=json&_callback=piper&feed='+feed;
function piper(feed) {
var tmp='';
for (var i=0; i<feed.value.items.length; i++) {
tmp+='<a href="'+feed.value.items[i].link+'">';
if (feed.value.items[i].description) {
function getFeeds()
<h1><u>a Reuters International</u></h1>
<div id='a_source'></div>
<h1><u>b Reuters US</u></h1>
<div id='b_source'></div>
<h1><u>c Reuters UK</u></h1>
<div id='c_source'></div>
<h1><u>g NZ National</u></h1>
<div id='g_source'></div>
<h1><u>h NZ Business</u></h1>
<div id='h_source'></div>
<h1><u>i NZ Sport</u></h1>
<div id='i_source'></div>
*******attempted variation using a placeholder*******
ge = document.getElementById(puthere[count2]);
ge.style.display = "block";
ge.innerHTML = tmp;

Open in new window

Question by:NEILPH
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
  • 5
  • 4

Expert Comment

ID: 24873132
i havent run your script but i would suggest use of jquery... and replace line number 25 of your code with


Jquery's html function works on every browser

Author Comment

ID: 24875844
Hi SadafRasheed. Sorry to be slow getting back to you. A lot of work landed in front of me.

I'm maybe the only developer who'd never heard of jquery but as you suggested, I've given it a go; see http://www.isc.co.nz/feedjlop.htm.

Maybe I did something wrong but it doesn't work [in IE8]. It throws this error at the jquery line...
Message: Object expected
Line: 77
Char: 1
Code: 0
URI: http://www.isc.co.nz/feedjlop.htm

I think I've set that page up correctly. I uploaded jquery-1.3.2.min.js to the same folder as http://www.isc.co.nz/feedjlop.htm and as you can see if you look at the source, I followed their instructions and placed <script type="text/javascript" src="jquery.js"></script> in the <head> just above the normal <script...> line, and then I used your line instead of mine.

I'm not sure whether to make a policy decision to use jquery. It looks like it might be particularly good for JSON, which I use. On the other hand, how many experts at E-Exchange know it. It might severely reduce E-Exchange as my support resource.

Expert Comment

ID: 24876751
You have not placed jquery.js in the path specified. You have given the following path


but if you open it up in browser, you'll get 404.

Go to the following url and download jquery-1.3.2.min.js file.


I have seen a LOT of resources for JQuery, lots of plugins, lots of help, even lots of video tutorials for beginners. I am 100% sure EE also have many JQuery experts. You can post a questions here in EE, asking how many jquery experts are there and then depending on the response you get, you can decide for yourself.
I am, by no means, an expert in javascript but i never had any problem with jquery,, i think every one can use it easily.
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.


Author Comment

ID: 24883938
I hadn't noticed that the script reference suggested by the jquery site was to http://www.isc.co.nz/jquery.js. I've changed it to jquery-1.3.2.min.js and it works. See http://www.isc.co.nz/feedjlop.htm.

Except that unfortunately it doesn't work. Looking at that page in my IE8 it still puts some of the outputs into the wrong <div>, e.g. Reuters UK incorrectly in NZ sport.

I know that these feeds are OK. http://www.isc.co.nz/feedjlop.htm renders correctly in FireFox 3.5.

I've since noticed that there is a jquery zone at E-E as a subzone of javascript.


Author Comment

ID: 24921859

Can you give any more help to make this work or should I close teh question?

Expert Comment

ID: 24922904

i dont know the reason behind this but when i added a div around the tmp text it fixed the problem in ie8 as well.

Try this...
function piper(feed) {
var tmp='';
for (var i=0; i<feed.value.items.length; i++) {
tmp+='<div><a href="'+feed.value.items[i].link+'">';
if (feed.value.items[i].description) {

Open in new window


Author Comment

ID: 24932129
Hi again SadafRasheed

Unfortunately, using your latest code it is still not working in IE8, some feeds are in the wrong <div>; see http://www.isc.co.nz/feeddiv.htm.

However, when I add an alert at the start of...
function getFeed(feed,div_id) {
alert('feed: ' + feed + ' div: ' + div_id)

...as demonstrated at http://www.isc.co.nz/feeddivalert.htm, it appears to work. This suggests that slowing things down is beneficial. I think this hints at a solution, as you'll see if you read the snippet, which details how Experts robinu and sunithnair helped me develop this code. We found that Yahoo Pipes was too fast. You'll see their solutions. I chose sunithnair's solution of using an array. Maybe the answer here is something similar.

Another thing I've noticed is that when instead I put  the alert('feed: ' + tmp + ' div: ' + puthere) near the end of function piper(feed), FireFox appears to render each feed immediately after I click the alert box. IE appears to render all the feeds in one go after I've clicked the final alert box. This seems to me to be a place where things could get confused in IE.

I'll continue working on this but I would value your further input. My javascript skills are not strong.

Thanks.   [By the way, I guess I might as well remove the jquery link.]
Author Comment
Author: NEILPH </M_4362456.html> Date: 02/24/2009 - 04:53PM NZDT
Robinu, I've tried to debug your solution to see why it incorrectly puts
both outputs into div 'b_source', with the second output overwriting the
first one.
I placed alert(puthere); in function getFeed(feed,div_id) and ran the
page. Two alerts appeared, the first showing 'a_source' and the second
showing 'b_source'.
However when I placed alert(puthere); into function piper(feed,puthere)
the two alerts appearances both showed 'b_source'. This looks to be the
source of the problem. Any suggestions?
My current code is in the snippet below...
1:	<script type="text/javascript">        
2:	var puthere;
3:	function getFeed(feed,div_id) {
4:	 puthere=div_id;
5:	 var newScript = document.createElement('script');
6:	 newScript.type = 'text/javascript';
7:	 newScript.src =
8:	 document.getElementsByTagName("head")[0].appendChild(newScript);
9:	}
10:	function piper(feed) {
11:	 alert(puthere);
12:	 var tmp='';
13:	 for (var i=0; i<feed.value.items.length; i++) {
14:	   tmp+='<a href="'+feed.value.items[i].link+'">';
15:	   tmp+=feed.value.items[i].title+'</a><br>';
16:	   if (feed.value.items[i].description) {
17:	     tmp+=feed.value.items[i].description;
18:	   }
19:	   tmp+='<hr>';
20:	 }
21:	 document.getElementById(puthere).innerHTML=tmp;
22:	}      
23:	</script>  
24:	</head>
25:	<body
26:	<div id='a_source'>
27:	</div>  
28:	<div id='b_source'>
29:	</div>
Expert Comment
Author: robinu </M_3572319.html> Date: 02/24/2009 - 07:27PM NZDT
Ahh, I didn't think of that. The two getFeed() function run so 'fast'
after each other the div gets overwritten,
before the contents is placed by the yahoo function.
Try the attached code. Instead of giving the div id of where the contect
is to placed, you give it the function
name for callback. In that callback function you decide which to use.
Will this work for you?
1:	<script type="text/javascript">        
2:	function getFeed(feed,callback) {
3:	 var newScript = document.createElement('script');
4:	 newScript.type = 'text/javascript';
5:	 newScript.src =
6:	 document.getElementsByTagName("head")[0].appendChild(newScript);
7:	}
8:	function piper1(feed) {
9:	  piper(feed,'a_source');
10:	}
11:	function piper2(feed) {
12:	  piper(feed,'b_source');
13:	}
14:	function piper(feed,puthere) {
15:	 alert(puthere);
16:	 var tmp='';
17:	 for (var i=0; i<feed.value.items.length; i++) {
18:	   tmp+='<a href="'+feed.value.items[i].link+'">';
19:	   tmp+=feed.value.items[i].title+'</a><br>';
20:	   if (feed.value.items[i].description) {
21:	     tmp+=feed.value.items[i].description;
22:	   }
23:	   tmp+='<hr>';
24:	 }
25:	 document.getElementById(puthere).innerHTML=tmp;
26:	}      
27:	</script>
28:	</head>
29:	<body
31:	<div id='a_source' style="border:1px solid #f00;">
32:	</div>
34:	<div id='b_source' style="border:1px solid #00f;">
35:	</div>
Expert Comment
Author: sunithnair </M_4780406.html> Date: 02/24/2009 - 07:40PM NZDT
Check this one out. The problem is because the callback happens after a
certain amount of time so you need to save the div element ids in an array.
1:	<html>
2:	<head>
3:	<script type="text/javascript">        
4:	var puthere = new Array();
5:	var count1 = 0;
6:	var count2 = 0;
7:	function getFeed(feed,div_id) {
8:	 puthere[count1]=div_id;
9:	 count1++;
10:	 var newScript = document.createElement('script');
11:	 newScript.type = 'text/javascript';
12:	 newScript.src =
13:	 document.getElementsByTagName("head")[0].appendChild(newScript);
14:	}
15:	function piper(feed) {
16:	 var tmp='';
17:	 for (var i=0; i<feed.value.items.length; i++) {
18:	   tmp+='<a href="'+feed.value.items[i].link+'">';
19:	   tmp+=feed.value.items[i].title+'</a><br>';
20:	   if (feed.value.items[i].description) {
21:	     tmp+=feed.value.items[i].description;
22:	   }
23:	   tmp+='<hr>';
24:	 }
25:	 document.getElementById(puthere[count2]).innerHTML=tmp;
26:	 count2++;
27:	}      
28:	</script>
29:	</head>
30:	<body
32:	<div id='a_source'>
33:	</div>
35:	<div id='b_source'>
36:	</div>
37:	</html>
Author Comment
Author: NEILPH </M_4362456.html> Date: 02/25/2009 - 04:04PM NZDT
Robinu and Sunithnair
Both your solutions work fine so now I have a dilemma alloting points.
This kind of solution originally came from Robinu so you deserve top
marks. However, Sunithnair's final code looks slightly simpler with
multiple array vars versus multiple piper functions. This could be an
issue in my final app where I expect to have 15 RSS feeds. And - maybe
I'm imagining it - but perhaps Sunithnair's runs slightly faster.
I'd like to give you both 500 but if I can't would you both be happy if
I split it 250-250.
By the way, these solutions work just as well if instead of <body
onload> I  put the calls as functions in the header, see snippet. This
seems cleaner to me. Or do you think it is a bad idea?
1:	Robinu  
2:	getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","piper1")  
3:	getFeed("http://feeds.reuters.com/reuters/worldNews","piper2")      
4:	</script>
5:	</head>    
6:	Sunithnair  
8:	getFeed("http://feeds.reuters.com/reuters/worldNews","b_source")
9:	</script>
10:	</head>
Accepted Solution
Author: sunithnair </M_4780406.html> Date: 02/25/2009 - 07:29PM NZDT
I have no issue with the points. It sould be better if you put in the
onload because we can make sure that all the divs have been loaded
before the rss feeds are loaded. You can create a function in which you
can call the getFeed function and call this function in onload like this
1:	<script language='javascript'>
2:	function getFeeds()
3:	{
5:	getFeed("http://feeds.reuters.com/reuters/worldNews","b_source")
6:	}
7:	</script>
8:	<body onload="getFeeds()">
Assisted Solution
Author: robinu </M_3572319.html> Date: 02/25/2009 - 07:38PM NZDT
The points split is fine with me too. And sunithair is right about the
placement of the functions in your page.
© Copyright Experts Exchange LLC 2009.

Open in new window


Author Comment

ID: 25065507

You didn't respond to my last comment and I have been diverted by other work. As a result this Question has remained open. I'd like to close it now without awarding points if that's alright with you.

I have just tested a variation based on the code by Expert robinu that is in the snippet which is contained in my previous last comment. It works in Internet Explorer, i.e. the feeds don't go into the wrong <div>.

I think the difference is that the approach I was discussing with you uses an array. The robinu approach doesn't. I think that maybe Internet Explorer wasn't coping with the array. Perhaps it doesn't allocate enough memory for an array AND feed manipulation.

I look forward to hearing from you.

Accepted Solution

SadafRasheed earned 1000 total points
ID: 25067214
I don't have any objection. i don't claim any points if i can not be of any help. i wish i could be of any help to you :(

Featured Post

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
Ever visit a website where you spotted a really cool looking Font, yet couldn't figure out which font family it belonged to, or how to get a copy of it for your own use? This article explains the process of doing exactly that, as well as showing how…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

609 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