partial reload of a page

[andy_jacko]

I have a simple postcode lookup form

someone types the first characters of a postcode, click go and the page refreshes with a list of postcodes and postage rates.

what i would like to do is have the results load without refreshing the whole page. I'm guessing AJAX but aside from spelling it, i have no clue.

any ideas?

cheers andy

[axod]

Yup, ajax is the answer...

Postcode lookups are usually in the first examples section of any good ajax book.

Basic theory is:

register an onKeyPress event handler on the input to call a function - say keypressed

function keypressed() {
if (ourtimer) window.clearTimeout(ourtimer);
ourtimer = window.setTimeout(sendreq, 1000);
}

That bit means if they haven't typed anything for a second, send the request (Better than sending a request after every single keypress).

function sendreq() {
// Create XmlHttpRequest object, and do the request. Send the partial postcode as a param
// Set the callback for it to reqcallback - this'll get called when we get data back
}

function reqcallback() {
// Here you've got the data from the server. Now use some DOM goodness to show the user
}

Obviously then you need some server side PHP for example to handle the request, and return things.
I'd shell out for a good ajax book, or of course pay someone to do it

[jonsp]

Originally Posted by andy_jacko I have a simple postcode lookup form someone types the first characters of a postcode, click go and the page refreshes with a list of postcodes and postage rates. what i would like to do is have the results load without refreshing the whole page. I'm guessing AJAX but aside from spelling it, i have no clue. any ideas? cheers andy

Ajax would be the answer. There's some good code here
Dynamic HTML and XML: The XMLHttpRequest Object

Even though it's Apples's site it works perfectly well on windows too. The principle would be
1/ add a textbox for postcode and a submit button
2/ wire up the submit button to the code above
3/ use some server side code to look up the postcode and return the results
4/ put some sort of "loading......" please wait message while 3/ is happening
5/ when the data's returned display it on the page

Cheers,
Jon