[jQuery] AjaxCFC (paging Rey Bango...)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY text=#000000 bgColor=#ffffff>
<DIV dir=ltr align=left>Don't get me wrong. I'm not returning HTML for the whole
page. I'm ONLY returning the HTML for the affected portion of code. To use my
cookbook as an example...when you add a recipe to your grocery list it performs
a query on all recipes currently in your list (including the new one), then
returns just that string of text for the grocery list
DIV.</DIV> 
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
From: discuss-bounces@jquery.com
[mailto:discuss-bounces@jquery.com] On Behalf Of Christopher
Jordan Sent: Tuesday, February 06, 2007 5:21 PM To: jQuery
Discussion. Subject: Re: [jQuery] AjaxCFC (paging Rey
Bango...) </DIV>
<DIV></DIV>Andy, That's exactly what I've
done in the past, and in fact was how my first Ajax enabled programs functioned.
Recently though, I've come to realize that if all I need to do is update some
value on a particular area of the screen, I'll have CF return just the value
(presumably calculated or perhaps from a query), and then I'll use jQuery to
update just the portion of the screen that needs to be updated. For
instance I've got a screen that has three calendars on it. The calendars are
entirely blank (the shells were created with CF, and are just part of the
screen). I have a JS function that accepts the starting month and year and then
makes an ajax call to the server to determine which calendar cells get which
date associated with them. This same function can also accept a number
representing the number of months to move forward or backward (start in January
move forward three months and now you're in April... that sort of thing). When
the data is returned, I have jQuery update just the information in the cells
(which is just text) and it doesn't have to redraw any of the tables that
comprise the calendars. Hmm... don't know if I explained that too well,
but maybe you get the point. I've actually been meaning to start a
discussion on this list about different practices in updating the screen.
Specifically, when I've got (for instance) an area of the screen which I'll
refer to as the main container and then an area to the side of that (left or
right, doesn't matter) that contains options. Imagine BlogCFC how the blog
entries are in the main area and there is a side area that contains options or
extra information. The old way of doing something like this would be to
have frames. A frame on the side for the options and a frame on the right to
hold the main content. Let's say then that the options on the right represent
different functions of the program and thus are really different "screens" or at
least different pages, but you want the content to load in that main container
area -- without a page refresh. I'm currently doing this for one of my
clients, and I've taken the approach that the main page gets called with a
specific mode or flag and it builds the screen accordingly using jQuery. But
this seems unruly at times. Especially if I'm building a table, I've got
JavaScript building a string of HTML (after the ajax call has returned with the
necessary data) that I'll then send to the content div via jQuery. Is this the
right approach, or is it better to build any HTML like that on the server side
and send it over to be dumped to the screen. I'm curious how other folks
do this sort of thing... Did I just hijack this thread?
:o) Chris Andy Matthews wrote:
<BLOCKQUOTE cite=mid01df01c74a3b$aa1c8470$7502010a@dealerskins.loc
type="cite"><META content="MSHTML 6.00.5730.11" name=GENERATOR>
<STYLE>@font-face {
font-family: Tahoma;
}
@page Section1 {size: 8.5in 11.0in; margin: 1.0in 1.25in 1.0in 1.25in; }
P.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; COLOR: black; FONT-FAMILY: "Times New Roman"
}
LI.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; COLOR: black; FONT-FAMILY: "Times New Roman"
}
DIV.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; COLOR: black; FONT-FAMILY: "Times New Roman"
}
A:link {
COLOR: blue; TEXT-DECORATION: underline
}
SPAN.MsoHyperlink {
COLOR: blue; TEXT-DECORATION: underline
}
A:visited {
COLOR: blue; TEXT-DECORATION: underline
}
SPAN.MsoHyperlinkFollowed {
COLOR: blue; TEXT-DECORATION: underline
}
PRE {
FONT-SIZE: 10pt; MARGIN: 0in 0in 0pt; COLOR: black; FONT-FAMILY: "Courier New"
}
SPAN.EmailStyle18 {
COLOR: navy; FONT-FAMILY: Arial; mso-style-type: personal-reply
}
DIV.Section1 {
page: Section1
}
</STYLE>

<DIV dir=ltr align=left>Most of the time, I'm using the CFC to do all of the
formatting, then I return a simple string containing all of the HTML that
needs to be applied to the page. For example. take a look at <A
href="http://www.co-opcookbook.com">www.co-opcookbook.com</A>. That's where I
pulled that sample code from.</DIV>
<DIV dir=ltr align=left> </DIV>
<DIV dir=ltr align=left>When you perform a search, it runs the CFC using the
provided keyword. The CFC queries the database, loops over the results, adding
in the appropriate HTML, then returns that long string of text to the
calling JS function.</DIV>
<DIV dir=ltr align=left> </DIV>
<DIV dir=ltr align=left>That might not be the most efficient way of doing things
(if it's not PLEASE someone speak up, I want to get better), but it's the way
that makes sense to me.</DIV> 
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
From: <A class=moz-txt-link-abbreviated
href="mailto:discuss-bounces@jquery.com">discuss-bounces@jquery.com</A> [<A
class=moz-txt-link-freetext
href="mailto:discuss-bounces@jquery.com">mailto:discuss-bounces@jquery.com</A>]
On Behalf Of Paul Sent: Tuesday, February 06, 2007 4:05
PM To: 'jQuery Discussion.' Subject: Re: [jQuery] AjaxCFC
(paging Rey Bango...) </DIV>
<DIV class=Section1>
Andy, this is also
good to know. I guess I’ll figure this out eventually, but what doesn’t
yet make sense is how to handle complex objects (queries, structs) being
returned from the CFC. Do you just handle the formatting in your CFC so
you can pass back (or simply output, I guess) a string and use
$(“#element”).html() to replace the content, or do you handle formatting on
the client side? (By “you” I mean Andy specifically but the rest of you
generally as well…)<O:P></O:P>
<O:P></O:P>
I’m learning a
lot…<O:P></O:P>
<O:P></O:P>
Paul<O:P></O:P>
<O:P></O:P>
<O:P></O:P>
<DIV>
<DIV class=MsoNormal style="TEXT-ALIGN: center" align=center>
<HR tabIndex=-1 align=center width="100%" SIZE=3>
</DIV>
From: <A
class=moz-txt-link-abbreviated
href="mailto:discuss-bounces@jquery.com">discuss-bounces@jquery.com</A> [<A
class=moz-txt-link-freetext
href="mailto:discuss-bounces@jquery.com">mailto:discuss-bounces@jquery.com</A>]
On Behalf Of Andy
Matthews Sent: Tuesday,
February 06, 2007 2:07 PM To:
'jQuery Discussion.' Subject:
Re: [jQuery] AjaxCFC (paging Rey Bango...)<O:P></O:P></DIV>
<O:P></O:P>
Just so you know, you
CAN use jQuery to hit the CFC directly. Here's a sample of code I'm
using:<O:P></O:P>
<O:P></O:P>
js
code:<O:P></O:P>
function
addRecipe(id) { $.get("includes/q.cfc?method=addRecipe&id=" +
id,function(result){ eval( 'var ' + result
); $('#shoppingList').html(r.content); }); };<O:P></O:P>
<O:P></O:P>
CFC:<O:P></O:P>
<cffunction
name="addRecipe" access="remote" returntype="void" hint="Adds a recipe to your
shopping list">  <cfargument name="id" required="Yes"
type="numeric"> <cfset myStruct =
structNew()> <cfif NOT
ListFind(SESSION.grocerylist,id)> <cfset
SESSION.grocerylist =
ListAppend(SESSION.grocerylist,id)> </cfif> <cfset
myStruct["content"] =
Replace(getShoppingList(),"#chr(13)#","","ALL")> <cfwddx
action="CFML2JS" input="#myStruct#"
toplevelvariable="r"> </cffunction><O:P></O:P>
<O:P></O:P>
<O:P></O:P>
<O:P></O:P>
<O:P></O:P><PRE><O:P> </O:P></PRE></DIV><PRE wrap=""><HR width="90%" SIZE=4>
_______________________________________________
jQuery mailing list
<A class=moz-txt-link-abbreviated href="mailto:discuss@jquery.com">discuss@jquery.com</A>
<A class=moz-txt-link-freetext href="http://jquery.com/discuss/">http://jquery.com/discuss/</A>
</PRE></BLOCKQUOTE> <PRE class=moz-signature cols="72">--
<A class=moz-txt-link-freetext href="http://www.cjordan.info">http://www.cjordan.info</A></PRE></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Topic Participants
lists

[jQuery] AjaxCFC (paging Rey Bango...)

[jQuery] AjaxCFC (paging Rey Bango...)

Topic Participants

lists