Edit: After following a few tutorials I am stuck here
I am new to jquery but have some experience with Coldfusion. I have been desperate for an easy tutorial that shows how jQuery/AJAX pulls a query from a ColdFusion9 CFC and displays it on the HTML calling page. I tried following this ben_tutorial but it is too complex for me. There is also a another tutorial , but I do not want to install a plugin. Where should I be looking? I am googling "jquery ajax coldfusion"
check this:
ReplyDeletethere is a simple quickstart tutorial.
http://www.365labs.net/cf_jquery/jquery_coldfusion_quickstart.htm
Some links I found are:
ReplyDeletehttp://blog.pengoworks.com/index.cfm/2011/3/3/Easy-AJAX-using-ColdFusion-jQuery-and-CFCs
http://blog.kukiel.net/2011/09/jquery-coldfusion-and-cfdump-into-div.html
http://tutorial43.learncf.com/
Help with return data using ColdFusion and jQuery Ajax
You can almost never go wrong reading these blogs for coldfusion
bennadel.com
coldfusionjedi.com
http://cflove.org/
I assume you have a fair knowledge of HTML. To accomplish the sort of thing you are asking, use this snippet:
ReplyDelete$.get("coldfusion-page.cfm",function(data){
$("#displaydiv").html(data);
});
$.get is a shorthand method that simply retrieves the given URL. The function() part that follows it is what is run when the request to the coldfusion page completes. All it does is put the data that came back into the HTML tag with an ID of "displaydiv".
It really doesn't get simpler than this.
You didn't elaborate on what you want to update on the client side. Forms are common, so if you have client side html form like:
ReplyDelete<input type="text" name="title">
<input type="text" name="date">
<input type="text" name="author">
You would generate and send a JSON string with coldfusion. The JSON string could look something like:
{"title" : "mytitle", "date" : "mydate", "author" : "myauthor"}
To update the data on the client side you would execute (coldfusion-page.cfm is the name of your server side ajax responder):
jsonOBJ = {};
$.ajax({
type: "GET",
url: "coldfusion-page.cfm",
cache: false,
success: function(data){
jsonOBJ = jQuery.parseJSON(data);
for (var key in jsonOBJ) {
$("input[name=" + key + "]").val(jsonOBJ[key]);
}
},
});
OR, If you just want to update a div or textarea like:
<div id="uniquedivname"></div>
you just send the html/text and replace the success function in the ajax call with:
success: function(data){
$("#uniquedivname").html(data);
},