Ok, I have a javascript question! This is the code I use for prototype to make a xmlhtml request and put the output in the content div. How do I go about putting more of these on one page (e.g another div called content2 with a set of links to call data there)? Would I have to duplicate var tabs, function getTabData(id), rename them and their references?
[code]
function init () {
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++) {
$(tabs[i].id).onclick = function () {
getTabData(this.id);
}
}
}
function getTabData(id) {
var url = 'js/ajax_memberlist.asp';
var rand = Math.random(9999);
var pars = 'id=' + id + '&rand=' + rand;
var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
$('load').style.display = 'block';
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
$('load').style.display = 'none';
$('content').innerHTML = newData;
}
Getting data...
Recent Posters
[/code]
Also, is there a way to make links in the content div to show whatever is linked in the content div again?
There is a good set of docs here, a direct link to the request stuff: http://www.sergiopereira.com/articles/prototype.js.html#UsingAjaxRequest
I think you want both the global handlers, and use the Updater class instead.
The global handler will replace those "$('load')." lines:
[code]
var myGlobalHandlers = {
onCreate: function(){
Element.show('load');
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide('load');
}
}
};
Ajax.Responders.register(myGlobalHandlers);
[/code]
For the content stuff you could use something like this (btw, you don't need the random number on the end if the data doesn't change regularly):
[code]
function init ()
{
var tabs = document.getElementsByClassName('tabs');
for (var i = 0; i < tabs.length; i++)
{
$(tabs[i].id).onclick = function () {
getTabData(this.id, 'content');
}
}
}
function getTabData(id, destElemName)
{
var url = 'js/ajax_memberlist.asp';
var pars = 'id=' + id;
var myAjax = new Ajax.Updater(
destElemName,
url,
{
method: 'get',
parameters: pars
});
}
[/code]