AJAX Page

This is an AJAX demo page, all the sections below use AJAX to load the elements, so the main page never needs to reload. AJAX can be used for all sorts of elements on a page including image rotation at intervals, Shoutbox or Chat where users can chat live on the site, Displaying details from selections made using drop down combo boxes or anything where you don't want the page itself to reload.

Drop Down Selection

Selecting an entry from the drop down list will load the details into the area below the selection box. (Sample data from Northwind.mdb)


Select a Customer:

CustomerIDALFKI
CompanyNameAlfreds Futterkiste
ContactNameMaria Anders
ContactTitleSales Representative
AddressObere Str. 57
CityBerlin
Region
PostalCode12209
CountryGermany
Phone030-0074321
Fax030-0076545

Using a Drop Down Filter

In this example we use the initial drop down to filter the list in the second drop down allowing a user to select a country before looking for a supplier.


Select Country:       

Select a Customer: 

CustomerIDCACTU
CompanyNameCactus Comidas para llevar
ContactNamePatricio Simpson
ContactTitleSales Agent
AddressCerrito 333
CityBuenos Aires
Region
PostalCode1010
CountryArgentina
Phone(1) 135-5555
Fax(1) 135-4892

Both these examples use the same AJAX function that is called with parameters that define the server page that is called and the div id where the results are returned. Obviously the function also passes the value of the selection box to the server page as a query string so the page returns the required results.

Comments

Please feel free to leave comments, questions or suggestions here, I will respond to questions as soon as possible but please leave your correct email address as I sometimes email responses to questions.

Add Comment

Posted By: Ian Coombs Date: 23/08/2009 13:28

 Hi Stewart

Sorry for the delay in replying and thanks for you comment on the demo. I have emailed you a working example of the code, if you have any problems please email me and i will try to help out.

Regards
Ian

Posted By: Stewart Peters Date: 18/08/2009 10:29

 Hi Ian

Having looked around the internet at lots of AJAX code and examples, i have yet to get my head around it. Looking at this demo page it almost fits exactly what i need but i see no code. where can i get the code and would you be able to help me implement it in my site.

Many Thanks

Stewart

Posted By: Ian Date: 28/07/2009 09:18

 Hi Mark

Yes you can have as many drop down boxes as you need, it just gets a bit confusing but each drop down resides in its own div and the function updates the div with the id specified when calling the function.

I will be adding a second page to this example with the code and explanation on how to use it, and eventually i will provide a zip file with a working page so you can test it and see how it works.

I will email you when the code is available.

Regards
Ian

Posted By: Mark G Date: 27/07/2009 22:32

 The examples look exactly what i have been looking for but i need more than two drop down selection boxes, is that possible.

Where do i find the code for the ajax function?

Regards
Mark

Posted By: Ian Date: 25/07/2009 17:24

 Hi All

Please feel free to leave comments, questions or suggestions here, i will respond as soon as possibe.

Please leave your correct email address as i sometimes respond via email.

Regards
Ian