doforumda Posted January 29, 2010 Share Posted January 29, 2010 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 More sharing options...
doforumda Posted January 29, 2010 Author Share Posted January 29, 2010 anybody who can help i am still waiting Link to comment https://forums.phpfreaks.com/topic/190186-need-help-in-ajax-tabs/#findComment-1003548 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.