Getting started with Ajax - how do I query the db without 'submitting' the page?

Question

Hi guys,
I'm building a simple 'power point presentation' - basically a cf page which will display a large jpg [a slide]) every n seconds I want the page to query the db to ask if it needs to change the jpg and if so which jpg should it now show. In this way we can control the presentation by updating the database on the fly.
So I think I will acheive this as follows:
1. a 'display' page that contains javascript that fires every n seconds
2. that js to somehow pass 2 variables (GET?) to an action page (ie user id and an authentication var)
3. the action page will the query the db (using the vars passed in step 2)
4. the action page returns a result (path to jpg to display) which somehow(?!) is passed back to the display page
5. the display page then swaps the jpg it is showing for the one passed back to it in step 4
6. ideally the display page then also passes another 2 variables to the action page letting us know it has received the update and changed the image accordingly
I'm fine with all the html and cfm stuff - where I am stuck is the js bits, I've had a good look through google and don't seem to be making any progress so if anyone could please point me in the right direction I'd be ever so grateful.
Any snippets / advice very gratefully received
TIA
Nick

Answer 1

Hi Nick -
Let me also recommend jQuery.
Fantastic stuff once you get the hang of it, and even the simple stuff is cool.
Ok... here's what I did...
There are probably better ways to do it, but I cheated, in that I did it my way, and got some good results.
Using divs to define my display areas here's what I did:
I have 2 select statements -
1) Selecting from 1 populates the other select.
2) The JS function is triggered when a selection is made.
3) The Ajax statement goes out to a web page, that new page does a query and creates a new div with the same name as "txtResult", for my example.
4) The Ajax then pulls back the new page and displays it.
It's pretty easy after a few tries.
Hope this helps.
Doug
function dynamic_Select(poolID){
$.ajax({
type: "GET",
url: '/forms/selectSchedules.cfm',
data: "id=" + poolID,
dataType: "text/html",
success: function(html){
    $("#txtResult").html(html);    
    <div style=" padding-left:100px;">   
        Select Pool:
        <select name="pool" onchange="dynamic_Select(this.value)" />
        <option value="#" selected="selected">-Select-</option>
        <cfoutput query="pools">
        <option value="#poolID#">#poolName#</option>
        </cfoutput>
        </select>
        <span id="txtResult" style=" padding-left:100px;">
            Select Schedule:
            <select name="schedules" id="schedules" onchange="getInfo()">
            <option></option>
            </select>
        </span>
    </div>