Dwayne,
If you download the latest package from RIA Forge, you will get examples
packaged with the code. However, this comes up now and then so I'll
share a simple example here.
You need to start off by including all the appropriate libraries (of
course your paths will vary):
<script type="text/javascript" src="Include/js/jquery.js"></script>
<script type="text/javascript"
src="Include/js/jquery.AjaxCFC.js"></script>
<script
type="text/javascript">$.AjaxCFC({require:'json,wddx,dDumper,log4j,DWRSyntax,blockUI'});</script>
This third line above is really exciting to me. It allows me to include
more .js files without having to use any more script tags. The .js files
have to be in the same path as Robs code, but I imagine (read: I've not
tested this), that you could include paths inside the require hash.
Anyway, here's the way that *I* implement this third line from above:
<CFSet JSIncludeList = "">
<CFSet JSIncludeList = ListAppend(JSIncludeList, "json")>
<CFSet JSIncludeList = ListAppend(JSIncludeList, "wddx")>
<CFSet JSIncludeList = ListAppend(JSIncludeList, "dump")>
<CFIf ShowLog4JS>
<CFSet JSIncludeList = ListAppend(JSIncludeList, "log4j")>
</CFIf>
<CFSet JSIncludeList = ListAppend(JSIncludeList, "jquery.odbcdates")>
<CFSet JSIncludeList = ListAppend(JSIncludeList, "jquery.block")>
<CFSet JSIncludeList = ListAppend(JSIncludeList, "jquery.json")>
<CFSet JSIncludeList = ListAppend(JSIncludeList, "script")>
<CFSet JSIncludeList = ListAppend(JSIncludeList, "LeftCorner")>
<script type="text/javascript" src="Include/js/jquery.js"></script>
<script type="text/javascript"
src="Include/js/jquery.AjaxCFC.js"></script>
<CFOutput>
<script
type="text/javascript">$.AjaxCFC({require:'#JSIncludeList#'});</script>
</CFOutput>
I doe this because as often as possible I like to avoid having code that
scrolls way off the page. Notice also, that I included a bunch of other
..js files that are *NOT* related to AjaxCFC. They're just libraries with
functions I find useful, and I'm using Rob's nice AjaxCFCHelper function
to load them for me. You, of course, don't have to do this. Rob's got an
excellent example of an Ajax call using the jQuery branch of the AjaxCFC
code here
<http://ajaxcfc.riaforge.org/index.cfm?event=page.svnview&path=%2Fbranches%2Fjquery%2Fexamples%2FcomplexObjects&file=index%2Ecfm>.
(If that link doesn't work, the example is in the SVN under this path:
ajaxCFC SVN View for /branches/jquery/examples/complexObjects/index.cfm)
Okay, so the JavaScript that makes up my ajax call looks like this:
// this function calls a cfc that generates html display screens and
dumps them into my "MainContent" div.
function DisplayScreen(currentScreenString, methodName){
gCurrentScreen = currentScreenString;
$.AjaxCFC({
url: "CFC/Display.cfc",
method: methodName,
data: {},
unnamedargs: false,
serialization: "html",
success: function(data) {
$("#MainContent").empty().append(data);
setClickEvent();
}
});
}
// Then there's just a div in my HTML with an ID "MainContent", and I've
got a link that looks like this:
<a href="javascript: DisplayScreen('ChangPass',
'displayPasswordChange');">Display the Password Change screen</a>
You don't have to use an anchor tag. You could easily use a button that
has an onclick with the same line of javascript in it (minus the
'javascript:' part of course). The first argument is just something that
gets used in the rest of my program that I ripped this example from and
you can ignore it. The second argument in my example, however, is the
name of the method that is going to be called (see the CFC code below).
The CFC that goes along with this looks like this (note, that I'm only
including one of the several functions in this cfc):
<cfcomponent extends="base">
<cfinclude template="../Include/UDFLibrary/StringLib.cfm">
<cffunction name="displayPasswordChange" returntype="string"
output="true">
<cfset var my = structNew()>
<cfset my.ElementLabels = "Old Passowrd, New Password, Confirm
New Password">
<cfset my.ElementSizes = "12, 12, 12">
<cfset my.ElementTypes = "password, password, password">
<cfsavecontent variable="my.returnVar">
<form name="f" method="post" action="Admin.cfm">
<div class="TableWrapper">
<table class="OuterTable" border=1>
<tr><td>
<!--- the header table --->
<table style="width:100%">
<tr>
<td class="Header">Change Password for
#Session.UserName#</td>
</tr>
</table>
<table>
<cfloop index="my.i" from="1"
to="#ListLen(my.ElementLabels)#">
<cfset my.ElementDisplay =
ListGetAt(my.ElementLabels, my.i)>
<cfset my.ElementName =
Replace(my.ElementDisplay, " ", "", "All")>
<cfset my.ElementSize =
Trim(ListGetAt(my.ElementSizes, my.i))>
<cfset my.ElementType =
Trim(ListGetAt(my.ElementTypes, my.i))>
<tr>
<td>#my.ElementDisplay#</td>
<td><input type="#my.ElementType#"
name="#my.ElementName#" size="#my.ElementSize#"></td>
<cfif my.i eq 3>
<td><span class="NoMatch"
style="display:none;"></span></td>
</cfif>
</tr>
</cfloop>
<tr>
<td colspan=2 align="center"><span
class="MessageArea" style="display:none;"></span></td>
</tr>
</table>
<div style="width:100%; margin:0px 3px 3px 0px;"
align="right">
<input type="button" value=" Change "
name="btnChange" onclick="ChangePassword(f);">
</div>
</td></tr>
</table>
</div>
</form>
</cfsavecontent>
<cfreturn my.returnVar>
</cffunction>
</cfcomponent>
Well, I hope this helps. This example, unfortunately, didn't show
passing arguments, though that's super easy as well. Rob's example on
RIAForge.org shows passing arguments.
I hope this helps.
Cheers,
Chris
Dwayne Cole wrote:
> Where can I find J-Query or AjaxCFC examples. I went to the websites and
> found great documentation but i did not find any component examples.
>
> Furthermore is anyone creating custom tags for the components or shoud I
> start getting familiar with javascript. urgh.
>
>
> ---------- Original Message ----------------------------------
> From: Rey Bango <[EMAIL PROTECTED]>
> Reply-To: [email protected]
> Date: Tue, 20 Feb 2007 09:54:48 -0500
>
>
>> With the growing number of ColdFusion developers using AjaxCFC for
>> jQuery, I felt it was important to announce a new development that will
>> dramatically benefit their ability to deliver RIA applications.
>>
>> I'm proud to announce that the open source jQuery Project and Jack
>> Slocum's open source Ext (aka YUI-Ext) Project, have partnered to
>> integrate the amazingly lightweight and powerful jQuery framework with
>> Ext's awesome UI library. This collaboration will greatly enhance the
>> capabilities of both projects and expand the functionality available to
>> developers using the jQuery JavaScript Library and the Ext UI component
>> suite.
>>
>> With AjaxCFC for jQuery's tight integration of the jQuery library,
>> ColdFusion developers will now have world class components to choose
>>
> >from when building their web applications. As more details of the
>
>> relationship become apparent, I will work with Rob Gonda to see how to
>> offer even tighter coupling with AjaxCFC.
>>
>> For more details please visit here:
>>
>> http://jquery.com/blog/2007/02/19/jquery-and-jack-slocums-ext/
>>
>>
>>
>
>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
ColdFusion MX7 and Flex 2
Build sales & marketing dashboard RIAâs for your business. Upgrade now
http://www.adobe.com/products/coldfusion/flex2
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:270192
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
