SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    document.createElement not working in example from book

    I have been going through the first example program in the Sitepoint Ajax book which creates a simple server request application.

    One of the .js file that writes to the html file to create an input button. At first this was working fine, then when I reuploaded the files, none of the HTML was created.

    As seen here: http://shanest.com/ajax/appmonitor2.html

    Here are excerpted source codes. The main functions in question are this.toggleButton and this.currentAppState. Any idea what's wrong?

    appmonitor2.html:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1" />
    <title>App Monitor</title>
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript" src="appmonitor2.js"></script>
    <script type="text/javascript">
    	var TARGET_URL = "fakeserver.php";
    	var POLL_INTERVAL = 5;
    	var MAX_POLL_ENTRIES = 10;
    	var TIMEOUT_THRESHOLD = 10;
    </script>
    <link rel="stylesheet" href="appmonitor2.css" type="text/css" />
    </head>
    <body>
    	<div id="wrapper">
    		<div id="main">
    			<div id="status">
    				<div id="statusMessage">App Status:
    					<span id="currentAppState"></span>
    				</div>
    				<div id="pollingMessage"></div>
    				<br class="clearBoth" />
    			</div>
    			<div id="pollResults"></div>
    			<div id="buttonArea"></div>
    		</div>
    	</div>
    </body>
    </html>
    appmonitor2.js:
    Code:
    var Status = new function() {
    
    	this.currOpacity = 100;
    	this.proc = 'done'; // 'proc', 'done' or 'abort'
    	this.procInterval = null;
    	this.div = null;
    
    	this.init = function() {
    		var self = Status;
    		self.div = document.getElementById('pollingMessage');
    		self.setAlpha();
    	};
    
    	this.startProc = function() {
    		var self = Status;
    		self.proc = 'proc';
    		if (self.setDisplay(false)) {
    			self.currOpacity = 100;
    			self.displayOpacity();
    			self.procInterval = setInterval(self.doProc, 90);
    	};
    
    	this.stopProc = function() {
    		var self = Status;
    		if (done) {
    			self.proc = 'done';
    		}
    		else {
    			self.proc = 'abort';
    		}
    	};
    
    	this.doProc = function() {
    		var self = Status;
    		if (self.currOpacity == 0) {
    			if (self.proc == 'proc') {
    				self.currOpacity = 100;
    			}
    			else {
    				clearInterval(self.procInterval);
    				if (self.proc == 'done') {
    					self.startDone();
    				}
    				return false;
    			}
    		}
    		self.curOpacity = self.currOpacity - 10;
    		self.displayOpacity();
    	};
    
    	this.startDone = function() {
    		var self = Status;
    		if (self.setDisplay(true)) {
    			self.currOpacity = 100;
    			self.displayOpacity();
    			self.procInterval = setInterval(self.doDone, 90);
    		}
    	};
    
    	this.doDone = function() {
    		var self = Status;
    		if (self.currOpacity == 0) {
    			clearInterval(self.procInterval);
    		}
    		self.currOpacity = self.currOpacity -10;
    		self.displayOpacity();
    	};
    
    	this.cleanup = function() {
    		Status.div = null;
    	};
    
    	this.displayOpacity = function() {
    		var self = Status;
    		var decOpac = self.currOpacity / 100;
    		if (document.all && typeof window.opera == 'undefined') {
    			self.div.filters.alpha.opacity = self.currOpacity;
    		}
    		else {
    			self.div.style.MozOpacity = decOpac;
    		}
    		self.div.style.opacity = decOpac;
    	};
    
    	this.setAlpha = function() {
    		var self = Status;
    		if(document.all && typeof window.opera == 'undefined') {
    			var styleSheets = document.styleSheets;
    			for (var i = 0; i < styleSheets.length; i++) {
    				var rules = styleSheets[i].rules;
    				for (var j = 0; j < rules.length; j++) {
    					if(rules[j].selectorText == '#pollingMessage') {
    						rules[j].style.filter = 'alpha(opacity = 100)';
    						return true;
    					}
    				}
    			}
    		}
    		return false;
    	};
    
    	this.setDisplay = function() {
    		var self = Status;
    		var msg = '';
    		if (done) {
    			msg = 'Done';
    			self.div.className = 'done';
    		}
    		else {
    			msg = 'Processing...';
    			self.div.className = 'processing';
    		}
    		if (self.div.firstChild) {
    			self.div.removeChild(self.div.firstChild);
    		}
    		self.div.appendChild(document.createTextNode(msg));
    		return true;
    	};
    }
    
    var Monitor = new function(){
    	this.targetURL = null;
    	this.pollInterval = null;
    	this.maxPollEntries = null;
    	this.timeoutThreshold = null;
    	this.ajax = new Ajax();
    	this.start = 0;
    	this.pollArray = [];
    	this.pollHand = null;
    	this.timeoutHand = null;
    	this.reqStatus = Status;
    	
    	this.init = function() {
    		var self = Monitor;
    		self.targetURL = TARGET_URL;
    		self.pollInterval = POLL_INTERVAL;
    		self.maxPollEntries = MAX_POLL_ENTRIES;
    		self.timeoutThreshold = TIMEOUT_THRESHOLD;
    		self.toggleAppStatus(true);
    		self.reqStatus.init();
    	};
    	
    	this.toggleAppStatus = function(stopped) {
    		var self = Monitor;
    		self.toggleButton(stopped);
    		self.toggleStatusMessage(stopped);
    	};
    
    	this.toggleButton = function(stopped) {
    		var self = Monitor;
    		var buttonDiv = document.getElementById('buttonArea');
    		var but = document.createElement('input');
    		but.type = 'button';
    		but.classname = 'inputButton';
    		if(stopped) {
    			but.value = 'Start';
    			but.onclick = self.pollServerStart;
    		}
    		else {
    			but.value = 'Stop';
    			but.onclick = self.pollServerStop;
    		}
    		if (buttonDiv.firstChild) {
    			buttonDiv.removeChild(buttonDiv.firstChild);
    		}
    		buttonDiv.appendChild(but);
    		buttonDiv = null;
    	};
    
    	this.toggleStatusMessage = function(stopped) {
    		var statSpan = document.getElementById('currentAppState');
    		var msg;
    		if(stopped) {
    			msg = 'Stopped';
    		}
    		else {
    			msg = 'Running';
    		}
    		if (statSpan.firstChild) {
    			statSpan.removeChild(statSpan.firstChild);
    		}
    		statSpan.appendChild(document.createTextNode(msg));
    	};
    
    	this.pollServerStart = function() {
    		var self = Monitor;
    		self.doPoll();
    		self.toggleAppStatus(false);
    	};
    
    	this.pollServerStop = function() {
    		alert('This will stop the application polling the server.');
    	};
    
    	this.doPoll = function() {
    		var self = Monitor;
    		var url = self.targetRL;
    		var start = new Date();
    		self.reqStatus.startProc();
    		self.start = start.getTime();
    		self.ajax.doGet(self.targetURL + '?start=' +self.start, self.showPoll);
    		self.timeoutHand = setTimeout(self.handleTimeout, self.timeoutThreshold * 1000);
    	};
    
    	this.showPoll = function(str) {
    		var self = Monitor;
    		var diff = 0;
    		var end = new Date();
    		clearTimeout(self.timeotHand);
    		self.reqStatus.stopProc(true);
    		if(str == 'ok') {
    			end = end.getTime();
    			diff = (end - self.start) / 1000;
    		}
    		if(self.updatePollArray(diff)) {
    			self.printResult();
    		}
    		self.doPollDelay();
    	};
    
    	this.doPollDelay = function() {
    		var self = Monitor;
    		self.pollHand = setTimeout(self.doPoll, self.pollInterval*1000);
    	};
    
    	this.handleTimeout = function() {
    		var self = Monitor;
    		if (self.stopPoll()) {
    			self.reqStatus.stopProc(true);
    			if (self.updatePollArray(0)) {
    				self.printResult();
    			}
    			self.doPollDelay();
    		}
    	};
    
    	this.updatePollArray = function(responseTime) {
    		var self = Monitor;
    		self.pollArray.unshift(pollResult);
    		if (self.pollArray.length > self.maxPollEntries) {
    			self.pollArray.pop();
    		}
    		return true;
    	};
    
    	this.printResult = function() {
    		var self = Monitor;
    		var polls = self.pollArray;
    		var pollDiv = document.getElementById('pollResults');
    		var entryDiv = null;
    		var messageDiv = null;
    		var barDiv = null;
    		var clearAll = null;
    		var msgStr = '';
    		var txtNod = null;
    		while (pollDiv.firstChild) {
    			pollDiv.removeChild(pollDiv.firstChild);
    		}
    		for (var i = 0; i < polls.length; i++) {
    			if (polls[i] == 0) {
    				msgStr  '(Timeout)';
    			}
    			else {
    				msgStr = polls[i] + ' sec.';
    			}
    			entryDiv = document.createElement('div');
    			messageDiv = document.createElement('div');
    			barDiv = document.createElement('div');
    			clearAll = document.createElement('br');
    			entryDiv.className = 'pollResult';
    			messageDiv.className = 'time';
    			barDiv.className = 'bar';
    			clearAll.className = 'clearAll';
    			if(polls[i] == 0) {
    				messageDiv.style.color = '#933';
    			}
    			else {
    				messageDiv.style.color = '#339';
    			}
    			barDiv.style.width = (parseInt(polls[i]*20)) + 'px';
    			messageDiv.appendChild(document.createTextNode(msgStr));
    			barDiv.appendChild(document.createTextNode('\u00A0'));
    			entryDiv.appendChild(messageDiv);
    			entryDiv.appendChild(barDiv);
    			entryDiv.appendChild(clearAll);
    			pollDiv.appendChild(entryDiv);
    		}
    	};
    
    	this.stopPoll = function() {
    		var self = Monitor;
    		clearTimeout(self.pollHand);
    		if (self.ajax) {
    			self.ajax.abort();
    		}
    		clearTimeout(self.timeoutHand);
    		return true;
    	};
    
    	this.cleanup = function() {
    		var self = Monitor;
    		self.reqStatus.cleanup();
    		self.reqStatus = null;
    	};
    }
    
    window.onload = Monitor.init;
    window.onunload = Monitor.cleanup;
    ajax.js:
    Code:
    function Ajax() {
    	this.req = null;
    	this.url = null;
    	this.method = 'GET';
    	this.async = true;
    	this.status = null;
    	this.statusText = '';
    	this.postData = null;
    	this.readyState = null;
    	this.responseText = null;
    	this.responseXML = null;
    	this.handleResp = null;
    	this.responseFormat = 'text', // 'text', 'xml', or 'object'
    	this.mimeType = null;
    
    	this.init = function() {
    		if (!this.req) {
    			try {
    				// Try to create object for Firefox, Safari, IE7, etc.
    				this.req = new XMLHttpRequest();
    			}
    			catch (e) {
    				try {
    					// Try to create object for later versions of IE.
    					this.req = new ActiveXObject('MSXML2.XMLHTTP');
    				}
    				catch (e) {
    					try {
    						// Try to create object for early versions of IE.
    						this.req = new ActiveXObject('Microsoft.XMLHTTP');
    					}
    					catch (e) {
    						// Could not create an XMLHttpRequest object.
    						return false;
    					}
    				}
    			}
    		}
    		return this.req;
    	};
    
    	this.setMimeType = function(mimeType) {
    		this.mimeType = mimeType;
    	};
    	
    	this.doReq = function() {
    		if (!this.init()) {
    			alert('Could not create XMLHttpRequest object.');
    			return;
    		}
    		this.req.open(this.method, this.url, this.async);
    		if (this.mimeType) {
    			try {
    				req.overrideMimeType(this.mimeType);
    			}
    			catch (e) {
    				// couldn't override MIME type -- IE6 or Opera?
    			}
    		}
    		var self = this; // Fix loss-of-scope in inner function
    		this.req.onreadystatechange = function() {
    			var resp = null;
    			if (self.req.readyState == 4) {
    				switch (self.responseFormat) {
    					case 'text':
    						resp = self.req.responseText;
    						break;
    					case 'xml':
    						resp = self.req.responseXML;
    						break;
    					case 'object':
    						resp = req;
    						break;
    				}
    				if (self.req.status >= 200 && self.req.status <= 299) {
    					self.handleResp(resp);
    				}
    				else {
    					self.handleErr(resp);
    				}
    			}
    		};
    		this.req.send(this.postData);
    	};
    	
    	this.handleErr = function() {
    		var errorWin;
    		try {
    			errorWin = window.open('', 'errorWin');
    			errorWin.document.body.innerHTML = this.responseText;
    		}
    		catch (e) {
    			alert('An error occurred, but the error message cannot be '
    				+ 'displayed. This is probably because of your browser\'s '
    				+ 'pop-up blocker.\n'
    				+ 'Please allow pop-ups from this web site if you want to '
    				+ 'see the full error messages.\n'
    				+ '\n'
    				+ 'Status Code: ' + this.req.status + '\n'
    				+ 'Status Description: ' + this.req.statusText);
    		}
    	};
    
    	this.abort = function() {
    		if (this.req) {
    			this.req.onreadystatechange = function() { };
    			this.req.abort();
    			this.req = null;
    		}
    	};
    
    	this.doGet = function(url, hand, format) {
    		this.url = url;
    		this.handleResp = hand;
    		this.responseFormat = format || 'text';
    		this.doReq();
    	};
    
    }
    appmonitor2.css:
    Code:
    body, p, div, td, ul {
    	font-family: verdana, arial, helvetica, sans-serif;
    	font-size:12px;
    }
    
    #wrapper {
    	padding-top: 24px;
    }
    
    #main {
    	width: 360px;
    	height: 280px;
    	padding: 24px;
    	text-align: left;
    	background: #eee;
    	border: 1px solid #ddd;
    	margin: auto;
    }
    
    #status {
    	width: 358px;
    	height: 24px;
    	padding: 2px;
    	background: #fff;
    	margin-bottom: 20px;
    	border: 1px solid #ddd;
    }
    
    #statusMessage {
    	font-size: 11px;
    	float: left;
    	height: 16px;
    	padding: 4px;
    	text-align: left;
    	color: #999;
    }
    
    #pollingMessage {
    	font-size: 11px;
    	float: right;
    	width: 80px;
    	height: 14px;
    	padding: 4px;
    	text-align: center;
    	background: #fff;
    }
    
    #pollResults {
    	width: 360px;
    	height: 210px;
    }
    
    #buttonArea {
    	text-align: center;
    }
    
    .pollResult {
    	padding-bottom: 4px;
    }
    
    .time {
    	width: 6em;
    	float: left;
    }
    
    .bar {
    	background: #ddf;
    	float: left;
    }
    
    .clearBoth {
    	clear: both;
    }
    
    .processing {
    	color: #339;
    	border: 1px solid #339;
    }
    
    .done {
    	color: #393;
    	border: 1px solid #393;
    }
    
    .inputButton {
    	width: 8em;
    	height: 2em;
    }

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    createElement not the problem!!

    Ok, I got everything displaying. However, the Firefox JS Console is giving me the error:

    self.reqStatus has no properties in the following lines:

    this.cleanup = function() {
    var self = Monitor;
    self.reqStatus.cleanup();

    and

    this.init = function() {
    var self = Monitor;
    self.targetURL = TARGET_URL;
    self.pollInterval = POLL_INTERVAL;
    self.maxPollEntries = MAX_POLL_ENTRIES;
    self.timeoutThreshold = TIMEOUT_THRESHOLD;
    self.toggleAppStatus(true);
    self.reqStatus.init();
    };





    However, at the beginning of the Monitor class, there is:
    this.reqStatus = Status;

    and Status is a valid singleton class.



    Why is this error ocurring?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •