[jQuery] Best way to do AJAX... CF or jQuery?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/TR/REC-html40" xmlns:v =
"urn:schemas-microsoft-com:vml" xmlns:o =
"urn:schemas-microsoft-com:office:office" xmlns:w =
"urn:schemas-microsoft-com:office:word" xmlns:st1 =
"urn:schemas-microsoft-com:office:smarttags" xmlns:ns0 =
"http://schemas.microsoft.com/office/2004/12/omml"><HEAD><TITLE>Best way to do AJAX... CF or jQuery?</TITLE>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.6000.16414" name=GENERATOR><o:SmartTagType name="City"
namespaceuri="urn:schemas-microsoft-com:office:smarttags"></o:SmartTagType><o:SmartTagType
name="place"
namespaceuri="urn:schemas-microsoft-com:office:smarttags"></o:SmartTagType><o:SmartTagType
name="PersonName"
namespaceuri="urn:schemas-microsoft-com:office:smarttags"></o:SmartTagType>
<STYLE>@font-face {
font-family: Tahoma;
}
@font-face {
font-family: Calibri;
}
@font-face {
font-family: Consolas;
}
@page Section1 {size: 8.5in 11.0in; margin: 1.0in 77.95pt 1.0in 77.95pt; }
P.MSONORMAL {
mso-style-unhide: no; mso-style-qformat: yes
}
LI.MSONORMAL {
mso-style-unhide: no; mso-style-qformat: yes
}
DIV.MSONORMAL {
mso-style-unhide: no; mso-style-qformat: yes
}
A:link {
mso-style-priority: 99
}
SPAN.MSOHYPERLINK {
mso-style-priority: 99
}
A:visited {
mso-style-priority: 99
}
SPAN.MSOHYPERLINKFOLLOWED {
mso-style-priority: 99
}
P.MSOPLAINTEXT {
mso-style-priority: 99
}
LI.MSOPLAINTEXT {
mso-style-priority: 99
}
DIV.MSOPLAINTEXT {
mso-style-priority: 99
}
P {
mso-style-priority: 99
}
PRE {
mso-style-priority: 99
}
SPAN.HTMLPREFORMATTEDCHAR {
mso-style-unhide: no; mso-style-priority: 99
}
SPAN.PLAINTEXTCHAR {
mso-style-unhide: no; mso-style-priority: 99
}
SPAN.EMAILSTYLE22 {
mso-style-unhide: no
}
SPAN.EMAILSTYLE23 {
mso-style-unhide: no
}
.MSOCHPDEFAULT {
mso-default-props: yes
}
TABLE.MSONORMALTABLE {
mso-style-qformat: yes; mso-style-priority: 99
}
P.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman"
}
LI.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman"
}
DIV.MsoNormal {
FONT-SIZE: 12pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Times New Roman"
}
A:link {
COLOR: blue; TEXT-DECORATION: underline
}
SPAN.MsoHyperlink {
COLOR: blue; TEXT-DECORATION: underline
}
A:visited {
COLOR: purple; TEXT-DECORATION: underline
}
SPAN.MsoHyperlinkFollowed {
COLOR: purple; TEXT-DECORATION: underline
}
P.MsoPlainText {
FONT-SIZE: 10pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Courier New"
}
LI.MsoPlainText {
FONT-SIZE: 10pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Courier New"
}
DIV.MsoPlainText {
FONT-SIZE: 10pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Courier New"
}
P {
FONT-SIZE: 12pt; MARGIN-LEFT: 0in; MARGIN-RIGHT: 0in; FONT-FAMILY: "Times New Roman"; mso-margin-top-alt: auto; mso-margin-bottom-alt: auto
}
PRE {
FONT-SIZE: 10pt; MARGIN: 0in 0in 0pt; FONT-FAMILY: "Courier New"
}
SPAN.HTMLPreformattedChar {
FONT-FAMILY: Consolas
}
SPAN.PlainTextChar {
FONT-FAMILY: Consolas
}
SPAN.EmailStyle22 {
COLOR: navy; FONT-FAMILY: Arial; mso-style-type: personal
}
SPAN.EmailStyle23 {
COLOR: #1f497d; FONT-FAMILY: Arial; mso-style-type: personal
}
SPAN.EmailStyle24 {
COLOR: navy; FONT-FAMILY: Arial; mso-style-type: personal-reply
}
DIV.Section1 {
page: Section1
}
</STYLE>
</HEAD>
<BODY lang=EN-US vLink=purple link=blue>
<DIV dir=ltr align=left>Michael...</DIV>
<DIV dir=ltr align=left> </DIV>
<DIV dir=ltr align=left>You probably shouldn't be using cfdump on your output page.
That includes loads of javascript, extra styles and lots of HTML crap. You'd be
better off using cfoutput or calling your CFC directly.</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 Michael E.
Carluen Sent: Friday, February 23, 2007 12:51 AM To: 'jQuery
Discussion.' Subject: Re: [jQuery] Best way to do AJAX... CF or
jQuery? </DIV>
<DIV></DIV>
<DIV class=Section1>
Rick,<o:p></o:p>
<o:p> </o:p>
So, lets crawl before
we walk here. This should help you understand using load() with CF
basics.<o:p></o:p>
<o:p> </o:p>
-----------------------------------<o:p></o:p>
On your form
page:<o:p></o:p>
<script
src="js/jquery.js"
type="text/javascript"></script><o:p></o:p>
<script
type="text/javascript"><o:p></o:p>

$(function(){<o:p></o:p>

$("#realtor").change( function() {<o:p></o:p>

var realtor_id = $(this).val();<o:p></o:p>

$("#mycfpagecontent").load("mycfpage.cfm?realtor=" +
realtor_id);<o:p></o:p>

});<o:p></o:p>

});<o:p></o:p>
</script><o:p></o:p>
<select
id="realtor"><o:p></o:p>

<option value="1">Matt</option><o:p></o:p>

<option value="2">Jacqui</option><o:p></o:p>

<option value="3">Julie</option><o:p></o:p>
</select><o:p></o:p>
<div
id="mycfpagecontent"></div><o:p></o:p>
-----------------------------------<o:p></o:p>
<o:p> </o:p>
Then on your query
page: mycfpage.cfm<o:p></o:p>
<cfquery
name="get_realtor_info"
datasource="myrealtordata"><o:p></o:p>

SELECT fname,
lname<o:p></o:p>

FROM realtorsdb<o:p></o:p>

WHERE id =
#URL.realtor#<o:p></o:p>
</cfquery><o:p></o:p>
<cfdump
var="#get_realtor_info#"><o:p></o:p>
-----------------------------------<o:p></o:p>
<o:p> </o:p>
Once you get this, then
your doing <st1:place w:st="on"><st1:City w:st="on">Ajax</st1:City></st1:place>
on CF. <o:p></o:p>
<o:p> </o:p>
Then go to <A
href="http://www.365labs.net/cf_jquery/jquery_coldfusion_quickstart.htm">http://www.365labs.net/cf_jquery/jquery_coldfusion_quickstart.htm</A><o:p></o:p>
<o:p> </o:p>
After that, your to Rob
Gonda’s ajaxCFC…. Then you’re all set!<o:p></o:p>
<o:p> </o:p>
Hope that
helps!<o:p></o:p>
<o:p> </o:p>
Michael<o:p></o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p>
<DIV
style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0in; BORDER-TOP: medium none; PADDING-LEFT: 4pt; PADDING-BOTTOM: 0in; BORDER-LEFT: blue 1.5pt solid; PADDING-TOP: 0in; BORDER-BOTTOM: medium none">
<DIV>
<DIV class=MsoNormal style="TEXT-ALIGN: center" align=center>
<HR tabIndex=-1 align=center width="100%" SIZE=2>
</DIV>
From:
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On Behalf Of Rick Faircloth Sent: Thursday, February 22, 2007 7:49
PM To: '<st1:PersonName
w:st="on">jQuery Discussion.</st1:PersonName>' Subject: Re: [jQuery] Best way to do
<st1:City w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:City>... CF or
jQuery?<o:p></o:p></DIV>
<o:p> </o:p>
Hmmm… trying to put
this into action, but I’m not straight on how to do
it.<o:p></o:p>
<o:p> </o:p>
I figured what you
meant was to create two pages… one page would have<o:p></o:p>
the <st1:City
w:st="on"><st1:place w:st="on">ajax</st1:place></st1:City> line you wrote out
and the other would the mycfpage.cfm<o:p></o:p>
<o:p> </o:p>
I have a query on
the mycfpage.cfm…<o:p></o:p>
<o:p> </o:p>
<CFQUERY
Name=”Get_Data” Datasource=”Bodaford”
MaxRows=”1”><o:p></o:p>
<o:p> </o:p>

Select Title, Text<o:p></o:p>

from announcements<o:p></o:p>
<o:p> </o:p>
</CFQUERY><o:p></o:p>
<o:p> </o:p>
…along with the page
HTML, body, head tags, etc… (or should it just have<o:p></o:p>
the
query?)<o:p></o:p>
<o:p> </o:p>
Now I’m not sure how
you want me to put the jQuery code on a page that<o:p></o:p>
I called
ajax_test.cfm. Should the line you wrote out go in the body “as
is”<o:p></o:p>
or should it be
written out in the head section with the $(document).ready(function() {,
etc<o:p></o:p>
around
it?<o:p></o:p>
<o:p> </o:p>
You can tell, I’m
new to both jQuery and <st1:City w:st="on"><st1:place
w:st="on">ajax</st1:place></st1:City>!<o:p></o:p>
<o:p> </o:p>
I appreciate your
help!<o:p></o:p>
<o:p> </o:p>
Rick<o:p></o:p>
<o:p> </o:p>
<o:p> </o:p>
<DIV>
<DIV
style="BORDER-RIGHT: medium none; PADDING-RIGHT: 0in; BORDER-TOP: #b5c4df 1pt solid; PADDING-LEFT: 0in; PADDING-BOTTOM: 0in; BORDER-LEFT: medium none; PADDING-TOP: 3pt; BORDER-BOTTOM: medium none">
From:
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] On Behalf Of Michael E. Carluen Sent: Thursday, February 22, 2007 9:01
PM To: '<st1:PersonName
w:st="on">jQuery Discussion.</st1:PersonName>' Subject: Re: [jQuery] Best way to do
<st1:City w:st="on"><st1:place w:st="on">AJAX</st1:place></st1:City>... CF or
jQuery?<o:p></o:p></DIV></DIV>
<o:p> </o:p>
Rick,<o:p></o:p>
<o:p> </o:p>
You need both. You use jQuery to send
requests to a server side scripting language like CF (or php, asp, cgi, etc)
.<o:p></o:p>
Perhaps the simplest way to introduce
yourself to an “<st1:City w:st="on"><st1:place
w:st="on">ajax</st1:place></st1:City>” activity would be to use jQuery’s load()
function.<o:p></o:p>
<o:p> </o:p>
Try this:<o:p></o:p>
<o:p> </o:p>
$("##displaycfoutput").load("mycfpage.cfm?param1=#something#&param2=#somethingelse#");<o:p></o:p>
<o:p> </o:p>
On your mycfpage.cfm, put a database query
using the URL vars your passed.<o:p></o:p>
<o:p> </o:p>
Hope that
helps.<o:p></o:p>
<o:p> </o:p>
Michael<o:p></o:p>
<o:p> </o:p>
<o:p> </o:p>
<o:p> </o:p></DIV></DIV></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Topic Participants
lists

[jQuery] Best way to do AJAX... CF or jQuery?

[jQuery] Best way to do AJAX... CF or jQuery?

Topic Participants

lists