Using FW/1 for jQuery/Ajax "applications"

[ClintW]

I'm just getting into using more jQuery and Ajax functionality to
create ColdFusion web based business/backend office type applications,
as apposed to creating "web sites". The biggest difference I can see,
stated in a simplified way, is that business apps live on a single
page while actions and events use Ajax to make calls that generate
results and views to be pulled in or fetched and displayed. Kinda like
continually replacing a div area with new content on one page. Keep in
mind that all this bypasses page redraws and url changes. Yes it means
there's no concern for SES or SEO, it's an app not a web site.
Actually the entire idea of browser based office apps to me can be
more easily accomplished in Flex, but any ways..

That being said, Sean or anyone else, I'm looking into how I can use
FW/1 as the framework for such a system. I'm about to look into it
extensively today and could use any input to speed me along if you
guys already have experience in doing this. To begin with, where an
event controller fits into doing things this way, if at all.. Or maybe
I need some other framework entirely, hmm..

[Eapen]

FW/1 works well for such apps.

This is a bit rough and I am omitting quite a bit but to give you a basic idea, I have the following structure for one of my apps - 

controllers/ajax.cfc

layouts/ajax.cfm

views/ajax/

            -various.cfm

            -files.cfm

The layouts/ajax.cfm just contains a 

<div id="ajax">

<cfoutput>#body#</cfoutput>

</div>

<cfset request.layout = false> 

and this allows just the <div> tag to be output and used for AJAX purposes. 

jQuery just makes calls to the /index.cfm?action=ajax.various&someother=variable

HTH,

Eapen.

--
FW/1 on RIAForge: http://fw1.riaforge.org/

FW/1 on github: http://github.com/seancorfield/fw1

FW/1 on Google Groups: http://groups.google.com/group/framework-one

[Greg Moser]

I have a project in place that does this very thing, very simply.  You can take a look at the documentation here: https://github.com/gregmoser/fw1AjaxAdapter/wiki

It is in it's infancy but the concepts are very simple and I use this same methodology with some live sites and it works very well.

If you install that source code it provides a working example, but the AjaxAdapter itself is just a single cfc, and a single js file (very lightweight).

I'd love to hear any feedback you have.

[Will Coleda]

I have a very similar setup - instead of using a layout, however, I
have several ajax/* views, like ajax/json.cfm:

<!--- Display rc.data (a query) as JSON --->
<cfsetting showdebugoutput="false">
<cfset Request.layout = false>
<cfcontent reset="true" type="text/html; charset=utf-8"><cfoutput>#new
ccf.JSON().dumpQuery(rc.data)#</cfoutput>

In the controller, I invoke the appropriate service method get a
result object, and then use

fw.setView("ajax.json");

(or .xml, or .empty, etc.)

I don't have enough ajax/ calls to split that out into multiple
sections, but you could certainly do that if necessary.

--
Will "Coke" Coleda

--
Will "Coke" Coleda

[Dave Anderson]

I used to create "xhr" circuits for handling ajax requests that had their own layout and whatnot, but since standardizing to jQuery I've eschewed approaches like that for a simpler one.

Every AJAX request from jQuery has a request header called "X-Requested-With" with a value of "XMLHttpRequest".  Leveraging this header, my apps contain a "mode" object with the methods isAJAX(), isProduction(), isLocal(), and isRobot().  At the top of my global layout file, I check to see whether the request is an AJAX request, and if it is, output the buffer and exit the template.  This approach provides some nice advantages.  I can call any action as an AJAX request or a regular HTTP request, and the layout is automatically  parsed based on the type of request.  There's no need determine anywhere else in the code whether the request is an AJAX one or not.

Here's my simple isAJAX() function:

<cffunction name="isAJAX" access="public" output="false" returntype="boolean">

<cfset var hdrs = getHTTPRequestData().headers />

<cfif structKeyExists(hdrs,'X-Requested-With') AND hdrs['X-Requested-With'] EQ "XMLHttpRequest">

<cfreturn true />

</cfif>

<cfreturn false />

</cffunction>

And this is what I have up near the top of my global layout:

<cfif application.mode.isAJAX()>

<cfsetting showdebugoutput="false" />

<cfcontent reset="yes" />

<cfoutput>#body#</cfoutput>

<cfexit method="exittemplate" />

</cfif>

And that's it.  No need for any mention of AJAX this or not AJAX that anywhere else in the code (except the occasional remote method in an XHR proxy object when you need some JSON data or something, but that's another matter).