Complete n00b with AJaX/CF - use CFFORM data to call cfc component

[WolfShade]

Hello, everyone.

I've been asked to do something in CF I've never done before.  Without actually submitting a CFFORM or refreshing the page, make an AJaX call to a cfc component, which will get data from the database, then display it on the same page.

I'm at a complete loss, here.  Has anyone done something like this??

Thanks,

^_^

[ilssac]

Many people.  So many that it has it's own sections in the documenation.

Using Ajax UI Components and Features

http://livedocs.adobe.com/coldfusion/8/htmldocs/ajaxui_1.html

Using Ajax Data and Development Features

http://livedocs.adobe.com/coldfusion/8/htmldocs/ajaxdata_01.html

[ilssac]

If you care to understand the functionality behind the wizardry.  ColdFusion does not mind if you look behind the curtain.

AJAX Tutorial

http://www.w3schools.com/Ajax/Default.Asp

W3Schools uses .NET for the server side processing in the examples.  But they are so rudimentary that they are trivial to transcribe into CFML versions.

[WolfShade]

I'll take a look at them, but I usually don't learn from things like these.  I'm more of a visual/hands on learner.  Thanks for the suggestions.

^_^

[ilssac]

They both of plenty of examples to use and get your hands on code.

[WolfShade]

It's taken me days to figure out how to get the database to return data.

Now what?  I'm not seeing any examples on what to do with the records once they are in JavaScript variables.

^_^

[ilssac]

You use JavaScript DOM manipulation code to use that data in the JavaScript variables to modify your user interface in the desire manner.

You might find more direct examples from JavaScript tutorials for this side of the AJAX equation.

Super Simple Example.

<div id="theDiv"></div>

<script type="text/javascript">

  getElementById("theDiv").innerHTML = "Look Ma. No Hands!";

</script>

There is much more that would need to be added to that to make it into something usefull.

[WolfShade]

Okay.. I can access the [variable].DATA object in JavaScript.

Change of scenario: Suppose I were to use this same process and used ColdFusion.navigate("document.cfm","cfdiv_name") to load a page.  How would I get the JavaScript object that contains the query data to "document.cfm"?

Your help is greatly appreciated.

^_^

[WolfShade]

Okay.. I can pass the JSON data to the document.cfm page, but because the document.cfm page takes a few seconds to load, I don't know how to get the data to display AFTER the page is done loading.  I've tried "window.onload = ", but that produces errors.  There is a function called when the AJaX initializes, but that does nothing.  (I should say, it's doing everything else it's supposed to do, just not what I want it to include.)

Any suggestions?

Thanks,

^_^