CODEWITHSUNDEEP
javascript
Surendar K
Surendar K

Reputation: 379

how to use the below javascript as common, instead of writing in each div tag?

JavaScript goes here.. and i have many sections of div tag.. i want to make this script common for all divs that i am using.. where as only the url's have to change reference with the corresponding div.. plz help..??

<script type="text/javascript">

var feedcontainer1=document.getElementById("feeddiv1")
var rssoutput1="<b>TOI</b><br /><ul>"

function rssfeedsetup1(){
google.load("feeds", "1")
var feedpointer1=new google.feeds.Feed("http://handheld.softpedia.com/backend-software.xml") //Google Feed API method
feedpointer1.setNumEntries(10) //Google Feed API method
feedpointer1.load(displayfeed1) //Google Feed API method
}

function displayfeed1(result){
if (!result.error){
var thefeeds1=result.feed.entries
for (var i=0; i<thefeeds1.length; i++)
rssoutput1+="<li><a href='" + thefeeds1[i].link + "'>" + thefeeds1[i].title + " »" + "</a></li>"
rssoutput1+="</ul>"
feedcontainer1.innerHTML=rssoutput1
}
else
alert("Error fetching feeds!")
}
</script>

Upvotes: 1

Views: 223

Answers (2)

ndp
ndp

Reputation: 21996

You need to create a callback function that knows about where to put the data returned from google. In Javascript, the best way to do this is to use a function closure to remember the destination. Therefore, you need a function that creates the callback, such as:

// Return function that receives feed data from google and populates the given div.
function makeDisplayFeedCallback(divId) {
    var destDiv = document.getElementById(divId)
    return function callback(result) {
        var output = "<b>TOI</b><br /><ul>"
        if (!result.error) {
            var entries = result.feed.entries
            for (var i = 0; i < entries.length; i++)
                output += "<li><a href='" + entries[i].link + "'>" + entries[i].title + " »" + "</a></li>"
            output += "</ul>"
            destDiv.innerHTML = output
        }
        else
            alert("Error fetching feeds!")
    }
}

This function can be called multiple times, and each time it will return a function that knows how to populate different divs. You'll call it something like:

var callback = makeDisplayFeedCallback("feeddiv1");
setupRssFeed(callback);

and finally, your setup function needs the callback (and perhaps other parameters):

function setupRssFeed(callback) {
    google.load("feeds", "1")
    var feed = new google.feeds.Feed("http://handheld.softpedia.com/backend-software.xml");
    feed.setNumEntries(10);
    feed.load(callback);
}

Overall, this is better separation of concerns as well, so it will be easier to maintain.

Upvotes: 1

DanRedux
DanRedux

Reputation: 9359

Each div could store the feed URL in it's "id" attribute. Also give them all a class. Finally, include jQuery. Now your code can be something like:

<div class='feed' id='http://handheld.softpedia.com/backend-software.xml'></div>
<div class='feed' id='http://handheld.softpedia.com/frontend-software.xml'></div>

Then use jQuery to start all the feeds:

$('.feed').each(rssfeedsetup1);

Just make sure to use the "this" keyword to get the url of the feed (which you get by using this.id) and to append the feed data to it ($(this).append(result))

Upvotes: 0

Related Questions