Mauu
09-12-2006, 10:00 PM
At YoungCoders (http://www.youngcoders.com), I recently wrote an ajax enabled recent posts widget, and I thought I would post it here. I do not recommended this for high traffic forums, as you'll be running a lot of queries.
I'm going to forget to check back here and update this with any changes. So, please see here (http://www.youngcoders.com/showthread.php?p=95288), which is where I will maintain and try to provide support.
I) Setting up the Feed
1) First, you need the improved external.php file from vBulletin.org. The link is here: https://vborg.vbsupport.ru/showthread.php?t=105008&highlight=fps_external
2) This new external file lacks some of the documented features, and the feature we need is the latest posts (not latest threads). The attached file resolves that and may only be used if you have a valid vBulletin license. The reason we may not use the built-in one is because it does not have support for permissions and will therefore treat every user as a guest. Credit for fps_external.php goes to the original authors; my revision was trivial.
3) Upload fps_external.php into your forum directory.
II) Setting up the Ajax
1) Our threads are going to appear in an unordered list. So, let's setup our default list: <ul id="latestthreads">
<li>Please wait while the feed updates.</li>
</ul>
We have to throw in the please wait to make our page validate and also to notify our users that we're fetching the feed.
2) You then need some JavaScript. I'm not going to document this as it's pretty self-explanatory:
/*
* Ajax sidebar for vBulletin.
* Depends: hacked fps_external.php
* Created for: www.youngcoders.com
*/
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function updateSidebarResponse() {
if(http.readyState == 4){
var length = document.getElementById('latestthreads').getElemen tsByTagName('li').length;
for (var y = 0; y < length; y++)
{
document.getElementById('latestthreads').removeChi ld( document.getElementById('latestthreads').getElemen tsByTagName('li')[0] );
}
var response = http.responseXML.getElementsByTagName('source')[0].getElementsByTagName('thread');
var length = response.length;
for (var x = 0; x < length; x++)
{
var id = response[x].getAttribute('id');
var title = response[x].getElementsByTagName('title')[0].childNodes[0].nodeValue;
var author = response[x].getElementsByTagName('author')[0].childNodes[0].nodeValue;
var when = response[x].getElementsByTagName('time')[0].childNodes[0].nodeValue;
var top = document.createElement('div');
var bottom = document.createElement('div');
var option = document.createElement('li');
var link = document.createElement('a');
link.href = 'showthread.php?goto=newpost&t=' + id;
link.appendChild(document.createTextNode(title));
var by = document.createElement('small');
by.appendChild(document.createTextNode(' by ' + author + ' at ' + when));
option.appendChild(link);
option.appendChild(by);
document.getElementById('latestthreads').appendChi ld(option);
}
}
}
function updateSidebar() {
http.open('get', 'fps_external.php?type=xml&qty=20&items=active');
http.onreadystatechange = updateSidebarResponse;
http.send(null);
}
updateSidebar();
The above code will fetch the sidebar just once. To make it update, you must have it run through intervals:setInterval('updateSidebar()', 60000 * 1); // Update every minute
setInterval('updateSidebar()', 60000 * 3); // Update every 3 minutes
Terms of Use: For each site you deploy this on, you must tell one friend about YoungCoders.com ;)
For a preview and more discussion: http://www.youngcoders.com/showthread.php?p=95288&styleid=19
I'm going to forget to check back here and update this with any changes. So, please see here (http://www.youngcoders.com/showthread.php?p=95288), which is where I will maintain and try to provide support.
I) Setting up the Feed
1) First, you need the improved external.php file from vBulletin.org. The link is here: https://vborg.vbsupport.ru/showthread.php?t=105008&highlight=fps_external
2) This new external file lacks some of the documented features, and the feature we need is the latest posts (not latest threads). The attached file resolves that and may only be used if you have a valid vBulletin license. The reason we may not use the built-in one is because it does not have support for permissions and will therefore treat every user as a guest. Credit for fps_external.php goes to the original authors; my revision was trivial.
3) Upload fps_external.php into your forum directory.
II) Setting up the Ajax
1) Our threads are going to appear in an unordered list. So, let's setup our default list: <ul id="latestthreads">
<li>Please wait while the feed updates.</li>
</ul>
We have to throw in the please wait to make our page validate and also to notify our users that we're fetching the feed.
2) You then need some JavaScript. I'm not going to document this as it's pretty self-explanatory:
/*
* Ajax sidebar for vBulletin.
* Depends: hacked fps_external.php
* Created for: www.youngcoders.com
*/
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function updateSidebarResponse() {
if(http.readyState == 4){
var length = document.getElementById('latestthreads').getElemen tsByTagName('li').length;
for (var y = 0; y < length; y++)
{
document.getElementById('latestthreads').removeChi ld( document.getElementById('latestthreads').getElemen tsByTagName('li')[0] );
}
var response = http.responseXML.getElementsByTagName('source')[0].getElementsByTagName('thread');
var length = response.length;
for (var x = 0; x < length; x++)
{
var id = response[x].getAttribute('id');
var title = response[x].getElementsByTagName('title')[0].childNodes[0].nodeValue;
var author = response[x].getElementsByTagName('author')[0].childNodes[0].nodeValue;
var when = response[x].getElementsByTagName('time')[0].childNodes[0].nodeValue;
var top = document.createElement('div');
var bottom = document.createElement('div');
var option = document.createElement('li');
var link = document.createElement('a');
link.href = 'showthread.php?goto=newpost&t=' + id;
link.appendChild(document.createTextNode(title));
var by = document.createElement('small');
by.appendChild(document.createTextNode(' by ' + author + ' at ' + when));
option.appendChild(link);
option.appendChild(by);
document.getElementById('latestthreads').appendChi ld(option);
}
}
}
function updateSidebar() {
http.open('get', 'fps_external.php?type=xml&qty=20&items=active');
http.onreadystatechange = updateSidebarResponse;
http.send(null);
}
updateSidebar();
The above code will fetch the sidebar just once. To make it update, you must have it run through intervals:setInterval('updateSidebar()', 60000 * 1); // Update every minute
setInterval('updateSidebar()', 60000 * 3); // Update every 3 minutes
Terms of Use: For each site you deploy this on, you must tell one friend about YoungCoders.com ;)
For a preview and more discussion: http://www.youngcoders.com/showthread.php?p=95288&styleid=19