How to ajaxify my resultset I am fetching during page submit

ovizit

Hi ,

I am including a simple script here which fetches a resultset into datatable when a user selects a value from the dropdown and presses submit. The script is written in Perl. I want the datatable part to be made by ajax so that only that part of the page gets refreshed when a user submits.

Can anybody suggest me how can I change this script or the javascript in order to achieve this requirement.
I had a look in the examples given in this site under ajax and server-side but not getting how to do it.

####### my Perl script below ###########
use strict;
use CGI;
use CGI::Carp qw(fatalsToBrowser);
use DBI;

my $qry = new CGI;

my $dbh = DBI->connect('DBI:Oracle:payroll')

my $action = $qry->param('_ACTION_');

&main(@ARGV);

$dbh->disconnect;

exit(0);

#----------------------------------------------------------------------
sub main {

    my ($err,$msg);
    $qry->header();
    my $body = &display_page($err,$msg);


$qry->start_html(-bgcolor=>'#FFFFFF', -title=>'test ');

print $body;

$qry->end_html;


}

sub display_page {

    my $error = shift;
    my $msg   = shift;

    #my $error = '';
    my $html;

    my $url = "http://localhost-lnx/mgmt/ajaxified_datatbl.cgi";


    $html = <<END;
<link rel='stylesheet' type='text/css' href='/mgmt/css/applmgmt.css'/>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/mgmt/js/ajax_dt.js"></script>
<script src="/mgmt/js/min-1-11-1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" ></script>
END

    $html .= qq{<br><form name='myForm' action='$url' method=post>\n};

    $html .= qq(<input type="hidden" name="APPLID" value=100 /> \n);
    $html .= $qry->html($msg);
    $html .= "<br><br>";

    my $category_hash = { 0 => '1007', 1 => '1001', 2 => '1002', 3 => '1003', 4 => '1004', 5 => '1005', 6 => '1006' };

    my $prio_popup = $qry->popup_menu(
        -style   => 'font-family:serif;font-size:12px;',
        -name    => "appl_catgry",
        -values  => [ 0 .. 6 ],
        -labels  => $category_hash,
    -default => ($error =~ /\w+/) ? $qry->param("appl_catgry") : 0,

        -onChange => "this.form.ALERT_$_.checked = ( this.value == 0 ? false  : true )",
        -override => 1,
    );

    print $qry->html("Select an id from the the below dropdown and submit\n");
    $html .= "$prio_popup";
    #print '<pre>', "qry->param ", $qry->param('appl_catgry'), '</pre>';

    $html .= <<END;
@{[ $qry->submit(-name=>'STORE', -value=>'Submit') ]}

END

    my $mgr_id = $category_hash->{ $qry->param('appl_catgry') };

    my $sth = $dbh->prepare(
        qq{
            select *  from managers where id= :mgr_id and rownum < 10
      }
    );
    $sth->bind_param(":mgr_id", uc($mgr_id));
    eval { $sth->execute; };
    if ($@) {
        my $err = $@;
    }
    my $applids = [];

    $html .=   qq{
         <table id="view_mgrs" class="display cell-border compact" cellspacing="0" align="center" width="100%">
         <thead>
    <tr>
            <td>ID</td>
            <td>NAME</td>
            <td>ADDRESS</td>
            <td>DOJ</td>
            <td>PROJECT</td>
        </tr>
        </thead>
        <tbody>
    };

    while (my $row = $sth->fetchrow_hashref()) {

    $html .= qq{
            <tr>
            <td>$row->{ID}</td>
            <td>$row->{NAME}</td>
            <td>$row->{ADDRESS}</td>
            <td>$row->{DOJ}</td>
            <td>$row->{PROJECT}</td>
        </tr>
            };
    }

    $html .= "</table>";
    $html .= "</form><br>";
 return $html;

}
     

#### my ajax_dt.js below #######

 $(document).ready(function() {
           $('#view_mgrs').DataTable( {
      
               "ajax": "arrays.txt"
           } );
       } );

ovizit

I have formatted the post to enhance its readability. Can anybody please reply ?