I’m working on a website for a client and I am using ajax to get the contents of a file, html specifically, and then I am trying to insert that html into a div so that i can display the content. i know that i am getting the contents of the file because i have alerts set to display the request’s readyState, status, and responseText, and it is showing the contents of the file in the alert. however when i attmept to insert it into the div using this line: document.getElementsByClassName('content').innerHTML = response; nothing happens. can anyone help me figure this out?
CODE:
JAVASCRIPT:
<script language="javascript" type="text/javascript">
var request = new ajaxRequest();
var fileLoc;
var response;
function getData(fileName){
fileLoc = encodeURI("assets/"+fileName+".html")
alert(fileLoc);
request.onreadystatechange = processData;
request.open("GET",fileLoc, false);
request.send();
alert(request.readyState);
alert(response);
alert(request.status);
document.getElementsByClassName('content').innerHTML = response;
}
function processData(){
response = request.responseText;
/*if (request.readyState==4){
if (request.status==200){
try{
document.getElementsByClassName('content').innerHTML = response;
} catch(e){
alert("Error: " +e.description);
}
}
else{
alert("An error has occured making the request");
}
}*/
}
function home() {
getData("home");
}
function about() {
getData('about');
}
function proof() {
getData('contact');
}
function contact() {
getData('proof');
}
function ajaxRequest(){
var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
if (window.XMLHttpRequest)
return new XMLHttpRequest();
else if (window.ActiveXObject){
for (var i=0; i<activexmodes.length; i++){
try{
return new ActiveXObject(activexmodes[i]);
}
catch(e){
alert(e.description);
}
}
}
else
return false
}
HTML:
<body>
<div class="container">
<div class="logo"> <span id="link-home" class="noglow" onclick="javascript: home();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Home</span><!-- end link-home -->
<span id="link-about"class="noglow" onclick="javascript: about();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">About</span><!-- end link-about -->
<span id="link-proof" class="noglow" onclick="javascript: proof();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Proof of Concept</span><!-- end link-proof -->
<span id="link-contact" class="noglow" onclick="javascript: contact();" onmouseover="this.className='glow'" onmouseout="this.className='noglow'">Contact</span><!-- end link-contact -->
<div id="home-flower" onclick="javascript: home();" onmouseover="javascript: document.getElementById('link-home').className='glow'" onmouseout="javascript: document.getElementById('link-home').className='noglow'"></div><!-- end home-flower -->
<div id="about-flower" onclick="javascript: about();" onmouseover="javascript: document.getElementById('link-about').className='glow'" onmouseout="javascript: document.getElementById('link-about').className='noglow'"></div><!-- end about-flower -->
<div id="proof-flower" onclick="javascript: proof();" onmouseover="javascript: document.getElementById('link-proof').className='glow'" onmouseout="javascript: document.getElementById('link-proof').className='noglow'"></div><!-- end proof-flower -->
<div id="contact-flower" onclick="javascript: contact();" onmouseover="javascript: document.getElementById('link-contact').className='glow'" onmouseout="javascript: document.getElementById('link-contact').className='noglow'"></div><!-- end other-flower -->
</div><!-- end logo-->
<div class="content"></div><!-- end content -->
</div><!-- end container -->
<div class="footer"></div><!-- end footer -->
CSS:
@charset "UTF-8";
/* CSS Document */
* {
margin:auto;
}
html, body {
height: 100%;
}
.container {
position:relative;
min-height: 100%;
width:800px;
}
.logo{
position:relative;
width:100%;
height:210px;
top:0px;
left:0px;
background:url(images/logo.png);
}
.content {
position:relative;
top:0px;
left:0px;
padding-top:20px;
padding-bottom: 75px !important;
}
.footer {
position:relative;
height: 75px;
margin-top:-75px;
background-color:#06F;
bottom:0px;
left:0px;
}
.large{
font-size:36px;
}
.fltright {
position:relative;
float:right;
top:0px;
left:0px;
width:auto;
height:auto;
}
.fltleft {
position:relative;
float:left;
top:0px;
left:0px;
width:auto;
height:auto;
}
span.glow {
text-shadow: 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF, 0px 0px 10px #87CFBF;
color:#999;
text-align:center;
}
span.noglow {
color:#999;
text-align:center;
}
#home{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
line-height:20px;
}
#about{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#proof{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#contact{
position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
visibility:visible;
}
#link-home{
position:absolute;
width:75px;
height:30px;
top:110px;
left:419px;
}
#link-about{
position:absolute;
width:75px;
height:30px;
top:110px;
left:515px;
}
#link-proof{
position:absolute;
width:75px;
height:30px;
top:100px;
left:609px;
}
#link-contact{
position:absolute;
width:75px;
height:30px;
top:110px;
left:708px;
}
#home-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:442px;
background:url(images/home-flower.png);
}
#about-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:540px;
background:url(images/about-flower.png);
}
#proof-flower{
position:absolute;
width:30px;
height:30px;
top:131px;
left:635px;
background:url(images/proof-flower.png);
}
#contact-flower{
position:absolute;
width:30px;
height:30px;
top:135px;
left:733px;
background:url(images/contact-flower.png);
}
document.getElementByClassName is returning an array. You cannot set the innerHtml of an array you need to loop through the array and set each individual elements inner html;
Working example: http://jsfiddle.net/CYZUL/