Knoggets: February 2013

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

Knoggets

Saturday, February 16, 2013

Login Tutorial Using Ajax and JQuery