HELP: CFC+jquery+JSON
Posted At : March 25, 2010 1:48 PM | Posted By : Admin
Related Categories: Ajax, Web20, Coldfusion, jQuery
Related Categories: Ajax, Web20, Coldfusion, jQuery
Ok, I've been at this for a couple of hours now. I thought I was on the right track, but it looks like I'm still a bit lost :(
I have a modal login form using jquery and colorbox plugin.
Here is a snippet of my jquery ajax call:
$j.ajax({
url: 'cfc/security.cfc?method=login',
data: datastring,
dataType: 'json',
success: function(data) {
var response = eval(data);
console.log(response.MESSAGE);
$j('.ajaxMsg').css({"display":"block"}).html(data);
$j.fn.colorbox.resize();
}
});
When calling this CFC from a URL using the correct parameters, I get this:
{"MESSAGE":"Verified! Logging in...","FNAME":"John","LNAME":"Smith","VALID":true}
This is exactly what I want.
However, when running the ajax call above I get:
<wddxPacket version='1.0'><header/><data><string>{"MESSAGE":"Verified! Logging in....","FNAME":"John","LNAME":"Smith","VALID":true}</string></data></wddxPacket>
And this is screwing me up.
Here is my CFC snippet:
<CFFUNCTION name="login" access="remote" returntype="string" output="false">
<cfargument name="username" type="string" required="Yes">
<cfargument name="password" type="string" required="Yes">
<cfargument name="stayLogged" type="string" required="no" default="no">
<CFSET myReturn = {}>
.... sql statements ...
if valid
<cfset myReturn.valid = "true">
<cfset myReturn.fname = #getLogin.fname#>
<cfset myReturn.lname = #getLogin.lname#>
<cfset myReturn.message = "Verified! Logging in....">
if invalid
<cfset myReturn.valid = "false">
<cfset myReturn.fname = "">
<cfset myReturn.lname = "">
<cfset myReturn.message = "Unverified! Please try signing in again.">
<cfset myReturn = serializeJSON(myReturn)>
<cfreturn myReturn>
</cffunction>
Ok...what am I doing wrong? :(
change the URL parameter in the AJAX call
from:
url: 'cfc/security.cfc?method=login',
to:
url: 'cfc/security.cfc?method=login&returnformat=json',
Remove console.log and then change:
$j('.ajaxMsg').css({"display":"block"}).html(data);
to:
$j('.ajaxMsg').css({"display":"block"}).html(response.MESSAGE);
I'm trying to remove/replace all prototype/scriptaculous from this project (it's a makeover from a 2006 website that's been sitting in the dark for a while).
Hmm, maybe you were still getting WDDX, but the browser was simply not rendering the WDDX tags (but trying to evaluate them as invalid HTML tags). Try hitting it via URL and viewing the page source.
<CFFUNCTION name="login" access="remote" returntype="string" output="false">
to
<CFFUNCTION name="login" access="remote" returntype="any" output="false">
I removed this line:
<cfset myReturn = serializeJSON(myReturn)>
And it still works :)
It must have something to do with datastring.
var datastring = $j('#loginForm').serialize();
Here's just a part of what I see: (of course, the only thing I want to see is: 101):
101
</td></td></td></th></th></th></tr></tr></tr></table></table></table></a></abbrev></acronym></address></applet></au></b></banner></big></blink></blockquote></bq></caption></center></cite></code></comment></del></dfn></dir></div></div></dl></em></fig></fn></font></form></frame></frameset></h1></h2></h3></h4></h5></h6></head></i></ins></kbd></listing></map></marquee></menu></multicol></nobr></noframes></noscript></note></ol></p></param></person></plaintext></pre></q></s></samp></script></select></small></strike></strong></sub></sup></table></td></textarea></th></title></tr></tt></u></ul></var></wbr></xmp>
<style type="text/css">
.cfdebug
{
color:black;
background-color:white;
font-family:"Times New Roman", Times, serif;
font-size:small
}
.cfdebuglge
{
color:black;
background-color:white;
font-family:"Times New Roman", Times, serif;
font-size:medium;
}
a.cfdebuglink {color:blue; background-color:white }
</style>
<table class="cfdebug" bgcolor="white">
<tr>
<td>
<p class="cfdebug"><hr/>
<b class="cfdebuglge"><a name="cfdebug_top">Debugging Information</a></b>