|
Description:
In the example below, we have a table containing Student names and Marks. Every row has an Edit button, by which user can edit the information for that row. We have used Microsoft Access as the Database to keep things very simple. In order to run the below example code you will have to create a table by the name “Student” in MS Access”. It should have the following columns.
Column Name Data type
Sl_No(Primary Key) Number
Name Text
Marks Number
Also you need to create a DSN by the name “mydsn” pointing to the Access DB.
The basic logic here used in the example is that we have two separate rows for View and Edit (for every Student). Initially we hide the Edit row (by using style="display:none") and display the View Row(by using style="display:block"). When the user clicks on the “Edit” button, the View row becomes hidden and the Edit row is displayed. We have used JavaScript to toggle between the rows. Below is the code snippet used in files (AjaxExample.pl and student.js).
Source: Text Source
AjaxExample.pl
============================================================
#!perl
use DBI qw(:sql_types);
use CGI;
use CGI qw/:standard/;
use CGI::Ajax;
my $cgi = new CGI();
#--------------------------------------------------------------------
# Mapping the Perl subroutine to the triggering function
#--------------------------------------------------------------------
my $ajax = new CGI::Ajax( 'saveStudInfo_JScript' => \&saveStudInfo_PerlScript );
$cgi->header(-charset=>'US-ASCII');
print $ajax->build_html($cgi,\&generateHTML);
#--------------------------------------------------------------------
# Subroutine which generates the HTML
#--------------------------------------------------------------------
sub generateHTML {
# Hash which contains existing data
%Students = get_Student_Info();
$cnt = 1;
# Write the html code in the form of a string
$returnHTML .= "\n<HTML>";
$returnHTML .= "\n<HEAD>";
$returnHTML .= "\n<TITLE>Student Information</TITLE>";
$returnHTML .= "<SCRIPT language=\"javascript\" src=\"/javascript/student.js\" type=\"text/javascript\"></SCRIPT>";
$returnHTML .= "\n</HEAD>";
$returnHTML .= "\n<BODY bgColor=\"#ffffff\">";
$returnHTML .= "<FORM method=\"POST\" enctype=\"multipart/form-data\" name=\"StudentForm\">";
$returnHTML .= "\n<BR>";
$returnHTML .= "\n<BR>";
$returnHTML .= "\n<TABLE cellspacing=\"0\" cellpadding=\"0\" align=\"center\">";
$returnHTML .= "\n<TR><TD>";
$returnHTML .= "\n<TABLE width=\"100%\" align=\"center\" border=\"1\" cellpadding=\"3\" cellspacing=\"1\" id= \"StudentInfoTable\">";
$returnHTML .= "\n<TR>";
$returnHTML .= "\n<TD align=\"center\" >SL No</TD>";
$returnHTML .= "\n<TD align=\"center\" nowrap>Name </TD>";
$returnHTML .= "\n<TD align=\"center\" nowrap>Marks </TD>";
$returnHTML .= "\n<TD align=\"center\" > </TD>";
$returnHTML .= "\n</TR >";
foreach $key (sort { $a <=> $b }(keys %Students)) {
#View row
$returnHTML .= "\n<INPUT type=\"hidden\" name=\"SerialNo\" id=\"SerialNo_$key\" value=\"$key\">";
$returnHTML .= "\n<TR style=\"display:block\">";
$returnHTML .="\n<TD align=\"center\" >$key</TD>";
$returnHTML .="\n<TD align=\"center\" nowrap><Div id=\"Div_Name_$key\">". (($Students{$key}->{Name}) ? $Students{$key}->{Name} : " ")."</DIV></TD>";
$returnHTML .="\n<TD align=\"center\" nowrap><Div id=\"Div_Marks_$key\">". (($Students{$key}->{Name}) ? $Students{$key}->{Marks} : " ")."</DIV></TD>";
$returnHTML .= "\n<TD align=\"center\"><INPUT type=\"button\" name=\"EditButton\" value=\"Edit\" style=\"cursor: hand; width: 40px\" onClick=\"makeRowEditable($cnt,'StudentInfoTable')\"></TD>";
$returnHTML .= "\n</TR >";
#Edit row
$returnHTML .= "\n<TR style=\"display:none\">";
$returnHTML .="\n<TD align=\"center\" nowrap>$key</TD>";
$returnHTML .="\n<TD align=\"center\" nowrap><INPUT type=\"text\" size=\"30\" id=\"Student_Name_$key\" value=\"$Students{$key}->{Name}\" style=\"text-align: center\"></TD>";
$returnHTML .="\n<TD align=\"center\" nowrap><INPUT type=\"text\" size=\"10\" id=\"Student_Marks_$key\" value=\"$Students{$key}->{Marks}\" style=\"text-align: center\"></TD>";
$returnHTML .= "\n<TD align=\"center\"><INPUT type=\"button\" name=\"SaveButton\" value=\"Save\" style=\"cursor: hand; width: 40px\" onClick=\"saveStudInfo_JScript(['Student_Name_$key','Student_Marks_$key','SerialNo_$key','NO_CACHE'],['Div_Name_$key','Div_Marks_$key'],'POST');makeRowViewable($cnt,'StudentInfoTable')\"></TD>";
$returnHTML .= "\n</TR >";
$cnt += 2;
}
$returnHTML .= "\n</TABLE>";
$returnHTML .= "\n</TD></TR>";
$returnHTML .= "\n</Table>";
}
#--------------------------------------------------------------------
# Perl Subroutine which is called aschronously
#--------------------------------------------------------------------
sub saveStudInfo_PerlScript {
# Accept Input
my $Name = shift;
my $Marks = shift;
my $SerialNo = shift;
# Call subroutine which does database update
update_Student_Info($SerialNo,$Name,$Marks);
# Return Output
return (@Return, ($Name ne "") ? $Name : " ",($Marks ne "") ? $Marks : " ");
}
#--------------------------------------------------------------------
# Subroutine which fetches the data
#--------------------------------------------------------------------
sub get_Student_Info {
my %Details;
my ($sql, $sth, $row);
# DSN with the name "mydsn" points to the Db
$DB = "mydsn";
# User name and password if any need to be specified. Currently no user name and pwd set.";
$DB_USER = "";
$DB_PASS= "";
$dbh = DBI->connect("dbi:ODBC:$DB", $DB_USER, $DB_PASS);
$sql = "SELECT * FROM Student";
$sth = $dbh->prepare($sql);
$sth->execute;
$cnt = 1;
while ($row = $sth->fetchrow_hashref) {
$Details{$cnt++} = $row;
}
$sth->finish();
return %Details;
}
#--------------------------------------------------------------------
# Subroutine which updates the Student Table in DB
#--------------------------------------------------------------------
sub update_Student_Info {
my $SerialNo = shift;
my $Name = shift;
my $Marks = shift;
my ($sql, $sth,$row);
# DSN with the name "mydsn" points to the Db
$DB = "mydsn";
# User name and password if any need to be specified. Currently no user name and pwd set.
$DB_USER = "";
$DB_PASS= "";
$dbh = DBI->connect("dbi:ODBC:$DB", $DB_USER, $DB_PASS);
$sql = "Update Student set Name = '$Name',Marks = $Marks where Sl_No = $SerialNo ";
$sth = $dbh->prepare($sql);
$sth->execute;
$sth->finish();
return $sql;
}
============================================================
student.js
============================================================
/*
* Toggles the rows from EDIT mode to VIEW mode.
* Invoked on clicking the 'SAVE' button in last column.
*/
function makeRowViewable(rowNumber,id) {
var table = document.all ? document.all[id] : document.getElementById ? document.getElementById(id) : null;
var editableRowNumber = rowNumber + 1 ;
var nonEditableRowNumber = editableRowNumber -1 ;
table.rows[editableRowNumber].style.display = "none" ;
table.rows[nonEditableRowNumber].style.display = "block" ;
}
/*
* Toggles the rows from view mode to edit mode.
* Invoked on clicking the 'EDIT' button in last column.
*/
function makeRowEditable(rowNumber,id) {
var table = document.all ? document.all[id] : document.getElementById ? document.getElementById(id) : null;
var editableRowNumber = rowNumber + 1 ;
var nonEditableRowNumber = editableRowNumber -1 ;
table.rows[editableRowNumber].style.display = "block" ;
table.rows[nonEditableRowNumber].style.display = "none" ;
}
============================================================
Discussion:
The term Ajax stands for ‘Asynchronous JavaScript And XML’. It is not a technology but a set of technologies being used together in a particular way. With effective use of existing technologies like HTML, DHTML, DOM, CSS, JavaScript one can make web pages more dynamic and interactive.
Using JavaScript, Ajax makes an asynchronous call to the server and fetches an XML document from a server-side component. Upon completion of the request, JavaScript may be used to update or modify the Document Object Model (DOM) of the HTML page. Only the necessary portions of the HTML DOM are re-rendered in the HTML page. In short Ajax techniques let you update parts of your web page without reloading the whole page.
The general benefit here is that an asynchronous operation executes in a separate thread. So when an operation is triggered asynchronously by the application, it can continue executing while the asynchronous method performs its task. Moreover only the data that needs to be updated or inserted can be sent instead of sending the entire form data.
Popular web applications like Orkut, Gmail, Amazon etc are using Ajax.
|
