Question

  #!/usr/bin/perl 
  # perl cgi script products2.cgi 


use DBI;
print <<END_HTML;
Content-type: text/html
END_HTML
my $host = "xxx.xxx.xxx";
my $port = "xxxx";
my $database = "proj4";
my $username = "xxxxxx";
my $password = "xxxxx";
my $database_source = "dbi:mysql:$database:$host:$port";


my $dbh = DBI->connect($database_source, $username, $password) 
or die 'Cannot connect to db';

my $sth = $dbh->prepare("SELECT distinct category FROM products");
$sth->execute();

#getting the categories and displaying them
while(my @row=$sth->fetchrow_array()) {
my $data =$row[0];
 my @values = split(' ',$data);
my $pic = "/~xxxx/proj4/images/".$values[0].".jpg";
print <<END_HTML;
<div class="view view-first">
END_HTML

print"<img src=\"$pic\" alt=\"$row[0]\"/>"; 
print "<h2 class=\"choc\"><span>$row[0]</span></h2>";
print "<div class=\"mask\">"; 
print "<h2 class=\"eff\">\"$row[0]\"</h2>";
print <<END_HTML; 
 <p>One of Our best sellers</p>  
     <a href="#" class="info $values[0]">Discover</a>  
 </div>   
 </div>  
END_HTML
 }


 $sth->finish();
 $dbh->disconnect();

I am trying to replace the contents of

  <div id="content"></div> 

in my proj.html to the output of the above perl script when clicked on “products” link in the navigation bar.

//navigation bar for product

 <li>
<a href="/perl/xxxxx/products2.cgi" id="productit">
Products
</a>
 </li>

I know I have to use javascript and ajax, but not sure how to do it.

 $('#productit').bind('click', function() {

 var handle = document.getElementById('content');

  var req = new HttpRequest('/perl/xxxxx/products2.cgi', callback); 
  //i know this ajax call only expects string to be returned from server
 req.send();  

 handle.innerHTML= //not sure how to populate this                  
 });

Could someone please guide me as to how to send html ready to display from the perl script

Answer 1

All you have to do is print the HTML and it gets sent to the client/browser.

However…

I notice one minor detail in your Perl code which would cause the web server to throw a 500 Internal Server Error: You forgot to print a blank line after your HTTP headers. The code posted would send the output

Content-type: text/html
<div class="view view-first">
...

which is not a valid HTTP response because <div is not a recognized HTTP header. It needs to send

Content-type: text/html

<div class="view view-first">
...

instead, with a blank line to indicate the end of headers before the content starts.

This is one of the reasons why it’s generally a good idea to use a web framework (such as Dancer, Mojolicious, or Catalyst) or even the arcane CGI.pm instead of handling these things manually: there are so many minor details and strange edge cases that you need to get just right or else it will fail to work for no apparent reason. If this is a learning exercise, rolling your own is fine and it’s good to learn where all those pitfalls are, but you’re better off using a widely-used and well-tested module to deal with them in code whose purpose is to do something useful or important.