Hello, all...
I appreciate everyone's help in getting my first ColdFusion/Ajax/jQuery
code working for this login...except for one minor (sarcasm) point.
The cf line of code in the first page below (PRE_LOGIN.CFM),
which should prevent the login dialog from appearing after someone
logs in, is not doing anything. I've tried checking the variable with
<cfdump var = '#session#'>, but I get an error saying the variable doesn't
exist.
Upon successful login, it should get set (session.manager_id) in the
manager_data.cfc below. Why?
Much of the code and approach has been hacked together from various
tutorials, etc., not specifically dealing with login.
If anyone wants to take the time to look over the code involved in the
pages below and critique the code or approach, if even on just one point,
it would be most welcome...it's how I learn while doing.
The pages involved haven't been optimized for production in terms of their
names, etc., this is just a proof-of-concept at this point.
Anyway, here's the code and approach:
PRE_LOGIN.CFM (first page visited to trigger dialogue if no one's logged
in)--------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<cfsetting showdebugoutput="no">
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<script type="text/javascript" src="shadowbox-jquery.js"></script>
<script type="text/javascript" src="shadowbox-2.0.js"></script>
<cfif not isdefined('session.manager_id')> <=== This line, I thought,
would keep the script
from running
<script type="text/javascript">
Shadowbox.loadSkin('classic', 'skin');
Shadowbox.loadLanguage('en', 'lang');
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf',
'wmp'], 'player');
window.onload = function(){
var options = {
player: 'iframe',
width: '400',
height: '380',
title: 'Login',
content: 'login.cfm',
};
Shadowbox.init({modal:true,enableKeys:false});
Shadowbox.open(options);
}
</script>
<cfelse>
<cflocation url="site_manager.cfm" addtoken="no">
</cfif>
</head>
<body>
LOGIN.CFM (launched in the iframe modal window via the js in the page
above)------------------------------
<cfsetting showdebugoutput="no">
<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#contentdiv').html(' ');
$('#login-button').click(function(){
var formval = {email_address:$('#email-address').val(),
password:$('#password').val()};
$.ajax({
type: "POST",
url: "login_processor.cfm",
dataType: "json",
data: formval,
success: function(response){
if (response.login == "Login
Successful")
{ top.location.href =
"site_manager.cfm" }
else
{
$('#contentdiv').empty().fadeIn(1000).append(response.login); }
}
});
});
});
</script>
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif;
font-size:12px; color:white; }
#wrapper-div { padding:40px; text-align:left; color:#fff; }
#databox { border: 1px solid Gray; margin:30px auto 0px auto;
padding: 10px; width:
200px; }
#contentdiv { color:white; margin-top: 10px; }
#shadowbox_nav_close { display:none; }
</style>
<div id="wrapper-div">
Email Address
<input id="email-address" type="text" name="email_address" size="48" /><br>
Password
<input id="password" type="password" name="password" size="48" /><br>
<input id="login-button" type="submit" value="Login" />
<p style="margin-top:20px;" id="contentdiv"> </p>
</div>
LOGIN_PROCESSOR.CFM
--------------------------------------------------------------------------------------
<cfsetting showdebugoutput="no">
<cfset mdata = createObject("component","manager_data")>
<cfset thedata = mdata.getmanagerData(form.email_address, form.password)>
<cfset ojson = createObject("component","cfjson")>
<cfset results = ojson.encode(thedata)>
<cfoutput>#results#</cfoutput>
MANAGER_DATA.CFC
------------------------------------------------------------------------------------------
<cfcomponent displayname="manager_data" hint="Contains manager database query"
output="false">
<cffunction name = "getmanagerData">
<cfargument name = "email_address" type="string"
required="yes">
<cfargument name = "password" type="string"
required="yes">
<cfquery name="get_manager" datasource="login">
select manager_id, email_address, password,
my_story
from site_managers
where email_address =
'#arguments.email_address#'
and password = '#arguments.password#'
</cfquery>
<cfset managerStruct = structNew()>
<cfif get_manager.recordcount gt 0>
<cfset session.manager_id = get_manager.manager_id>
<cfset managerStruct.manager_id =
get_manager.manager_id>
<cfset managerStruct.login = "Login Successful">
<cfset managerStruct.link = "<a href =
'site_manager.cfm'
onclick='parent.Shadowbox.close();'>Continue</a>">
<cfelse>
<cfset managerStruct.login = "Login Unsuccessful">
<cfset managerStruct.link = "">
</cfif>
<cfreturn managerStruct>
</cffunction>
</cfcomponent>
And, finally, I use cfjson.cfc, too.
Thanks for taking the time to review my code!
Rick
