?
Solved

How do I send multiple parameters to a javascript function?

Posted on 2009-02-23
19
Medium Priority
?
963 Views
Last Modified: 2012-05-06
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
Comment
Question by:NEILPH
  • 8
  • 5
  • 4
  • +1
19 Comments
 
LVL 16

Expert Comment

by:Robin
ID: 23715754
At first sight, your code looks fine.

Are there any other references to original div id 'rssplace' in the piper function?
0
 
LVL 7

Expert Comment

by:alexpercsi
ID: 23715755
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
 
LVL 16

Expert Comment

by:sunithnair
ID: 23715849
where is the getFeed function and where are you calling the piper function?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:NEILPH
ID: 23716013
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
 
LVL 7

Expert Comment

by:alexpercsi
ID: 23716108
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
 
LVL 16

Expert Comment

by:Robin
ID: 23716161
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
 
LVL 16

Expert Comment

by:sunithnair
ID: 23716193
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
 
LVL 16

Expert Comment

by:Robin
ID: 23716212
A small fix, please change in my proposal

function piper(feed,puthere) {

to

function piper(feed) {
0
 

Author Comment

by:NEILPH
ID: 23716463
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
 

Author Comment

by:NEILPH
ID: 23717639
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
 

Author Comment

by:NEILPH
ID: 23717655
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
 

Author Comment

by:NEILPH
ID: 23717687
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
 

Author Comment

by:NEILPH
ID: 23718156

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
 
LVL 16

Expert Comment

by:Robin
ID: 23718764
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
 
LVL 16

Expert Comment

by:sunithnair
ID: 23718816
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
 

Author Comment

by:NEILPH
ID: 23729768
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
 
LVL 16

Accepted Solution

by:
sunithnair earned 1000 total points
ID: 23730778
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
 
LVL 16

Assisted Solution

by:Robin
Robin earned 1000 total points
ID: 23730822
The points split is fine with me too. And sunithair is right about the placement of the functions in your page.
Thanks.
0
 

Author Closing Comment

by:NEILPH
ID: 31550301
Thanks guys. You've done a darn good job.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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)
Suggested Courses

755 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