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"; $returnHTML .= "\n"; $returnHTML .= "\nStudent Information"; $returnHTML .= ""; $returnHTML .= "\n"; $returnHTML .= "\n"; $returnHTML .= "
"; $returnHTML .= "\n
"; $returnHTML .= "\n
"; $returnHTML .= "\n"; $returnHTML .= "\n"; $returnHTML .= "\n
"; $returnHTML .= "\n"; $returnHTML .= "\n"; $returnHTML .= "\n"; $returnHTML .= "\n"; $returnHTML .= "\n"; $returnHTML .= "\n"; $returnHTML .= "\n"; foreach $key (sort { $a <=> $b }(keys %Students)) { #View row $returnHTML .= "\n"; $returnHTML .= "\n"; $returnHTML .="\n"; $returnHTML .="\n"; $returnHTML .="\n"; $returnHTML .= "\n"; $returnHTML .= "\n"; #Edit row $returnHTML .= "\n"; $returnHTML .="\n"; $returnHTML .="\n"; $returnHTML .="\n"; $returnHTML .= "\n"; $returnHTML .= "\n"; $cnt += 2; } $returnHTML .= "\n
SL NoName Marks  
$key
". (($Students{$key}->{Name}) ? $Students{$key}->{Name} : " ")."
". (($Students{$key}->{Name}) ? $Students{$key}->{Marks} : " ")."
$key{Name}\" style=\"text-align: center\">{Marks}\" style=\"text-align: center\">
"; $returnHTML .= "\n
"; } #-------------------------------------------------------------------- # 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" ; } ============================================================