Using jQuery/AJAX we can pass information asynchronously to and from a CFC. The hardest part of doing this has always been a Where do I start?
. Thankfully, I made a template for creating the AJAX calls to a CFC several years back that covers all of the bases.
In this demo, we are just going to take the information provided by the user, pass it to a CFC function, and simply return the value and do something with it.
This is the working demo. Just enter something into the field and mash the Test Me
button.
Notice that the page did NOT refresh. This is the aforementioned passing of info asynchronously. This means the info was passed to the CFC behind the scenes - invisibly. How do we perform this miracle of science? I'll show you...
The HTML for the page should just be our standard Bootstrap 4 template. You'll want a copy of my jpBSField custom tag too. More on that tag in another lesson. It's a game-changer for app development. Anyway, then, add the following.
%CFROOT%/cfusion/custom tags
folder
The AJAX template below is the most basic version of the template
I created a few years back. It's very simple. You specify a function trigger - in this case when the Test Me
button is clicked. Then pass some info into the CFC and tell the script what you want to do when you get a valid response.
In the case of this script we are just passing the info the user types into the text field into the CFC.
Put this call beneath your script tag calling jQuery. If you look at the source of this page you'll see where I mean....
The // do this stuff when successful
section is just creating a Bootstrap alert with plain javascript. The Data
variable is the returned data from the CFC. This is where things can be a bit confusing. In the CFC we send back a variable named user
. Once that content is returned to the AJAX script it becomes Data
, which is being created from the section of the script following the // send the data to the CFC
comment. You won't use the user
variable anywhere but the CFC.
In the case of the CFC, test1.cfc, you just need to create it in a folder named comps
. There's no magic to that name - you'll see it is as part of the URL in the jQuery AJAX script above. Heck, you could have a folder named ILoveDillPickles
instead - just make sure your code reflects it.
You can see the simple <cfreturn user />
here that sends the user
variable back to the AJAX script where it will become the Data
variable.
This is the most basic bare-bones CFC function I could create for this demo. It simply takes the incoming argument theKeyword
and sends it back to the user. A couple of items to note here:
theKeyword
? The variable is the same name as the script variable in the AJAX. Make sure this is always the case.Debugging is the biggest pain with CFC calls. I generally avoid them simply because they can be such a pain to debug. Fortunately, I have screwed these things up enough that I can direct you in a simple debugging method.
Because the call to a CFC with AJAX is done asynchronously, you don't actually see it happen. It is done silently behind the scenes. Here's how to see the request and response:
test mebutton.
Headers- you can see the URL and values passed to the CFC since we are doing a GET request here.
Responsetab and you can see the info - including any CF errors - being returned to the page!
JSON Pre-processor
section. Just remove it and that should fix the most normal error you'll run across as you try to get thing this working. You should prefix your JSON for security purposes.