I am trying to make a search box but the damn website keeps re-loading when a person enters some info! I have a tree structure with a crap load of parents and children. You can see it here: http://methylome.salk.edu/cgi-bin/tree_ajax-dev3.cgi. The search box is on top type something and press enter and then look at what happens. I wrote the program in cgi/perl. Also I want to be able to click on something and have image popup on right side.. how do i do that? Code is below.. its a lot but first subrouti and search box is the ajax related stuff.
#! /usr/bin/perl
use strict;
use CGI::Pretty ":standard";
use CGI;
use CGI::Carp qw(fatalsToBrowser);
use CGI::Ajax;
use Storable;
use Data::Dumper;
## initialize the html
print "Content-type:text/html\n\n";
print start_html(-title => 'Arabidopsis Gene Family',
-head => style({type =>'text/css'}, join('',<DATA>), ),);
## header information and javascript declarations and code
&starting_html();
## initialize search box
&searchbox();
## print the help and order information
&ABRC_Checkboxes();
## print the actual tree dynamically using the previous made hashes in gene_summar_text2.txt
&tree_output();
my $input = ();
sub starting_html{
print <<ENDHTML;
<html>
<head>
<script src="/zapatec/utils/zapatec.js" type="text/javascript"></script>
<script src="/zapatec/zptree/src/tree.js" type="text/javascript"></script>
</head>
## have a "loading" indication
<body onLoad="init()"><div id="loading" style="position:absolute; width:100%; text-align:center; top:300px;">
<img src="/loading.gif" border=0></div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4= document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>
<script language="Javascript">
## some ajax functions for the search box
function xmlhttpPost(strURL) {
var xmlHttpReq = false;
var self = this;
// Mozilla/Safari
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader ('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepage(self.xmlHttpReq.responseText );
}
}
self.xmlHttpReq.send(getquerystring());
}
function getquerystring() {
var form = document.forms['f1'];
var word = form.word.value;
qstr = 'w=' + escape(word); // NOTE: no '?' before querystring
return qstr;
}
function updatepage(str){
document.getElementById("result").innerHTML = str;
}
</script>
ENDHTML
}
sub ABRC_Checkboxes{
## print to order and help boxes
print <<P2;
<table class=\"summary\"><tr><thead><th><strong>To Order:</strong></th></thead></tr>
<form action=" http://www.arabidopsis.org/servlets/Order" method="post" target="_blank">
<input type="hidden" name="state" value="updateOrder">
<tr><th>
1. <a href="http://www.arabidopsis.org/servlets/Community?action=login" target="_blank" > Login </a>
to ABRC and Create a Stock Order.
<BR>
2. Select Lines Below and Submit.
<BR>
<input type="submit" value="Order from ABRC">
<BR>
</th></tr></table>
<table class=\"summary\"><tr><thead><th><strong>Help:</strong></th></thead></tr></tr>
<tr><th><font color=\"darkslategray\">#</font>= total number of genes in family<br>
<font color=\"lightseagreen\">#</font>= total number of salk lines in family<br>
<strong><font color=\"green\">#</font></strong>= total number of salk lines confirmed/sent</th></tr>
</table><br><br><br><br><br><br>
P2
}
sub tree_output{
## initialize all family and salk hashes from store_data2.pl script
my $array_of_hashes_ref = do "gene_family_tair2.txt";
my %family_hash = %{$array_of_hashes_ref->[0]};
my %family_hashh = %{$array_of_hashes_ref->[1]};
my %family_hashhh = %{$array_of_hashes_ref->[2]};
my %salks = %{$array_of_hashes_ref->[3]};
my %salk_count = %{$array_of_hashes_ref->[4]};
my %salk_sent_count = %{$array_of_hashes_ref->[5]};
my %salk_count_sub = %{$array_of_hashes_ref->[6]};
my %salk_sent_count_sub = %{$array_of_hashes_ref->[7]};
## start to print out the tree from the hashes
print "<ul id=\"designtree\">";
while (my ($key, $value) = each %family_hash) {
my $superfam_num = $#{$family_hashh{$key}} + 1;
foreach my $salk_id (@{$salks{$item_gene}}){
my ($salk_id, $sent) = split ":", $salk_id;
if ($sent=~/SentToABRC/){
$salk_id = $salk_id."c";
print "<input type=\"checkbox\" id=\"stock_number\", name=\"stock_number\", value=\"$salk_id\", label=\"\">";
print "<font color=\"green\"><strong>$salk_id</font></strong>" if @{salks{$item_gene}};
}
else {
print "<input type=\'checkbox\' id=\"stock_number\", name=\"stock_number\", value=\"$salk_id\", label=\"\">";
print "<font color=\"lightseagreen\">$salk_id</font>" if @{salks{$item_gene}};
}
}
print " </li>";
}
print "</ul></li>";
}
}
print "</ul></li>";
}
print "</ul>";
## closing html output
&end_html();
}
sub source{
print "<img src=\"/source.gif\"/>";
}
sub end_html{
print <<ENDHTML;
</form>
<!-- The Javascript code to initiate the tree-->
<script type="text/javascript">
new Zapatec.Tree({
tree: "designtree",
dynamic: true,
theme : "default",
initLevel: 0,
defaultIcons : "customIcon"});
</script>
<noscript>
<br/>
This page uses a <a href=" http://www.zapatec.com/website/main/products/prod2/"> Javascript Tree </a>, but your browser does not support Javascript.
<br/>
Either enable Javascript in your Browser or upgrade to a newer version.
</noscript>
<a href="http://www.zapatec.com/website/main/products/prod3/ ">Zapatec Javascript Tree</a>
</body></html>
ENDHTML
}
sub searchbox{
my $my_func = sub {
my $arg = shift;
$input = $arg;
return ( "Query: ". $arg );
};
my $pjx = new CGI::Ajax( 'tester' => $my_func );
$pjx->JSDEBUG(1);
$pjx->DEBUG(1);
my $cgi = new CGI();
#print $cgi->header();