Copy link to clipboard
Copied
I have searched for a complete example on how to use JQuery and CFML to submit a form.
So how to submit a form, pass it's form values to the data page and return it all to the page where the form is on.
I found all kinds of different code snippets but no complete example, can anyone help me, provide such?
Thanks!
Does this help?
http://www.coldfusionjedi.com/index.cfm/2010/5/8/Simple-jQueryColdFusion-form-example
Copy link to clipboard
Copied
Does this help?
http://www.coldfusionjedi.com/index.cfm/2010/5/8/Simple-jQueryColdFusion-form-example
Copy link to clipboard
Copied
That is very helpfull :), only problem, even if i log in with the given username and password i keep getting login failed, your example on your page works fine...
Maybe it's because i am using Railo, can't think of anything else, using the same code, same browser.
Copy link to clipboard
Copied
Well, I'd recommend adding some logging. In your CFC, log the
arguments sent. Also check to see what Firebug is showing you.
Copy link to clipboard
Copied
I am not sure how to check on the argument being send in:
component {
remote boolean function authenticate(string username, string password) {
sleep(1400);
if(arguments.username == "paris" && arguments.password == "hilton") return true;
return false;
}
}
I am not used to work with script cfc's
Copy link to clipboard
Copied
Well, one option is to rewrite it in tag based language.
But here is a quick log:
writeLog(file="application", text="#serializejson(arguments)#");
This writes to the application log. It writes a JSON version of the arguments.
Copy link to clipboard
Copied
I am trying the first option but haven't got any luck:
<cfcomponent>
<cffunction name="authenticate" access="remote" returntype="boolean">
<cfargument name="username" type="string" required="yes">
<cfargument name="password" type="string" required="yes">
<cfdump var="#argument.username#">
<cfabort>
<cfif argument.username eq "paris" and argument.password eq "hilton">
<cfreturn true>
<cfelse>
<cfreturn false>
</cfif>
</cffunction>
</cfcomponent>
Copy link to clipboard
Copied
Ok, so what does Firebug show you?
Copy link to clipboard
Copied
Emmm i was hoping that the cfdump would work as i don't really understand how to use firebug to check on what's going on.
Copy link to clipboard
Copied
Knowing how to use Firebug for Ajax is critical. Seriously. Check this
video. It walks you through the process:
http://insideria.com/2009/06/quick-video-example-of-firebug.html
Copy link to clipboard
Copied
That is awesome so now i know what to do with firebug!
I tested with firebug and i get a respons of false when the login is wrong and a respons of true when the login is correct.
So the cfc is working correctly.... strange.......
<cfcomponent>
<cffunction name="authenticate" access="remote" returntype="boolean">
<cfargument name="username" type="string" required="yes">
<cfargument name="password" type="string" required="yes">
<cfif arguments.username eq "paris" and arguments.password eq "hilton">
<cfreturn true>
<cfelse>
<cfreturn false>
</cfif>
</cffunction>
</cfcomponent>
Copy link to clipboard
Copied
So then your front end code isn't working - can you show that?
Copy link to clipboard
Copied
Yes here it is, saved in a file called jqueryajax2.cfm:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
//grab the submit action
$("#loginForm").submit(function(e) {
//stop the form submission
e.preventDefault()
//get my values
var uval = $("#username").val()
var pval = $("#password").val()
//basic validation
if(uval == '' || pval == '') return
//disable the button
$("#loginButton").attr("disabled",true)
//Let the user know we are doing something
$("#result").html("Logging in...")
//Send them to the CFC
$.post("test.cfc?method=authenticate&returnformat=json",
{username:uval, password:pval},
function(res) {
//Handle the result
if(res == "true") {
$("#result").html("Your login worked.")
//Do more here.
} else {
$("#result").html("Your login failed.")
$("#loginButton").removeAttr("disabled")
}
})
})
})
</script>
</head>
<body>
<form id="loginForm">
username: <input type="text" name="username" id="username"><br/>
password: <input type="password" name="password" id="password"><br/>
<input type="submit" value="Login" id="loginButton">
</form>
<div id="result"></div>
</body>
</html>
Copy link to clipboard
Copied
So after
function(res) {
add
alert(res);
or console.log(res)
And tell us what you see.
Oh- nevermind. It's whitespace. I can gaurantee it. Either add
output=false to your cfcomponent AND cffunction tag, OR do this
res =$.trim(res);
$.trim() is a jquery function.
Copy link to clipboard
Copied
Ahhh yes! That was the problem, perfect, thanks for your time, learned a bit more!
Copy link to clipboard
Copied
So now the question is how to change:
//Handle the result
if(res == "true") {
$("#result").html("Your login worked.")
//Do more here.
} else {
$("#result").html("Your login failed.")
$("#loginButton").removeAttr("disabled")
}
So it will catch and display a query result set that i can set in the .cfc.
What would be the change when i have for example a query returned named "results".
Any idea's?
Copy link to clipboard
Copied
Would you mind if I did this in a blog entry today? So I have a bit
more space (and yeah, traffic .
Copy link to clipboard
Copied
That would be awesome!
Copy link to clipboard
Copied
http://www.coldfusionjedi.com/index.cfm/2010/11/9/Working-with-a-ColdFusion-Query-in-jQuery