SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Evangelist pompopom's Avatar
    Join Date
    Feb 2004
    Location
    Huldenberg (Belgium)
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX Web app. Chapter 4

    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
    The Path of excess leeds to the tower of wisdom (W. Blake)

  2. #2
    SitePoint Evangelist pompopom's Avatar
    Join Date
    Feb 2004
    Location
    Huldenberg (Belgium)
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    never mind just found the solution....

    thx anyway
    The Path of excess leeds to the tower of wisdom (W. Blake)

  3. #3
    SitePoint Evangelist pompopom's Avatar
    Join Date
    Feb 2004
    Location
    Huldenberg (Belgium)
    Posts
    426
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    The Path of excess leeds to the tower of wisdom (W. Blake)


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
  •