After getting communication to the server working I am starting to build the front end a little. Of course this is where the difficulty of working cross browser starts rearing its ugly head. I am developing on my home computer which is a Mac. I then test on my work computer which is Windows and then for kicks I look at the website on my son's ipod touch. I am only looking at Firefox on the Mac. IE7 in Windows and of course safari on the itouch. I am very picky about not creating any errors so I have all debugging on. I don't know if most people are aware, but most sites like Yahoo and Google will raise a bunch of errors but function. It probably isn't important, but I am trying to keep the error console free.

All I was going to do was put up a username and password text and login to the server. This object here was not the first object that was created, but one that developed after I ran into problems. I was simply trying to center the objects. The parameter o is for the calling function to provide the object to which this div should be appended. It very well could be the document.body. After all the hunting and pecking on the web I found that this centering worked the best for me.

function myDiv(o) {
    var myself = this;
    myself.mydiv = document.createElement('div');
    myself.mydiv.style.position = "absolute";   
    o.appendChild(myself.mydiv);
    myself.getObj = function(){return myself.mydiv;};
    myself.center = function (x,y) {
        myself.mydiv.style.top = parseInt(myInnerHeight()/2)-y + "px";
        myself.mydiv.style.left = parseInt(myInnerWidth()/2)-x + "px";       
    }
   
}

I have got thru the next step. I was able to communicate with the server and use timers to keep trying until the full script was loaded. So let me step thru where I am at.

First is a simple Initialization routine.

function Initialize() {
TalkToServer();
}

The TalkToServer function is just a placeholder to test talking to the server. I had formally used self and I ran into problems with IE so I changed it to myself. Clever, eh? This I am treating as an object rather than just a function. There are four variables; myself, myRequest, scriptsloaded and t another object. There are two methods login and verify. The basic outline is to verify that scripts are loaded and then to perform a login attempt which is just a way to test communication with the server. The username and password are hardcoded because I am just testing communication.

function TalkToServer() {
    myself = this;
    var myRequest;
    var scriptsloaded = false;
    var t = new myTimer();
    this.login = function() {
        myRequest = new ajaxObject('http://kurtclement.com/login.php',processData);
        myRequest.update('password=mypassword&username=myusername','POST');
    }
    this.verify = function() {
        if(scriptsloaded) {
            myself.login();  
        } else {
            scriptsloaded = VerifyScriptLoaded('tools/tools.js');
            t.tryagain(myself.verify,100);
        }
    }
    this.verify();
}  

The timer object takes a function and calls that function after the timeout period.

function myTimer() {
    var myself = this;
    var mymax = 5;
    var mycount = 0;
    this.tryagain = function(f,t) {
        if((mycount++)<mymax) {
            setTimeout(function(){myself.what(f);},t);
        } else {
            alert('max '+mycount);   
        }
    };
    myself.what = function(f) {f();};
}

I spent a lot of time trying to dynamically load scripts. The first problem is that you can't run functions until the scripts are loaded. That is pretty easy to solve. I built my own little framework for testing whether the script was loaded. Then I ran into another problem. If the script wasn't loaded I needed to set a timer and try again later. Well the timer in JavaScript is a little funky in that you can't pass parameters to it easily. After much trial and tribulation (and reading) I came up with this:

function mytimeout(w,t) {
   var self = this;
   self.what = function(c){alert(w);};
   self.mytimer = function() {setTimeout(function(){self.what(w);},t);};

}
function Initialize() {
   //Load Scripts

   alert('loading');
var t1 = new mytimeout('bob',3000);
var t2 = new mytimeout('carol',1000);
t1.mytimer();
t2.mytimer();

}

This works nicely on Firefox for Max and IE for Windows. This of course is the generic version. The Initialize gets called in the index.html and this is in a loaded JavaScript file. I hope someone else might find this useful. I think it is pretty easy to understand. To give fair credit I did work off the reading from the website:

http://www.west-wind.com/weblog/posts/5033.aspx

I finally figured out an easy way to post code samples. I spent way too much time trying to learn the intriquisies.

I finally figured out an easy way to post code samples. I spent way too much time trying to learn the intricacies of blogspot. This site: http://francois.schnell.free.fr/tools/BloggerPaste/BloggerPaste.html provides a simple way to convert.

So what I was trying to post before I fell down this rabbit hole was that I kept running into errors in IE that I was not seeing in Firefox. It was minor, but I really don’t want to have these errors. I know I see errors on Yahoo and other mainstream sites that get suppressed if you do not have error checking enabled, but I just didn’t want them. What I found was on this site: http://blog.roberthahn.ca/articles/2007/02/02/how-to-use-window-onload-the-right-way/

I won’t go into the details of why it works and why it necessary, but the final result was the way that I loaded the initial javascript code

<script>
   function makeDoubleDelegate(function1, function2) { 
      return function() {  
         if (function1) function1();  
         if (function2) function2(); 
      }
   }
</script></head><body><script>
window.onload =  makeDoubleDelegate(window.onload, Initialize );
</script>

This eliminated the errors, now back to working on a framework.

Deep into the weeds

I was just going to update the little I had done when I got caught up in the details of blogging. I first just posted some code sample and immediatly found out that code gets interpreted in the HTML. So a quick search had some sample of how to post code samples, but then I got caught up in the templates and everything else and I loss track of the original goal which was to just update the blog. What a waste.

Dinking around

I have actually been doing more than I would have anticipated. I am just dinking around. I spent a lot of time working on user authentication. Right now I encrypt the username and password and add a little salt when the account is created and assign a random system ID. The thinking is that even if someone would download the whole table they could not read the table or guess at it's contents. This will not protect against easy to guess usernames and passwords. I also had to learn about sql insertion. I think I have guarded against that. Now I am figuring out how to deal with session ids. The idea is that some one would not want to supply their userid and password everytime they do something, but you don't want someone stealing their session id and hijacking the system. So my idea is that I store a unique id as a cookie on their system. Every communication will include this cookie. The cookie will be checked and then changed. So every transmission will have a unique session id. I haven't implemented yet.

I am writing programming in notepad and I have not locked into a platform like Ruby on Rails or any of the others out there. I am just exploring PHP, MySQL, and Javascript. So what I have is some simple PHP scripts that allow me to do SQL queries (hard coded with passwords) and a create account and login. That is it.

I will probably stay with all three

I was able to create a simple javascript -> php connection to upload a file to the website which will make it easier than using FTP (sometimes). I found out that Aptana can save the php files, but cannot open them back up. I guess it wants to run the file and finds out it can. So I can use smultron for simple better than a text editor editing. I have to keep the Mac stuff around. The next step is connecting to MySql database.