Saturday, February 16, 2013

Login Tutorial Using Ajax and JQuery

I will briefly take you through creating a login page using jquery. Instead of boring you with a how-to here is the code with comments for each part of the code.

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<!--
1) Include the jquery base css. It's mandatory to include this since it is being used
by jquery internally to render and manipulate the dom tree
-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<!--
2) Include the jquery javascript library files
-->
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<!--
3) Include custom css for the customized dialog box for the login form  and also for the progress bar which indicates the login progress.
-->
<style type="text/css">
.ui-dialog-titlebar-close {visibility: hidden;} //Hides the close button of dialog box
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
.progress-label {
float: left;
margin-left: 50%;
margin-top: 10px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<!--
4) Javascript functions for customized dialog box and provide action buttons for login and cancel.  See inline comments for more granularity
-->
<script>
//
// 5) Hides progress bar and enables login and password fields.
//
function hideProgressBar(){
$( "#user_name").prop('disabled', false);
$( "#password").prop('disabled', false);
$( "#progressbar" ).hide();
}
//
// 6) Show progress bar and disable login and password fields.
//
function showProgressBar(){
$( "#user_name").prop('disabled', true);
$( "#password").prop('disabled', true);
$( "#progressbar" ).show();
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" ); // Set % completion of task
},
complete: function() {
progressLabel.text( "Complete!" ); // Set task completed
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 ); // Value with in range of 1 to 100
if ( val < 99 ) {
setTimeout( progress, 100 ); // It's a timer which will start after 100 mili sec
}
}
setTimeout( progress, 3000 ); // Set a timer of 3 sec before progress bar starts.
}
 // This function does the most important task of adding action to login form.
// Adds login button and attaches showProgressBar function to display progress bar.
// Adds cancel button and attaches hideProgressBar function to hide progress.
// When page is getting loaded this function will be executed.
$(function() {
$( "#dialog" ).css('text-align','left' );
$( "#dialog" ).dialog({
autoOpen: false,
height: 400,
width: 500,
modal: true,
buttons: {
"Login": function() {
// E-Mail and password validation can be provided here
showProgressBar();
$.ajax({
type: "POST", //Ajax type Get/POST
url: "www.google.com", //URL to post the data.
data: { name: $( "#user_name"), password: $( "#password")}
}).done(function( msg ) {
// Receives information from server after successful post.
}).fail(function() {
alert("error"); //Catch any error while posting.
});
},
Cancel: function() {
hideProgressBar();
}
}
});
});
//This piece of code will hide the <div id="progressbar"><div class="progress-label">Loading...</div></div> tag from display and will show login form.
$(function(){
$( "#progressbar" ).hide();
$( "#dialog" ).dialog("open");
});
</script>
</head>
<body>
<!--
Login form
-->
<div id="dialog" title="Please login" >
<fieldset>
<label for="email">Email</label>
<input type="text" name="userData.user_name" id="user_name" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="userData.password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</div>
</body>
</html>
in.linkedin.com/in/prabhat1981/


For more visit Collegelabs

2 comments:

  1. bandar judi bola This is a very good post. Just wonderful. Truly, I am amazed at what informative things you've told us today. Thanks a million for that. judi bola sbobet

    ReplyDelete