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

[Nick Way]

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

[Steve Sommers]

http://www.prototypejs.org/

and/or

http://jquery.com/

is a good start (and probably end). Hope this helps.

[Fordian-Slip]

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>

[ilssac · Accepted solution]

As well as the very popular jQuery and prototype libraries already mentioned, ColdFusion uses the extJS library for its Ajax wizardary, and Adobe also provides the Spry library.  Or you can roll you own and straight up use the xmlHTTPrequest() JavaScript function.

But I would mainly like to point out, that all of these libraries use the xmlHTTPrequest() functionality, and that you really are submitting a request to the server, you are just using JavaScript to do so behind the scenes so the user does not see it.  But as far as the client browser and server is concerned these are normal HTTP requests and responses no different then if the user clicked on a link or submitted a form.

[Nick Way]

Thanks everyone.

Alas I couldn't find what I wanted in any of the libraries (jquery etc) so had to make my own thing using xmlHTTPrequest() as Ilssac suggested.

I would post the code here but

a) it's ended up being quite messy

b) it's really a javascript issue rather than a cf one so in hindsight is a bit OT for this forum

None the less got there in the end and I'm very grateful to you all for you help.

Thanks very much indeed.

Cheers

Nick