Jump to content

Need help in ajax tabs


doforumda

Recommended Posts

hi i just created ajax tabs. it works fine but it contains too many functions for just three tabs. I want to know any other way to reduce these amount of functions. i am new to ajax. my code is below

 

data.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="script.js" type="text/javascript"></script>
<style>
.tab {
width: 100px;
height: 25px;
cursor: pointer;
background-color: #069;
}

.tab:hover, .tab:active {
background-color: #0FF;
}
</style>
</head>

<body>
<p><div class="tab" onclick="homePage()">Home</div></p>
<p><div class="tab" onclick="contactPage()">Contact</div></p>
<p><div class="tab" onclick="portfolioPage()">Portfolio</div></p>
<div id="updateArea"></div>
</body>
</html>

 

and script.js is here

window.onload = initAll;
var xhr = false;

function initAll() {
if(window.XMLHttpRequest) {
		xhr = new XMLHttpRequest();
}
else {
	if(window.ActiveXObject) {
		try {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e) { }
	}
}
}
function homePage() {
if(xhr) {
	xhr.onreadystatechange = showHomeContents;
	xhr.open("GET","pageHome.txt", true);
	xhr.send(null);
}
else {
	document.getElementById("updateArea").innerHTML = "Sorry but the XHR could not be created.";
}
}

function contactPage() {
if(xhr) {
	xhr.onreadystatechange = showContactContents;
	xhr.open("GET","pageContact.txt", true);
	xhr.send(null);
}
else {
	document.getElementById("updateArea").innerHTML = "Sorry but the XHR could not be created.";
}
}

function portfolioPage() {
if(xhr) {
	xhr.onreadystatechange = showPortfolioContents;
	xhr.open("GET","pagePortfolio.txt", true);
	xhr.send(null);
}
}

function showHomeContents() {
if(xhr.readyState == 4) {
	if(xhr.status == 200) {
			var outMsg = xhr.responseText;
	}
	else {
		var outMsg = "Sorry there is a problem.";
	}
	document.getElementById("updateArea").innerHTML = outMsg;
}
}

function showContactContents() {
if(xhr.readyState == 4) {
	if(xhr.status == 200) {
			var outMsg = xhr.responseText;
	}
	else {
		var outMsg = "Sorry there is a problem.";
	}
	document.getElementById("updateArea").innerHTML = outMsg;
}
}

function showPortfolioContents() {
if(xhr.readyState == 4) {
	if(xhr.status == 200) {
		var outMsg = xhr.responseText;
	}
	else {
		var outMsg = "Sorry there is a problem.";
	}
	document.getElementById("updateArea").innerHTML = outMsg;
}
}

 

please help me how can i make this more efficient. i dont want to use jquery. I need this without jquery.

 

 

Link to comment
https://forums.phpfreaks.com/topic/190186-need-help-in-ajax-tabs/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.