Home‎ > ‎Programming‎ > ‎

Jquery Setup CGI Perl

Jquery UI provides a rich set of UI widgets. There are still a lot of features might come up in the future,but for as of now to get started you need to follow the below mentioned steps.


  1. Download the jquery bundle under http://jqueryui.com/download after selecting a theme you want in the same page. Unzip the bundle file and copy over the js and css folder to you cgi executable directory.
  2. Download the jquery http://css-tricks.com/simple-jquery-dropdowns/ Copy the 2 files menu.css (style.css) and jquery.dropdownPlain.js to the css and js folders respectively.
  3. Create the Test.pl and Test.html files as shown.

Code is attached: Download



use strict;
use warnings;
use Template;
use CGI;
my $co = CGI->new;
my $template = Template->new(INCLUDE_PATH => ["../"]);
my $output_html;
my $template_vars = {name => "arjun"};
$template->process( 'template/Test.html', $template_vars, \$output_html ) || die "Template process failed: ", $template->error(), "\n";
print $co->header;
print "$output_html";


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <title>Test Page</title>
    <link type="text/css" href="../css/smoothness/jquery-ui-1.8.5.custom.css" rel="Stylesheet" />
    <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery-ui-1.8.5.custom.min.js"></script>
    <link type="text/css" href="../css/menu.css" rel="Stylesheet" />
    <script type="text/javascript" src="../js/jquery.dropdownPlain.js"></script>
    <script type="text/javascript">
    $(function() {

        Name: [% name %]
        Date: <input type="text" name="date" id="date" />

       <div id="page-wrap">
        <ul class="dropdown">
            <li><a href="#">For Facilities</a>
                <ul class="sub_menu">
                     <li><a href="#">Artificial Turf</a></li>
                        <a href="#">Batting Cages</a>
                            <li><a href="#">Indoor</a></li>
                            <li><a href="#">Outdoor</a></li>
                     <li><a href="#">Benches &amp; Bleachers</a></li>
            <li><a href="#">Field Maintenance</a>
                <ul class="sub_menu">
                    <li><a href="#">All-in-One Team Cart</a></li>
                    <li><a href="#">Air &amp; Electrical Reels</a></li>
                     <li><a href="#">Field Drags</a></li>
                        <a href="#">Field Marking Equipment</a>
                            <li><a href="#">Batter's Box Templates</a></li>
                            <li><a href="#">Dryline Markers</a></li>
                            <li><a href="#">Field Paint</a></li>
                            <li><a href="#">Field Sprayers</a></li>
                            <li><a href="#">Stencils</a></li>