SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Threaded View
-
Jul 6, 2007, 09:20 #1
- 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>
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;
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(); }; }
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; }
Bookmarks