Making fields autocomplete in the way users expect

It is a good idea to follow usability conventions in your website, because then people will know how to use it without having to learn anything new. This evening I spent some time modifying our autocomplete function so it behaves in a way similar to other websites, gmail in particular.

The JQuery autocomplete function we are using is for the most part very good, but it had a few little quirks that I wanted to iron out so that it functioned exactly how our users would expect. It used a | as a separator, and it removed spaces in between entries. So a list of email addresses would be entered like this:

email@address.com|email2@address.com|email3@address.com

I changed the separator to a comma, and automatically added one space in between email addresses. This is what gmail does, and I think it is what our users will expect.

email@address.com, email2@address.com, email3@address.com

Bloody cache!

Argh I am so annoyed. I just spent an hour trying to figure out why some of my Javascript wasn't working, and it was because the page I was working on was being read from cache so none of my changes were even being processed! On a brighter note, users can finally register new projects. I think I will come back to this on another day...

Sending email with PHP is so frustrating

OK so I got the send mail function working yesterday on my home server, but now when I get to uni it doesn't work! The Uniform Server we are using doesn't let us send emails, and when we upload this website to mytabletop.com, that server will be different again. Its frustrating having to modify things so they work on different servers. I'm going to stop working on the send email function, and do it after everything else is finished and we have the website hosted on the final server. There's no point spending more time on it now.

Solution for sending email with PHP

I submitted a ticket on the support desk of my web host, MD Webhosting, explaining my problem with the PHP mail() function. They told me to use PEAR:Mail to send the email instead of mail(). I tried this, and it worked. So the problem is fixed.

Problem sending email with PHP mail() function

Today I have encountered a problem while trying to send emails to people who the user would like to invite to their projects. It seems that I can send emails to some addresses, like ...@keeganstreet.net and ...@readymedia.com.au, but not to gmail or hotmail accounts. I don't know why this is so I am looking into it.

Creating new projects

Long, Justin and I worked all day at uni today, and got a fair bit done. I worked on the "Create a new project" page. I spent most of my time working on the part that collects data from the user, but I haven't got around to actually storing that data yet!

This page has taken quite a while to develop because I had to make an auto-complete function for the "add people to this project" field, and a clickable calendar for the project's due date. I didn't write these myself, but I had to find them and modify them to work with our product. When a user creates a project, they can invite other people to work on it as well. To do this they can either enter a list of email addresses, or when they start typing characters, suggestions of people they have worked with in the past will be shown. See the screenshot below:


Users also have the option of entering in a due date for their new projects. This is what the due date input field looks like:


The auto-complete function and calendar are both add-ons for the jQuery Javascript Library, so it was a good move by us to use this library. Modifying these pre-made components was much more efficient than trying to create our own from scratch.

Display image distortion on edit profile page

I noticed that when I upload a rectangular image as a display picture, it is not resized correctly, and is distorted into a square. I stepped through my resizing algorithm, and all seemed to be OK, so I had a look at the HTML page where the image was being displayed. It turns out that the image had been resized correctly when it was uploaded, but we were then squashing it into a square shape in our style sheet:

img.avatar {

border:3px solid #1C8B35;

height:96px;

width:96px;

}

I have removed the size restriction from our CSS, and I will tell Justin and Long on Wednesday.

Not much progress this week

I missed class this week for a job interview with Eclipse Group. It turned out that my interviewer, Jarrod Dumble, is one of Matt Butler's mates. I haven't made much progress with my Studio this week because of the interview and lots of work in my other subject.

I sent an email to Justin and Long to let them know I wouldn't be coming:

Hi Long & Justin,

I won't be able to come to studio today because of my job interview with Eclipse Group.

Here's my tabletop files. During the last week I have been working on the register section.

Please note that it is not working, because of a database issue. In our schema file, I forgot to make the primary keys AUTO_INCREMENT. We need to change this in our database before it will work. I have attached a new schema file and test data file which *should* work, but they are untested. Compare them with your current schema file and test data file to see what I did.

Good luck!

--
Keegan Street

President
Monash Union of Berwick Students Inc
Phone: 03 9904 7092
Mobile: 0400 188 581
Fax: 03 9904 7134
Email: president@mubs.com.au
Web: www.mubs.com.au

Proprietor
Ready Media
User focused web development
ABN: 19 640 210 286
Phone: 0400 188 581
Email: keegan@readymedia.com.au
Web: www.readymedia.com.au

Using the jQuery Javascript library

After researching some different Javascript libraries and considering writing our own Javascript, our group has decided to use the jQuery Javascript library for Tabletop. This library will help speed up our development process because we won't have to write functions that other people have already written for us. The library includes things like form validation, visual effects and AJAX functions. It makes writing Javascript a lot easier. I no longer have to write this:

document.getElementById("message").innerHTML="Your changes have been saved.";

Because I can achieve the same thing with this:

$("#message").html("Your changes have been saved.");