<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">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' =&gt; \&amp;saveStudInfo_PerlScript );

$cgi-&gt;header(-charset=&gt;'US-ASCII');
print $ajax-&gt;build_html($cgi,\&amp;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&lt;HTML&gt;";
        $returnHTML .=  "\n&lt;HEAD&gt;";
        $returnHTML .=  "\n&lt;TITLE&gt;Student Information&lt;/TITLE&gt;";
        $returnHTML .=  "&lt;SCRIPT language=\"javascript\" src=\"/javascript/student.js\" type=\"text/javascript\"&gt;&lt;/SCRIPT&gt;";
        $returnHTML .=  "\n&lt;/HEAD&gt;";
                
        $returnHTML .=  "\n&lt;BODY bgColor=\"#ffffff\"&gt;";
        $returnHTML .=  "&lt;FORM  method=\"POST\" enctype=\"multipart/form-data\" name=\"StudentForm\"&gt;";
        $returnHTML .= "\n&lt;BR&gt;";
        $returnHTML .= "\n&lt;BR&gt;";
        $returnHTML .= "\n&lt;TABLE cellspacing=\"0\" cellpadding=\"0\" align=\"center\"&gt;";
       
        $returnHTML .= "\n&lt;TR&gt;&lt;TD&gt;";
        $returnHTML .= "\n&lt;TABLE width=\"100%\" align=\"center\" border=\"1\" cellpadding=\"3\" cellspacing=\"1\" id= \"StudentInfoTable\"&gt;";
        $returnHTML .= "\n&lt;TR&gt;";
        $returnHTML .= "\n&lt;TD align=\"center\" &gt;SL No&lt;/TD&gt;";
        $returnHTML .= "\n&lt;TD align=\"center\"  nowrap&gt;Name  &lt;/TD&gt;";
        $returnHTML .= "\n&lt;TD align=\"center\" nowrap&gt;Marks  &lt;/TD&gt;";
        $returnHTML .= "\n&lt;TD align=\"center\" &gt;&amp;nbsp;&lt;/TD&gt;";
        $returnHTML .= "\n&lt;/TR &gt;";
                
        foreach $key (sort { $a &lt;=&gt; $b }(keys %Students)) {
                #View row 
                $returnHTML .=  "\n&lt;INPUT type=\"hidden\" name=\"SerialNo\" id=\"SerialNo_$key\" value=\"$key\"&gt;";
                $returnHTML .= "\n&lt;TR style=\"display:block\"&gt;";
                $returnHTML .="\n&lt;TD align=\"center\" &gt;$key&lt;/TD&gt;";
                $returnHTML .="\n&lt;TD align=\"center\"  nowrap&gt;&lt;Div id=\"Div_Name_$key\"&gt;". (($Students{$key}-&gt;{Name}) ? $Students{$key}-&gt;{Name} : "&amp;nbsp;")."&lt;/DIV&gt;&lt;/TD&gt;";
                $returnHTML .="\n&lt;TD align=\"center\"  nowrap&gt;&lt;Div id=\"Div_Marks_$key\"&gt;". (($Students{$key}-&gt;{Name}) ? $Students{$key}-&gt;{Marks} : "&amp;nbsp;")."&lt;/DIV&gt;&lt;/TD&gt;";
                
                $returnHTML .= "\n&lt;TD  align=\"center\"&gt;&lt;INPUT type=\"button\" name=\"EditButton\" value=\"Edit\" style=\"cursor: hand; width: 40px\" onClick=\"makeRowEditable($cnt,'StudentInfoTable')\"&gt;&lt;/TD&gt;";
                $returnHTML .= "\n&lt;/TR &gt;";
                
                #Edit row 
                $returnHTML .= "\n&lt;TR style=\"display:none\"&gt;";
                $returnHTML .="\n&lt;TD align=\"center\"  nowrap&gt;$key&lt;/TD&gt;";
                $returnHTML .="\n&lt;TD align=\"center\"  nowrap&gt;&lt;INPUT type=\"text\" size=\"30\" id=\"Student_Name_$key\" value=\"$Students{$key}-&gt;{Name}\"  style=\"text-align: center\"&gt;&lt;/TD&gt;";
                $returnHTML .="\n&lt;TD align=\"center\"  nowrap&gt;&lt;INPUT type=\"text\" size=\"10\" id=\"Student_Marks_$key\" value=\"$Students{$key}-&gt;{Marks}\"  style=\"text-align: center\"&gt;&lt;/TD&gt;";
                $returnHTML .= "\n&lt;TD  align=\"center\"&gt;&lt;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')\"&gt;&lt;/TD&gt;";
                $returnHTML .= "\n&lt;/TR &gt;";
                $cnt += 2;
        
        }
        $returnHTML .= "\n&lt;/TABLE&gt;";
        $returnHTML .= "\n&lt;/TD&gt;&lt;/TR&gt;";
        $returnHTML .= "\n&lt;/Table&gt;";
                
}



#--------------------------------------------------------------------
# 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 : "&amp;nbsp;",($Marks ne "") ? $Marks : "&amp;nbsp;");
}

#--------------------------------------------------------------------
# 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-&gt;connect("dbi:ODBC:$DB", $DB_USER, $DB_PASS);
        
        $sql = "SELECT * FROM Student";
        $sth = $dbh-&gt;prepare($sql);
        $sth-&gt;execute;
        $cnt = 1;
        while ($row = $sth-&gt;fetchrow_hashref) {
                $Details{$cnt++} = $row;
        }
        
        $sth-&gt;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-&gt;connect("dbi:ODBC:$DB", $DB_USER, $DB_PASS);

        $sql  = "Update Student set Name = '$Name',Marks = $Marks where Sl_No = $SerialNo ";
        $sth = $dbh-&gt;prepare($sql);
        $sth-&gt;execute;
        $sth-&gt;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" ;
}

============================================================


</pre></body></html>