Welcome, guest | Sign In | My Account | Store | Cart

Simple Example demonstrating Ajax Implementation using Perl (Perl recipe) by Rajkumar Jain
ActiveState Code (http://code.activestate.com/recipes/502299/)

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).

Perl, 176 lines
Download
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
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\" >&nbsp;</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} : "&nbsp;")."</DIV></TD>";
                $returnHTML .="\n<TD align=\"center\"  nowrap><Div id=\"Div_Marks_$key\">". (($Students{$key}->{Name}) ? $Students{$key}->{Marks} : "&nbsp;")."</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 : "&nbsp;",($Marks ne "") ? $Marks : "&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->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" ;
}

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

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.

1 comment

Christian Krauße 8 years, 2 months ago  # | flag

Unfortunatly this did not work any longer, and throws "CGI::param called in list context".

Is there a solution? Using $CGI::LIST_CONTEXT_WARN = 0; did not helped...

Created by Rajkumar Jain on Sun, 11 Mar 2007 (MIT)
◄ Perl recipes (17) ►
◄ Rajkumar Jain's recipes (3) ►

Required Modules

  • (none specified)

Other Information and Tasks