Dilema with AJAX

Question

Th3nutz 0 Newbie Poster

14 Years Ago

Hello guys i'm new with programming and i've been wondering if i could use AJAX with this: i have 4 words with links and when i press them i want to show some images and a text. Is this posible ?

Here is the code that i use (i only know how to show different texts):

<script type="text/javascript">
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('text').innerHTML=xmlhttp.responseText;
}
</script>

<div class="sublink"><a href="proiect.html" onClick="loadXMLDoc('proiect/concept.txt');return false;">Concept</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="proiect.html" onClick="loadXMLDoc('proiect/vile.txt');return false;">Vile</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="proiect.html" onClick="loadXMLDoc('proiect/apartamente.txt');return false;">Apartamente</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href="proiect.html" onClick="loadXMLDoc('proiect/facilitati.txt');return false;">Facilitati</a><br>
	      <br>
          </div>

javascript

2 Contributors
1 Reply
93 Views
7 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

Reply to this topic

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.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2010-03-27T02:50:05+00:00

Th3nutz,

You could gop the AJAX route but there is little point unless the files contain data/text that is likely to change during a user session.

For static or very slow changing information, you can serve all the data/text in all categories into its own div and show/hide when the "sublink" links are clicked.
Here is a way to achieve this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#sublink {
	width: 300px;
	padding: 5px;
	background-color: #99CCCC;
	border: 2px solid #669999;
	text-align: center;
}
#sublink ul {
	margin: 0;
	list-style-type: none;
}
#sublink li {
	margin: 0 12px 0 0;
	display: inline;
}
#sublink li a {
	text-decoration: none;
	color: #458888;
}
#sublink li a:hover {
	color: #336666;
}

#sublink li a.selected {
	text-decoration: underline;
}
.textSection {
	display: none;
	width: 300px;
	margin: 12px 0;
	padding: 5px;
	background-color: #F0FFFF;
	border: 2px solid #E0F0F0;
}
.textSection p {
	margin: 0 0 6px 0;
	color: #336666;
}
</style>

<script>
onload = function() {
	var i, divs = [];
	var divIDs = [ 'concept', 'vile', 'apartamente', 'facilitati' ];
	for(i=0; i<divIDs.length; i++) {
		divs[i] = document.getElementById(divIDs[i]);
	}
	var sublink = document.getElementById("sublink");
	var links = sublink.getElementsByTagName('a');
	for(i=0; i<links.length; i++) {
		links[i].binding = i;
		links[i].onclick = function() {
			for(i=0; i<divs.length; i++) {
				divs[i].style.display = (this.binding == i) ? 'block' : 'none';
				links[i].className = (this.binding == i) ? 'selected' : '';
			}
			this.blur();
			return false;
		};
	}
	links[0].onclick();
};
</script>
</head>

<body>

<div id="sublink">
	<ul>
	<li><a href="">Concept</a></li>
	<li><a href="">Vile</a></li>
	<li><a href="">Apartamente</a></li>
	<li><a href="">Facilitati</a></li>
	</ul>
</div>

<div class="textSection" id="concept">
	<p>Concept markup here</p>
	<p>Concept markup here</p>
	<p>Concept markup here</p>
</div>
<div class="textSection" id="vile">
	<p>Vile markup here</p>
	<p>Vile markup here</p>
	<p>Vile markup here</p>
</div>
<div class="textSection" id="apartamente">
	<p>Apartamente markup here</p>
	<p>Apartamente markup here</p>
	<p>Apartamente markup here</p>
</div>
<div class="textSection" id="facilitati">
	<p>Facilitati markup here</p>
	<p>Facilitati markup here</p>
	<p>Facilitati markup here</p>
</div>

</body>
</html>

Airshow