Kenai APIs: Discussion: Kenai Forum Feed on Website

Mailing Lists
Downloads
» Downloads
Source Code Repositories
» examples
» kenai_tools
Message Forums
» Discussion
Wikis
» Kenai API Docs

Kenai APIs was started in April 2009, is owned by mw46d, and has 41 members.

» Join This Project

Kenai Forum Feed on Website

» Back to forum topics

4 posts

Replies: 3 - Last Post: December 17, 2009 02:32
by: Bruce Schubert

« Older Topic » Newer Topic

showing 1 - 4 of 4

Bruce Schubert

Posted: November 17, 2009 20:01 by Bruce Schubert

» Permalink

Hi,

I developed the following script for displaying recent topics on my project website. It's my first foray into JavaScript and AJAX. Project Kenai's John 'jb' Brock was instrumental in the script's evolution. Thanks jb!

The script uses jQuery and JSON to perform asynchronous Kenai API calls to populate 'div' elements on my Emxsys project web page with forum topics and details, seen here: http://emxsys.kenai.com/news.

The script makes recursive calls to load an array with all of a forum's topics. After the array is populated, its order is reversed to so as to output just the most recent topics. As each topic is output to html, a 'div' element is created and uniquely named to host the subject's details, which are retrieved later in a separate query.

An important thing to remember is a JavaScript function will return before an embedded getJSON callback returns - this is the asynchronous nature of AJAX.

-- Bruce

<head>
<!-- Kenai Feed -->
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">

// GLOBALS
forumTopics = new Array();
myForumTopicsContent = "";

/*****************************************************
 * The existing Forum API does not return a web_url
 * parameter, so this function creates one out of the API
 * URL that is provided.
 ******************************************************/
function makeWebURL(url){
    url = url.replace('https','http');
    url = url.replace('/api/','/');
    url = url.replace('features','forums');
    cleanedURL = url.slice(0,-5);

    return cleanedURL;
};

/****************************************************
 * Display post details in a div element created
 * for this topic by loadForumTopics.
 * The div HTML must exist before invoking this query
 ***************************************************/
function getPosts(topic, subjectNo)
{
    jQuery.getJSON(topic + "?callback=?", function(subject)
    {
        var content = " Posts: " + subject["post_count"];
        content += ", Views: " + subject["view_count"];
        content += ", Last Post: " + subject["last_post_at"];

        // Display this text in the div element reserved for this topic
        $('#subject'+subjectNo).html(content);
    });
};


/*******************************************************
 * Recursively load all the topics from paginated JSON
 * query results into the #myForumTopics div element.
 *******************************************************/
function loadForumTopics(uri)
{
    // Adjust the uri syntax can handle muliple parameters
    if (uri.search('page=') > -1) {
        uri += '&callback=?';
    } else {
        uri += '?callback=?';
    }
    jQuery.getJSON(uri, function(forum) 
    {
        // Load all the forum topics into an array
        var size = forumTopics.length;
        for (var i = 0; i < forum["topics"].length; i++) {
            forumTopics[size+i] = forum["topics"][i];
        }
        // Recurse all the pages
        if (forum["next"] != null) {
            loadForumTopics(forum["next"]);
        }
        // ... then display the topics
        else {
            // How many topics are we going to display?
            var maxNumTopics = 7;

            // Show the most topic recent first
            forumTopics.reverse();

            // Dump the topics array into a bullet list
            myForumTopicsContent = "<ul id='startTree'>"
            for (var i = 0; i < forumTopics.length && i < maxNumTopics; i++) {
                var url = makeWebURL(forumTopics[i].href);
                myForumTopicsContent += "<li><a href=" + url + ">" + forumTopics[i].subject + "</a>";

                // Reserve a div element for this subject's details 
                myForumTopicsContent += "<div id=subject"+i+"></div>";
                myForumTopicsContent += "</li>";
            }
            myForumTopicsContent += "</ul>"

            // Update the HTML (adds the div elements for subsquent getPosts)
            $("#myForumTopics").html(myForumTopicsContent);

            // Invoke the posts query to populate the subject div elements
            for (var i = 0; i < forumTopics.length && i < maxNumTopics; i++) {
                getPosts(forumTopics[i].href, i);
            }
        }
    });
};

/********************************************************
 * This returns the subject and web url for the "Forum"
 * forum in the selected project.
 ********************************************************/
function getTopics(proj, forum)
{
    $("#myForumTopics").empty();

    if (proj != "")
    {
        var uri = "https://kenai.com/api/projects/" + proj + "/features/" + forum + "/topics.json"
        loadForumTopics(uri);
    }
    else
    {
        $("#myForumTopics").html("No project(s) have been selected!");
    }
};

/********************************************************
 * Populate the forum topics after the page is ready
 ********************************************************/
$(document).ready(function()
{
    getTopics("cps","forum");
});
</script>
</head>

<body>
<h4>Recent Kenai Project Forum Topics</h4>
<div id="myForumTopics">
</div>
</body>

Sergio Valdez	Posted: December 02, 2009 22:18 by Sergio Valdez » Permalink
	Thanks, this is helpfull

Peter Mount

Posted: December 10, 2009 09:29 by Peter Mount

» Permalink

I've made a few modifications to this script to make it a bit for useful.

You can find the script at http://reteptools.kenai.com/blog/forumFeed.js

The minor changes I made were:

Made it a separate .js file so it can be included easier on multiple pages,
moved some vars as parameters to the various calls to allow multiple instances to occur on the page, i.e. multiple project feeds on one page.

You can see it in action on the reteptools homepage: http://reteptools.kenai.com/ where I have it showing the forums of all three of my projects on kenai.

Peter

Bruce Schubert	Posted: December 17, 2009 02:32 by Bruce Schubert » Permalink
	Hi Peter, Thanks for the improvements. Your reteptools homepage looks pretty cool. I see you've integrated it into your blogspot. Now that's very cool. -- Bruce Emxsys.com

Replies: 3 - Last Post: December 17, 2009 02:32
by: Bruce Schubert

« Older Topic » Newer Topic