Hurrah!

 

Go here and fill in the form: http://www.jetbookingdirect.com/?theme=jetbook2012#

 

(click Book a Flight)

 

I've done it, I've made it so a Google Map loads showing you the two airports you're flying from and to, and a connecting curved line. I'm chuffed to bits with this, it took me ages to figure out and I've never done anything this complex before, as mainly I do design, not development.

 

Known Issues!

 

Not all locations suggested by the autocomplete are successfully geocoded by Google. So if you're map shows up wrong, this is why. To see it as it should be, try to stick to well known, common locations rather than obscure places.

 

It's also better to use a suggested location rather than typing in your own as unless you include a full address, geocoding isn't guaranteed because of the ambiguity of placenames.

 

The logo and a picture on the result page are missing. I just haven't uploaded them yet, and I can't until I get to work.

 

Annnd, I have not tested in IE, so please don't boot it up in IE7 and tell me it's all skewiff. I'm expecting that and I will deal with it when I can

 

 

 

I'm sure there will be lots more bugs but the important thing is this basically works. Hope you all enjoy and like it

Edited August 25, 201115 yr by brightonmike

Can't get it to run for me, I get slow script errors in safari. The private jet text on the blue I think should be fatter

Can't get it to run for me, I get slow script errors in safari. The private jet text on the blue I think should be fatter

 

 

Can you try it in another browser? That's odd, although I believe the reason that's happening is because the script on the form loads a database with over 8,000 airports. Somehow, I need to shrink its filesize as it's making the form page run a bit slow.

 

Having said that, if you fill in the form successfully and it's the resulting page, I can't explain that, it should be fine.

Same in firefox for me, its when I load it and as a result wount load it all up. I get the same If i reload the page in both browsers also...

 

Its in Tiger, Snow Leopard and Lion

Edited August 25, 201115 yr by pandadoodle

So the first page doesn't load for you? That's weird. I'll try to shrink the database but it's worked for me on every computer I've tried it on, even if it was a tad slow.

 

The weird thing is, even though the DB is big, it's still only 2.5mb. It seems bizarre that 2.5mb would crash a browser.

 

Can you not click continue just to see how it works until I fix the slowness?

Edited August 25, 201115 yr by brightonmike

So the first page doesn't load for you? That's weird. I'll try to shrink the database but it's worked for me on every computer I've tried it on, even if it was a tad slow.

 

Yup first page (as soon as i click the link you gave me) its the same on 4 different macs all of which are virtually maxed ram (apart from my power mac only 16) on 50mb virgin cable. If I view it on my wifes pc its fine

Yup first page (as soon as i click the link you gave me) its the same on 4 different macs all of which are virtually maxed ram (apart from my power mac only 16) on 50mb virgin cable. If I view it on my wifes pc its fine

 

 

Very strange. The Database does need trimming and reducing in size. The problem is, trimming down a database of 8200 airports and removing unnecessary entries is going to take a very long time. Also seems bizarre it only does this on a Mac but works fine on PCs. Hmm.

Very strange. The Database does need trimming and reducing in size. The problem is, trimming down a database of 8200 airports and removing unnecessary entries is going to take a very long time. Also seems bizarre it only does this on a Mac but works fine on PCs. Hmm.

 

Yeah! Strange one, I can try it on another machine if you like? I got a laptop here I can boot up

Yeah! Strange one, I can try it on another machine if you like? I got a laptop here I can boot up

 

 

Sure man. I'd love just to see what people think of the map etc. Been so hard to do, the code for the Google map was so tricky to write, there are tutorials for API v3 but none of them did what I wanted to do. Figured it out with some outside help from this really useful chap.

 

In case you can't get it working, this is what it's supposed to do. I know there's two pictures missing! Can't upload them until I get to work.

 

Edited August 25, 201115 yr by brightonmike

Fine here with no errors.

Well done!

Fine here with no errors.

Well done!

 

Thanks a lot Mike!

I came across some mistakes too. The promised suggestions for the from and to fields didn't show and the date field started in September while it is still August.

What fields are you searching the DB by? Worth adding an index on those. Only SELECT the fields you'll be using in your page by name rather than SELECT *.

 

Are you geocoding the airports on form success? External services will slow down your request, so add fields to your DB for lat and lng and geocode them all once.

Tried in IE8

 

Won't Submit. Then I can't change the date either. And if I close to start again it takes me back to the departure date page when I 'book a flight'. even if I refresh the browser. Had to Ctrl-F5 on the page.

 

Still wouldn't Submit.

 

 

 

 

 

Also, Departure date (DD/MM/YY) yet it shows dd-mm-yyyy.

 

and site is quite slow to initially load, seems to stall on the .png background.

 

 

also IE8 reports

 

IE8 reports

 

Webpage error details

 

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB7.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; .NET CLR 1.1.4322)

Timestamp: Thu, 25 Aug 2011 11:41:37 UTC

 

 

Message: Object doesn't support this property or method

Line: 230

Char: 6

Code: 0

URI: http://www.jetbookingdirect.com/?theme=jetbook2012

Edited August 25, 201115 yr by zed

Tried in IE8

 

Won't Submit. Then I can't change the date either. And if I close to start again it takes me back to the departure date page when I 'book a flight'. even if I refresh the browser. Had to Ctrl-F5 on the page.

 

Still wouldn't Submit.

 

 

 

 

 

Also, Departure date (DD/MM/YY) yet it shows dd-mm-yyyy.

 

and site is quite slow to initially load, seems to stall on the .png background.

 

 

also IE8 reports

 

IE8 reports

 

Webpage error details

 

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB7.1; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.5; OfficeLivePatch.1.3; .NET4.0C; .NET4.0E; .NET CLR 1.1.4322)

Timestamp: Thu, 25 Aug 2011 11:41:37 UTC

 

 

Message: Object doesn't support this property or method

Line: 230

Char: 6

Code: 0

URI: http://www.jetbookingdirect.com/?theme=jetbook2012

 

 

Thanks Zed - but I did say I knew there'd be IE issues as I haven't tested in IE yet. PNG background though, there's only only PNG and it's 19kb?

 

It's probably slow because of the huge XML file it's loading that I need to trim. This site isn't slated for release until January, by then IE6/7 will be dead so hopefully I'll only need to fix it up for IE8.

I came across some mistakes too. The promised suggestions for the from and to fields didn't show and the date field started in September while it is still August.

 

 

You're right about September, but the suggestions is either because you used it in a dodgy old IE....or because you didn't type in enough characters. It won't bring up suggestions until you type in at least 4 characters.

 

The September issue is fixed, it's because I had it set to show +1 week

Edited August 25, 201115 yr by brightonmike

What fields are you searching the DB by? Worth adding an index on those. Only SELECT the fields you'll be using in your page by name rather than SELECT *.

 

Are you geocoding the airports on form success? External services will slow down your request, so add fields to your DB for lat and lng and geocode them all once.

 

 

It's not strictly a database but an XML file. The geocoding is on user request yes. I'm going to set it up so geocoding is cached. This will mean if 2 people search the same airport, the second persons submission won't geocode.

 

Edit: The map now works for multi-leg flights. Great for showing how you will zip around.

Edited August 25, 201115 yr by brightonmike

I've been geocoding a lot over the past few days. I've got close to 11,000 pieces of content to insert into WordPress as a custom post type with custom fields for latitude and longitude (among others) and I've only managed to insert 2400 of them tonight because of the 2500/day request limit.

Just gave this a try in Google Chrome (PC) and the Map didn't load. Screenshot:

Edited August 26, 201115 yr by leepaulkennedy

When you're choosing the dates for your flights in the datepicker there's a little usability issue with colours. The dates you can't select are with a darker font colour, than the ones you can select giving the impression that the selectable dates are inactive or "grayed out". It took me a while to figure this out because I wasn't paying any attention to which date I initially selected. It seems like the colours would work better the other way around.

 

When filling in the airport code I think two or three letters is the maximum you can have for the autofill. This is somewhat the norm with airline websites and people expect it to work "instantly". Also, the official airport codes are three letters. I typed in "HEL" as in the first syllabel of Helsinki and it didn't come up with anything so at first I thought you didn't add Helsinki yet.

 

Other than that the booking process worked fine. I'm using FF 6 on Windows 7.

 

Oh, and most importantly! Do WDF-members get a discount for their bookings?

Just gave this a try in Google Chrome (PC) and the Map didn't load. Screenshot:

 

Hi mate. Could you post a higher res screenshot so I can see what happened?

 

It's more than likely that you selected or typed in a location that Google just wasn't able to Geocode. The database does contain some entries that do this so they will be removed.

When you're choosing the dates for your flights in the datepicker there's a little usability issue with colours. The dates you can't select are with a darker font colour, than the ones you can select giving the impression that the selectable dates are inactive or "grayed out". It took me a while to figure this out because I wasn't paying any attention to which date I initially selected. It seems like the colours would work better the other way around.

 

When filling in the airport code I think two or three letters is the maximum you can have for the autofill. This is somewhat the norm with airline websites and people expect it to work "instantly". Also, the official airport codes are three letters. I typed in "HEL" as in the first syllabel of Helsinki and it didn't come up with anything so at first I thought you didn't add Helsinki yet.

 

Other than that the booking process worked fine. I'm using FF 6 on Windows 7.

 

Oh, and most importantly! Do WDF-members get a discount for their bookings?

 

 

I think I've fixed the datepicker issue. Non-selectable dates are greyed out, selectable dates are bold and black. Thanks for pointing that out

 

I did have three letters for autofill, but it can be an issue. For example, there are a huge number of places in the database that start with "LON" so typing in LON was bringing up a huuuuge list. I think what I'd like to do as a solution is have a maximum list length. I'm using jQuery UI and I'm not sure if it will do that yet.

 

Fixed! The list now has a max-length and it's now three characters.

Edited August 26, 201115 yr by brightonmike

One thing i did notice is the lack of the three letter Airport codes.

When my lady is working they film organisers predominately talk in and book in the airport three letter codes.

 

Anal i know.

 

Fixed! The list now has a max-length and it's now three characters.

 

Min length?

Nope, max-length in the CSS to stop the list getting really long.

 

Three letter codes are called IATA codes. The problem with IATAs is they can be applied to more than just airports. For example, Paddington Train station has an IATA.

 

The database I acquired has things like train stations and cruise ship ports in it because of this. Whereas 4 digit ICAO codes are purely for airports so we tend to stick to those.

 

Also, IATA codes are nowhere near as widely supported. Only roughly half of the airports in my list have IATAs whereas they all have ICAO.

 

I basically need a better database. But obtaining one is very difficult, the one I've got now was hard enough to find.

Fair enough. I assumed there was a sensible reason, just wondered what it was

Fair enough. I assumed there was a sensible reason, just wondered what it was

 

I do think we should try to use IATA. It's just a bit fiddly and a bit of a logistics issue right now.

 

Oh-er, I said "logistics". Been waiting for that

You've become 'a man' my son...

Not sure if others have said this, but when i click send without filling out the form on the contact page, i get directed to a new undesigned page with just '3' in the corner.

Not sure if others have said this, but when i click send without filling out the form on the contact page, i get directed to a new undesigned page with just '3' in the corner.

 

 

You're clicking through to the main site, please don't "test" the main site as it's live. I'm aware of the problem with the contact form, will be fixed soon, but yeah please don't use the actual site haha.

 

If you want to see other pages with the new design add "?theme=jetbook2012" to the end of the URL. Just bare in mind I haven't actually done them yet so they won't look good.

 

Works for me. (FF3) Now.. if a private Jet turns up to pick me up i won't be happy!

Works for me in Chrome really well nice work - I don't like the purple line though but you can't please everyone!

Hi mate. Could you post a higher res screenshot so I can see what happened?

 

It's more than likely that you selected or typed in a location that Google just wasn't able to Geocode. The database does contain some entries that do this so they will be removed.

 

Tried it again using London Heathrow and New York JFK. Still got the same problem.

 

I'm using Google Chrome 13.0.782.215

 

 

Better screenshot this time

Tried it again using London Heathrow and New York JFK. Still got the same problem.

 

I'm using Google Chrome 13.0.782.215

 

 

Better screenshot this time

 

 

I just did exactly the same flight and it worked perfectly for me, so I'm not sure why it isn't working for you. Can't figure it out!

I just did exactly the same flight and it worked perfectly for me, so I'm not sure why it isn't working for you. Can't figure it out!

 

Tried it again but from Luton - JFK and didn't work (Chrome)

 

Then I went on Firefox and works perfectly - So definitely something to do with Chrome.

Tried it again but from Luton - JFK and didn't work (Chrome)

 

Then I went on Firefox and works perfectly - So definitely something to do with Chrome.

 

That doesn't make sense, because I've tested it in Chrome on four different computers and it worked fine.

 

I think it's just your Chrome

 

Nah, only kidding, but when you can't recreate a problem it makes it really difficult to solve

CNR.

A lot of my problems are caused by mistakes in the database. For example, for an airport in France, Le Touquet was misspelled Le Tourquet, which stopped Google successfully geocoding it.

 

Ideally I need to find a better database as sorting out one that has 8500 entries would be a mammoth task.

 

 

Edit: The database has now dropped in size from 2.5mb to 1.3mb. Hopefully those of you having slow script errors shouldn't do so now.

Edited August 30, 201115 yr by brightonmike