Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

login using ajax or jquery

Posted on 2010-09-10
4
Medium Priority
?
788 Views
Last Modified: 2012-06-27
I often in somewebsite where the login system is quite nicely build! clicking on a link opens a DIV Box in front of the user machine and user enters his/her credentials, after submit is clicked, it shows shows a loading icon below the DIV after the Password field and if it is wrong, it shows error there and if it is right, it just reloads the page and moves to the members Page!

for me i tried the DIV stuff and its working, but how that jquery of cf inbuild ajax stuff is done, is new, can anyone guide me how that can be achieved

Regards
0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 33655414
0
 
LVL 16

Assisted Solution

by:duncancumming
duncancumming earned 1000 total points
ID: 33655787
I started writing this up, then saw that the link leakim971 provided, the first of the Ray Camden articles, does exactly what you need.  The only thing you would need to do is a proper user validation in the processLogin function.  I provide my answer anyway for completeness.

Firstly, build yourself a normal .cfm file that would process a normal form submission.  e.g. something like:

<cfparam name="form.username" default="">
<cfparam name="form.password" default="">

<cfquery name="login" datasource="dsn">
SELECT *
FROM USERS
WHERE USERNAME = <cfqueryparam value="#form.username#" type="string">
AND PASSWORD = <cfqueryparam value="#Hash(form.password)#" type="string">
</cfquery>

<cfif NOT login.recordCount>
  Sorry, this username and/or password not found
<cfelse>
  <cflocation url="members.cfm">  <!--- actually probably not use this, let the calling page do a javascript redirect instead? --->
</cfif>

Plus whatever you want to do maybe with regards putting the user ID into the session or whatever.

Then in your original page, you want to make an AJAX submission to the login page using jQuery.  Two ways to do it, either using .ajax() or .post().  Something like this perhaps:

$(document).ready(function() {
  $('#yourForm').submit(function() {
     $.post("login.cfm", {username: $('#usernameFormField').val(), password: $('#passwordFormField').val()});
  });
});


The second Ray Camden article shows another good way of doing this.  The only thing I think I'm missing here is what you do with the results of the post, but both those links show ways of doing that.
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 33710792
I was trying to allocate 50/50 points to both but it closed the question! moderators please make it open again to give 250 points to both

regards
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33752560
Thanks for the points!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

610 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question