AJAX Web app. Chapter 4

**pompopom** · Aug 27, 2007, 03:42

Hi everyone,

I started this week with the sitepoint book on AJAX and I got this problem.
I'm quiet new to Javascript too, so please don' t shoot me for maybe this tiny problem I can 't seem to solve:

if you look here you'll see the basic setup for the login form in chapter 4, bu as you can see, the prompt that says the visitor to enter his login ans password doesn't show?

can anyone point me out here why this is happening?

applogin.js

Code JavaScript:

var Login = new function()
{
 this.ajax = null;
 this.form = null;
 this.promptDiv = null;
 this.dotSpan = null;
 this.button = null;
 this.enabled = true;
 this.dots = '';
 this.promptInterval = null;
 
 this.cleanup = function()
 {
  var self = Login;
  self.form = null;
  self.promptDiv = null;
  self.dotSpan = null;
  self.button = null;
 };
 
 this.init = function()
 {
  var self = Login;
  self.ajax = new Ajax();
  self.form = document.getElementById('loginForm');
  self.promptDiv = document.getElementById('promptDiv');
  self.dotSpan = document.getElementById('dotSpan');
  self.button = document.getElementById('submitButton');
  self.setPrompt = ('base', 'Enter login ID & Password');
  self.form.LoginId.focus();
  self.toggleEnabled(false);
  self.form.onsubmit = function() {return false;}
  self.clearCookie('userId');
 };
 
 this.clearCookie = function(name)
 {
  var expireDate = new Date(0);
  document.cookie = name + '=; expires=' + expireDate.toGMTString() + '; path=/';
 };
 
 this.setPrompt = function(stat, msg)
 {
  var self = Login;
  var promptDiv = self.promptDiv;
  var msgSpan = document.getElementById('msgSpan');
  var statusClass = '';
  promptDiv.className = stat + 'Prompt'; // 'base' 'proc' 'err'
  if(msgSpan.firstChild)
  {msgSpan.removeChild(msgSpan.firstChild);}
  msgSpan.appendChild(document.createTextNode(msg));
 };
 
 this.keyup = function(e)
 {
  var self = Login;
  if(!e)
  {e = window.event;}
  if(e.keyCode != 13)
  {self.evalFormFieldState();}
  else
  {
   if(self.enabled)
   {self.submitData();}
  }
 };
 
 this.evalFormFieldState = function()
 {
  var self = Login;
  if(self.form.LoginId.value.length > 5 && self.form.Pass.value.length > 5)
  {self.toggleEnabled(true);}
  else
  {self.toggleEnabled(false);}
 };
 
 this.toggleEnabled = function(able)
 {
  var self = Login;
  if(able)
  {
   self.button.onclick = self.submitData;
   self.button.disabled = false;
   self.button.className = 'inputButtonActive';
   self.enabled = true;
  }
  else
  {
   self.button.onclick = null;
   self.button.disabled = true;
   self.button.className = 'inputButtonDisabled';
   self.enabled = false;
  }
 };
 
 this.submitData = function()
 {
 
 };
};
document.onkeyup = Login.keyup;
window.onload = Login.init;
window.onunload = Login.cleanup;

the html file:

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>Login</title>
 <script type="text/javascript" src="js/ajax.js"></script>
 <script type="text/javascript" src="js/formdata2querystring.js"></script>
 <script type="text/javascript" src="js/applogin.js"></script>
 <link rel="stylesheet" href="css/applogin.css" type="text/css" />
</head>
<body>
 <div id="uiDiv">
  <form id="loginForm" method="POST" action="index2.html">
   <div id="promptDiv" class="basePrompt">
    <span id="msgSpan"></span>
    <span id="dotSpan"></span>
   </div>
   <div id="fieldDiv">
    <div class="fieldTitle">Login ID:</div>
    <div class="fieldEntry">
     <input type="text" name="LoginId" id="LoginId" size="24" maxlength="100" value="" />
    </div>
    <div class="fieldTitle">Password:</div>
    <div class="fieldEntry">
     <input type="password" name="Pass" id="Pass" size="24" maxlength="100" value="" />
    </div>
   </div>
   <div id="buttonDiv">
    <input type="submit" id="submitButton" name="submitButton" value="Log in" />
   </div>
  </form>
 </div>
</body>
</html>

the css file is copied right from the code archive, the html and .js are re-typed. Just a manner to learn the inn's and out's of javascript and OO next to the ajax

thx in advance,
Koen

**pompopom** · Aug 27, 2007, 04:10

never mind just found the solution....

thx anyway

**pompopom** · Aug 27, 2007, 05:22

this is getting annoying

I added some code following the book right untill page 111

now I have the following:

'object doesn't support this property or method'

on this line:

Code JavaScript:

  self.ajax.doPost('php/applogin.php', postData, self.handleLoginResp);

can anyone explain me what can cause this kind of error?
it would help me out on where to find the actual error cause to me there is none in the line above...

thx,
Koen

User Tag List

Thread: AJAX Web app. Chapter 4

Thread Tools

Display

AJAX Web app. Chapter 4

Bookmarks

Bookmarks

Posting Permissions