• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1049
  • Last Modified:

How do I send multiple parameters to a javascript function?

My simple HTML page uses a function to call Yahoo Pipes to place multiple RSS feeds on the page. It works fine except that the function places each feed within the same <div> on the page, overwriting the previously called feeds...[see my code A]

I've tried sending another div id parameter to the function, that is unique to each feed so that each feed is displayed in its own div...[see my code B]

However, this gives me this error message:     'document.getElementById[...]' is null or not an object

I suspect I am making a minor syntax error.
Code snippet A:
 
function piper(feed) {
....
 
document.getElementById('rssplace').innerHTML=tmp;
....
 } 
 
</head>
 
<body onLoad='getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml"); getFeed("http://feeds.reuters.com/reuters/worldNews");'>
 
<div id='rssplace'>
</div>
 
 
************************************************************************
Code snippet B:
 
function piper(feed,puthere) {
....
 
document.getElementById(puthere).innerHTML=tmp;
....
 } 
 
</head>
 
<body onLoad='getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","a_source"); getFeed("http://feeds.reuters.com/reuters/worldNews","b_source");'>
 
<div id='a_source'>
</div>
 
<div id='b_source'>
</div>

Open in new window

0
NEILPH
Asked:
NEILPH
  • 8
  • 5
  • 4
  • +1
2 Solutions
 
RobinSoftware EngineerCommented:
At first sight, your code looks fine.

Are there any other references to original div id 'rssplace' in the piper function?
0
 
alexpercsiCommented:
I'm not sure I fully understand you problem but instead of doing this
document.getElementById('rssplace').innerHTML=tmp;

you might want to try this:
document.getElementById('rssplace').innerHTML+=tmp;
0
 
sunithnairCommented:
where is the getFeed function and where are you calling the piper function?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
NEILPHAuthor Commented:
I think I'd better give you the full functions [see snippet].

Code A is the original that works except that multiple outputs overwrite each other.

Code B aims to to resolve the overwriting by directing output to different divs. But it produces the error: 'document.getElementById[...]' is null or not an object
Code A:
 
      <script type="text/javascript">         
function getFeed(feed) {
            var newScript = document.createElement('script');
                newScript.type = 'text/javascript';
                newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=piper&feed='+feed;
            document.getElementsByTagName("head")[0].appendChild(newScript);
         }
              function piper(feed) {
            var tmp='';
            for (var i=0;
 i<feed.value.items.length;
 i++) {               tmp+='<a href="'+feed.value.items[i].link+'">';
               tmp+=feed.value.items[i].title+'</a><br>';
               if (feed.value.items[i].description) 
{                  tmp+=feed.value.items[i].description;
               }
               tmp+='<hr>';
            }            
document.getElementById('rssLayer').innerHTML=tmp;
         } 
     </script>
 
</head>
 
<body onLoad='getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml"); getFeed("http://feeds.reuters.com/reuters/worldNews");'>
 
<div id='rssLayer'>
</div>
 
********************************
Code B:
 
      <script type="text/javascript">         
function getFeed(feed) {            
var newScript = document.createElement('script');
                newScript.type = 'text/javascript';
                newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=piper&feed='+feed;
            document.getElementsByTagName("head")[0].appendChild(newScript);
         }
              function piper(feed,puthere)
 {            var tmp='';
            for (var i=0; i<feed.value.items.length;
 i++) 
{               tmp+='<a href="'+feed.value.items[i].link+'">';
               tmp+=feed.value.items[i].title+'</a><br>';
               if (feed.value.items[i].description) 
{                  tmp+=feed.value.items[i].description;
               }
               tmp+='<hr>';
            }
            document.getElementById(puthere).innerHTML=tmp;
         }      
</script>
 
</head>
 
<body onLoad='getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","a_source"); getFeed("http://feeds.reuters.com/reuters/worldNews","b_source");'>
 
<div id='a_source'>
</div>
 
<div id='b_source'>
</div>

Open in new window

0
 
alexpercsiCommented:
Use version A and try my code:
document.getElementById('rssplace').innerHTML+=tmp;

the += operator concatenates so if you have a="1" and you do a+="1" you will have "11"

That way, your previous result is saved.
0
 
RobinSoftware EngineerCommented:
In option B, change it to:

The yahoo scrip is calling the piper function.
<script type="text/javascript">         
var puthere;
function getFeed(feed,div_id) {
  puthere=div_id;
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=piper&feed='+feed;
  document.getElementsByTagName("head")[0].appendChild(newScript);
}
function piper(feed,puthere) {
  var tmp='';
  for (var i=0; i<feed.value.items.length; i++) {
    tmp+='<a href="'+feed.value.items[i].link+'">';
    tmp+=feed.value.items[i].title+'</a><br>';
    if (feed.value.items[i].description) {
      tmp+=feed.value.items[i].description;
    }
    tmp+='<hr>';
  }
  document.getElementById(puthere).innerHTML=tmp;
}      
</script>

Open in new window

0
 
sunithnairCommented:
Use this modified version A with dynamic div
      <script type="text/javascript">         
var dynamicDivCount = 0;
function getFeed(feed) {
            var newScript = document.createElement('script');
                newScript.type = 'text/javascript';
                newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=piper&feed='+feed;
            document.getElementsByTagName("head")[0].appendChild(newScript);
         }
              function piper(feed) {
            var tmp='';
            for (var i=0;
 i<feed.value.items.length;
 i++) {               tmp+='<a href="'+feed.value.items[i].link+'">';
               tmp+=feed.value.items[i].title+'</a><br>';
               if (feed.value.items[i].description) 
{                  tmp+=feed.value.items[i].description;
               }
               tmp+='<hr>';
            }
var newDiv = document.createElement("div");
newDiv.innerHTML = tmp; 
newDiv.setAttribute("id", "div" + dynamicDivCount);           
document.getElementById('rssLayer').appendChild(newDiv);
dynamicDivCount++;
         } 
     </script>

Open in new window

0
 
RobinSoftware EngineerCommented:
A small fix, please change in my proposal

function piper(feed,puthere) {

to

function piper(feed) {
0
 
NEILPHAuthor Commented:
Robinu
I have tested your solution as per my snippet below, but it doesn't seem to work. It outputs the first TVNZ rss to the second div b_source, and then overwrites it with the second Reuters rss. This is the same problem I had with my original Code A.

By the way, I chose your solution to test first because it looks the most flexible. It appears to let me place individual outputs anywhere on the page, whereas it looks to me as if the solutions of sunithnair and alexpercsi would only output the multiple rss feeds one after another in a column. Maybe I'm wrong.
function getFeed(feed,div_id) {
  puthere=div_id;
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=piper&feed='+feed;
  document.getElementsByTagName("head")[0].appendChild(newScript);
}
function piper(feed) {
  var tmp='';
  for (var i=0; i<feed.value.items.length; i++) {
    tmp+='<a href="'+feed.value.items[i].link+'">';
    tmp+=feed.value.items[i].title+'</a><br>';
    if (feed.value.items[i].description) {
      tmp+=feed.value.items[i].description;
    }
    tmp+='<hr>';
  }
  document.getElementById(puthere).innerHTML=tmp;
}      
</script>
 
 
</head>
 
 
 
<body onLoad='getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","a_source"); getFeed("http://feeds.reuters.com/reuters/worldNews","b_source");'>
<h3>Harbour News</h3>
 
 
<div id='a_source'>
</div>
 
<div id='b_source'>
</div>

Open in new window

0
 
NEILPHAuthor Commented:
I've now tested the solutions of sunithnair and alexpercsi. They both work but as I feared, they only output the multiple rss feeds one after another in a column.

This is too inflexible. I need to be able to put each feed output into its own div so that I can place it exactly where I like in the page layout, as shown in my original question. Can you modify your code to do this?

Otherwise, sunithnair yours does this but your code doesn't seem to work, [see my above post].

I look forward to comments.
0
 
NEILPHAuthor Commented:
Whoops, in my previous post, for "Otherwise, sunithnair yours does this but your code doesn't seem to work, [see my above post]. "

I meant "Otherwise, Robinu yours does this but your code doesn't seem to work, [see my above post]. "
0
 
NEILPHAuthor Commented:
Whoops again Robinu. A couple of posts above when I said I couldn't get yours to work, I missed showing you the first 2 lines in the snippet. See the full snippet below.

The bottom line though is that it doesn't seem to work. I'd love it to as I think it's a good solution. Puzzling.
<script type="text/javascript">         
var puthere;
function getFeed(feed,div_id) {
  puthere=div_id;
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=piper&feed='+feed;
  document.getElementsByTagName("head")[0].appendChild(newScript);
}
function piper(feed,puthere) {
  var tmp='';
  for (var i=0; i<feed.value.items.length; i++) {
    tmp+='<a href="'+feed.value.items[i].link+'">';
    tmp+=feed.value.items[i].title+'</a><br>';
    if (feed.value.items[i].description) {
      tmp+=feed.value.items[i].description;
    }
    tmp+='<hr>';
  }
  document.getElementById(puthere).innerHTML=tmp;
}      
</script>

Open in new window

0
 
NEILPHAuthor Commented:

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...
<script type="text/javascript">         
var puthere;
function getFeed(feed,div_id) {
  puthere=div_id;
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=piper&feed='+feed;
  document.getElementsByTagName("head")[0].appendChild(newScript);
}
function piper(feed) {
  alert(puthere);
  var tmp='';
  for (var i=0; i<feed.value.items.length; i++) {
    tmp+='<a href="'+feed.value.items[i].link+'">';
    tmp+=feed.value.items[i].title+'</a><br>';
    if (feed.value.items[i].description) {
      tmp+=feed.value.items[i].description;
    }
    tmp+='<hr>';
  }
  document.getElementById(puthere).innerHTML=tmp;
}      
</script>
 
</head>
<body onLoad='getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","a_source"); getFeed("http://feeds.reuters.com/reuters/worldNews","b_source");'>
 
<div id='a_source'>
</div>
 
<div id='b_source'>
</div>

Open in new window

0
 
RobinSoftware EngineerCommented:
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?
<script type="text/javascript">         
function getFeed(feed,callback) {
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback='+callback+'&feed='+feed;
  document.getElementsByTagName("head")[0].appendChild(newScript);
}
function piper1(feed) {
   piper(feed,'a_source');
}
function piper2(feed) {
   piper(feed,'b_source');
}
function piper(feed,puthere) {
  alert(puthere);
  var tmp='';
  for (var i=0; i<feed.value.items.length; i++) {
    tmp+='<a href="'+feed.value.items[i].link+'">';
    tmp+=feed.value.items[i].title+'</a><br>';
    if (feed.value.items[i].description) {
      tmp+=feed.value.items[i].description;
    }
    tmp+='<hr>';
  }
  document.getElementById(puthere).innerHTML=tmp;
}      
</script>
</head>
<body onLoad='getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","piper1"); getFeed("http://feeds.reuters.com/reuters/worldNews","piper2");'>
 
<div id='a_source' style="border:1px solid #f00;">
</div>
 
<div id='b_source' style="border:1px solid #00f;">
</div>

Open in new window

0
 
sunithnairCommented:
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.
<html>
<head>
<script type="text/javascript">         
var puthere = new Array();
var count1 = 0;
var count2 = 0;
function getFeed(feed,div_id) {
  puthere[count1]=div_id;
  count1++;
  var newScript = document.createElement('script');
  newScript.type = 'text/javascript';
  newScript.src = 'http://pipes.yahoo.com/pipes/9oyONQzA2xGOkM4FqGIyXQ/run?&_render=json&_callback=piper&feed='+feed;
  document.getElementsByTagName("head")[0].appendChild(newScript);
}
function piper(feed) {
  var tmp='';
  for (var i=0; i<feed.value.items.length; i++) {
    tmp+='<a href="'+feed.value.items[i].link+'">';
    tmp+=feed.value.items[i].title+'</a><br>';
    if (feed.value.items[i].description) {
      tmp+=feed.value.items[i].description;
    }
    tmp+='<hr>';
  }
  document.getElementById(puthere[count2]).innerHTML=tmp;
  count2++;
}      
</script>
</head>
<body onLoad='getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","a_source"); getFeed("http://feeds.reuters.com/reuters/worldNews","b_source");'>
 
<div id='a_source'>
</div>
 
<div id='b_source'>
</div>
</html>

Open in new window

0
 
NEILPHAuthor Commented:
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?

Thanks.
Robinu
 
getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","piper1")   
getFeed("http://feeds.reuters.com/reuters/worldNews","piper2")      
</script>
</head>
 
 
Sunithnair
 
getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","a_source")   
getFeed("http://feeds.reuters.com/reuters/worldNews","b_source") 
</script>
</head>

Open in new window

0
 
sunithnairCommented:
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
<script language='javascript'>
function getFeeds()
{
getFeed("http://tvnz.co.nz/content/1323589/rss_20_skin.xml","a_source")   
getFeed("http://feeds.reuters.com/reuters/worldNews","b_source")
}
</script>
<body onload="getFeeds()">

Open in new window

0
 
RobinSoftware EngineerCommented:
The points split is fine with me too. And sunithair is right about the placement of the functions in your page.
Thanks.
0
 
NEILPHAuthor Commented:
Thanks guys. You've done a darn good job.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 8
  • 5
  • 4
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now