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">&nbsp;</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

Inside the function basicAjaxSwitch you are defining a variable basicAjaxSwitch so it's being overwritten. Just use a different variable name inside the function.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.