August 8th, 2012, 01:07 PM
|
|
|
|
AJAX and associated functions do not execute more than once?
Hey, my AJAX code works for only one call. If I call it a second time it does not work, and I can't figure it out. Would you help me find the problem (and possible error)? Thank you for your time.
Code:
html
<!DOCTYPE html>
<html>
<head>
<title>Troop 21 - Home</title>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META name=keywords content="Troop 21 Clayton Missouri MO boy scouts st louis">
<!-- This is AJAX set up code -->
<script language=JavaScript type=text/JavaScript>
//<!--
//Browser Support Code
function xmlhttpPost(strURL, elementId){
var xmlhttp;
var self = this;
var oDiv = document.getElementById(elementId);
try{
// Opera 8.0+, Mozilla, Safari
self.xmlhttp = new XMLHttpRequest();
}catch(e){
// MS-IE :(
try{
self.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
self.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
// Unsupported browser or browser doesn't support AJAX
Divs.showError('quadA', 'AJAX not supported!');
}
}
}
self.xmlhttp.open('GET', strURL, true);
self.xmlhttp.setRequestHeader('Content-Type', 'text/html');
self.xmlhttp.onreadystatechange = function(){
if(self.xmlhttp.readyState == 4){
updatepage(self.xmlhttp.responseText, oDiv);
}
}
self.xmlhttp.send();
}
function updatepage(str, div){
div.innerHTML = str;
}
function AJAXObj(){
this.load_navbar = function(){
xmlhttpPost('/cgi-bin/navbar.pl?bar=home', 'navbar');
};
this.load_page = function(){
xmlhttpPost('/cgi-bin/cm.pl?file=home.cmw&action=display', 'data');
};
}
function page(){
this.showError = function(quad, errorMessage){
document.getElementById(quad).style.display="block";
document.getElementById(quad).innerHTML=errorMessage;
};
this.hideError = function(quad){
document.getElementById(quad).style.display="none";
};
}
var AJAX = new AJAXObj();
var Divs = new page();
//-->
</script>
<style type="text/CSS">
div.main{
margin-left:0%;
padding:0px;
background-color:#A8CD9B;
border-width:0px;
width:1000px;
}
div.content{
margin-left:200px;
background-color:#336600;
padding:0px;
border-width:0px;
width:650px;
}
div.error{
width:200px;
border-style:solid;
border-width:1px;
border-color:rgb(255, 0, 51);
background-color:rgb(255, 153, 153);
display:none;
float:left;
}
div#data{
background-color:#fff;
padding:0px;
width:650px;
border-width:0px;
}
img.logo{
float:left;
}
div.clear{
clear:both;
}
</style>
</head>
<body>
<div class="main">
<img src="troop21logo.gif" class="logo" alt="Troop 21 Logo" />
<div class=error id=quadA></div>
<div class="content">
<img src="21logo2.gif" class="logo" alt="Troop 21 Logo 2" />
<div class="clear" />
<div id=navbar><span style="font-family:Ariel;color:#000;"><b>Oops! Something appears to be broken! Maybe your browser doesn't support AJAX (too old?) or something on the site has broken :'( [Emergency back-up navigation]:</b><br />
<a href="/index.html">Home</a> . <a href="/Forms.html">Forms</a> . <a href="/Events.html">Events</a> .
</div>
<div id=data>
<button onClick="javascript:Divs.showError('quadA', 'Developer! : Example error');">Show error 'quadA'</button><br />
<button onClick="javascript:Divs.hideError('quadA');">Hide error 'quadA'</button>
<button onClick="javascript:xmlhttpPost('/cgi-bin/navbar.pl?hos', 'navbar');">Navbar</button>
</div>
<script type="text/javascript">
//<!--
AJAX.load_navbar();
AJAX.load_page();
//-->
</script>
</div>
</div>
</body>
</html>
Salud, Matt
{APPENDAGE}: Also, if you're wondering why I'm not using the HTML onLoad or JS window.onload functionality, it is because Mozilla's behavior executes that code before the rest of the page is loaded, rendering them useless to me.
As far as I can tell, AJAX.load_page() is being called twice, but AJAX.load_navbar() isn't at all.
Last edited by macaswell : August 8th, 2012 at 01:10 PM.
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
