Hi,
I have some code to dynamically retrieve one of three AJAX files and insert it into a DIV
The Javascript is
function createajax() {
var Ajax;
try{
Ajax = new XMLHttpRequest();
} catch (e){
try{
Ajax = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
Ajax = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
alert("Error!!!");
return false;
}
}
}
return Ajax;
}
function basicAjaxSwitch(File, Recipient, Animate) {
if ( Animate == true ) {
Animation(document.getElementById(Recipient)).duration(100).from('opacity', 1).to('opacity', 0).go();
}
basicAjaxSwitch = createajax();
basicAjaxSwitch.onreadystatechange = function(){
if(basicAjaxSwitch.readyState == 4){
if ( Animate == true ) {
Animation(document.getElementById(Recipient)).duration(100).checkpoint().duration(100).from('opacity', 0).to('opacity', 1).go();
setTimeout('document.getElementById("'+Recipient+'").innerHTML = basicAjaxSwitch.responseText;', 100);
} else {
document.getElementById(Recipient).innerHTML = basicAjaxSwitch.responseText;
}
}
}
basicAjaxSwitch.open("GET", "/ajax/"+File, true);
basicAjaxSwitch.send(null);
}
function changesidebarinfo(changeto) {
if ( changeto == 'login' ) {
Animation(document.getElementById('main_layout_accountlinks_background')).to('left', '0px').duration(100).go();
Animation(document.getElementById('main_layout_accountlinks_login')).duration(100).to('color', '#FFF').go();
Animation(document.getElementById('main_layout_accountlinks_signup')).duration(100).to('color', '#000').go();
Animation(document.getElementById('main_layout_accountlinks_about')).duration(100).to('color', '#000').go();
basicAjaxSwitch('contentinfo/login.php', 'main_layout_rsbinfo_container', true);
} else if ( changeto == 'join' ) {
Animation(document.getElementById('main_layout_accountlinks_background')).to('left', '50px').duration(100).go();
Animation(document.getElementById('main_layout_accountlinks_login')).duration(100).to('color', '#000').go();
Animation(document.getElementById('main_layout_accountlinks_signup')).duration(100).to('color', '#FFF').go();
Animation(document.getElementById('main_layout_accountlinks_about')).duration(100).to('color', '#000').go();
basicAjaxSwitch('contentinfo/join.php', 'main_layout_rsbinfo_container', true);
} else if ( changeto == 'about' ) {
Animation(document.getElementById('main_layout_accountlinks_background')).to('left', '100px').duration(100).go();
Animation(document.getElementById('main_layout_accountlinks_login')).duration(100).to('color', '#000').go();
Animation(document.getElementById('main_layout_accountlinks_signup')).duration(100).to('color', '#000').go();
Animation(document.getElementById('main_layout_accountlinks_about')).duration(100).to('color', '#FFF').go();
basicAjaxSwitch('contentinfo/about.php', 'main_layout_rsbinfo_container', true);
}
}
And the HTML that triggers the actions is
<div id="main_layout_accountlinks">
<div id="main_layout_accountlinks_background"> </div>
<div id="main_layout_accountlinks_login" onclick="changesidebarinfo('login');">Log In</div>
<div id="main_layout_accountlinks_signup" onclick="changesidebarinfo('join');">Join</div>
<div id="main_layout_accountlinks_about" onclick="changesidebarinfo('about');">About</div>
</div>
When I click one of the 3 buttons (doesn't matter which) the result is exactly as intended. Then when I click another (or the same) button, nothing happens and Firebug gives the error
basicAjaxSwitch is not a function
changesidebarinfo("login")site.js (line 61)
function onclick(event) { changesidebarinfo("login"); }(click clientX=816, clientY=41)2 (line 2)
[Break on this error] basicAjaxSwitch('contentinfo/login.php...'main_layout_rsbinfo_container', true);\n
Regards,
Sam Rudge