Search and Image Display

naqvia · 03-29-2007, 11:48 PM

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.

Code:

#! /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;

    print "<li>$key"; &source(); print "(<font color=\"darkslategray\">$superfam_num</font><font color=\"lightseagreen\">, $salk_count{$key},</font><strong><font color=\"green\">$salk_sent_count{$key}</strong></font> )<ul>";
   
    foreach my $item_sub (@{$family_hash{$key}}){
        if ($item_sub=~/(\D{2}\dD\d{5})/){
        #    &null_fam($item_sub);
        }
        else {
        my $subfam_num =  $#{$family_hashhh{$item_sub}} + 1;
       
       
        my $item_sub_m = ();
       
        #print "$item_sub:";
        print "<li>$item_sub"; &source(); print "(<font color=\"darkslategray\">$subfam_num, </font><font color=\"lightseagreen\">$salk_count_sub{$item_sub},</font><strong><font color=\"green\">$salk_sent_count_sub{$item_sub}</strong></font>)<ul>";
       
        foreach my $item_gene(@{$family_hashhh{$item_sub}}){
           
            if ($item_gene eq $input){
            print "<li><font color=\"red\">$item_gene</font><fontcolor=\"red\"><strong></strong></font> ";
            }
            else{
            print "<li><font color=\"darkslategray\">$item_gene</font> ";
            }
           
            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();

$pjx->cgi( $cgi );

my $html = "";       
  $html .= $pjx;

  $html .= <<EOT;
 
  <FORM name="form">
  <INPUT type="text" id="inarg"
    onkeyup="tester(['inarg'],['output_div']); return true;">
 
  <div id="output_div"></div>
  </FORM>
EOT

if ( not $cgi->param('fname') ) {
  print $html;
} else {
  print $pjx->handle_request();
}

}

## css information       
__DATA__
table.summary {
float: left;
margin:4px;
border-spacing: 1px;   
border-style: dotted;   
border-color: grey;
border-collapse: collapse;   
}
table.summary th    
border-width: 1px;
border-color: green;   
padding: 2px;
text-align: left;
font-size: 12px;
border-style: solid;
border-color: green;
background-color: rgb(250, 240, 230);
}
table.summary thead th {
border-width: 1px;
padding: 2px;
font-size: 15px;   
border-color: green;   
background-color: red;
}
table.summary td {    
border-width: 0px;   
padding: 0px;
border-style: dashed dashed dashed dashed;   
border-color: blue blue blue blue;   
background-color: white;   
}

div.scroll-tree {
    padding-top: .5em;
    padding-bottom: .5em;
    background-color:#B5B6B5;
}


/* Hrefs in a tree item */
div.tree-item td.a {
    text-decoration:none;
}


/* General setting of the tree */
.tree {
    font: 11px tahoma,verdana,sans-serif;
   
}

.tree-item table.tree-table {
    width:550px;
    line-height:60px;
    color:#000000
    font-family      :  Arial, Helvetica, sans-serif;
    font-size        : 11px;
    font-align: left
   
}

.tree-item-more {
    padding-left: 1px;
}

.tree-item span.label {
    cursor:
    pointer;
}

.tree-item table.tree-table td.label span.label {
    padding: 0 2px;
}

.tree-item .tgb {
    width: 99px;
    height: 49px;
    vertical-align: left;
    cursor: default;
}

.tree-item .icon {
    padding-right: 4px;
    cursor: pointer;
    width: 98px;
    height: 48px;
    text-align:
    left;
    vertical-align:
    left;
}

.tree-item-selected table.tree-table td.label span.label {
    background-color: Highlight;
    color: HighlightText;
}

div.tree-item, div.tree-item:hover {
    cursor:pointer;
    margin-bottom: 1px;
    padding:2px;
    text-align:left;
    font-weight:bold;
    color:#DDDDDD;
}

div.tree-item a{
    text-decoration:none;
}

div.tree-item:hover {
    background-color:#8DD1FB;
}

div.tree-item-expanded, div.tree-item-expanded:hover, div.tree-item-collapsed, div.tree-item-collapsed:hover {
    cursor:pointer;
    margin-bottom: 1px;
    padding-left: 1px;
    padding:2px;
    text-align:left;
    font-weight:bold;
    font-size:140%;
    color:#000000;
}

div.tree-item-expanded div.tree-item-collapsed{
    background-color:#6EA4C5;
}

/* "expanded" folder */
div.tree-item-expanded:hover {
    background-color:#89CCF5;
}


/* "closed" folder */
div.tree-item-collapsed:hover {
    background-color:#89CCF5;
}

/* custom icons for expanded and closed folder */

div.tree-item-expanded td.customIcon {
    background: url("/zapatec/zptree/themes/windows/menu_folder_open.gif")
    no-repeat 0 50%;
}
div.tree-item-collapsed td.customIcon {
    background: url("/zapatec/zptree/themes/windows/menu_folder_closed.gif")
    no-repeat 0 50%;
}

/* Makes an indent for each subtree */
.tree { padding-left: 10px; }

/* the area of the tree that is expanded */
.tree-lined {
    background-color:#7EBBE0;

}
.tree-lines-c {
  background: transparent url("/zapatec/zptree/themes/img/lines-c.gif") no-repeat 1px 50% !important;
}
.tree-lines-b {
  background: transparent url("/zapatec/zptree/themes/img/lines- b.gif") no-repeat 1px top !important;
}
.tree-lines-t {
  background: transparent url("/zapatec/zptree/themes/img/lines-t.gif") no-repeat 1px 50% !important;
}
.tree-lines-s {
  background: transparent url("/zapatec/zptree/themes/img/lines- s.gif") no-repeat 1px 50% !important;
}
.tree-lined { background: transparent url("/zapatec/zptree/themes/img/lines-v.gif") repeat-y 1px 0 !important; }
.tree-lines-dot { background: transparent url("/zapatec/zptree/themes/img/dot.gif") no-repeat 1px 50% !important; }
div.tree-item td.customIcon {
    background: url("/zapatec/zptreethemes/img/fs/document2.png") no-repeat 0 50%;
}
div.tree-item-expanded td.customIcon {
    background: url("/zapatec/zptree/themes/img/fs/folder- open.png") no-repeat 0 50%;
}
div.tree-item-collapsed td.customIcon {
    background: url("/zapatec/zptree/themes/img/fs/folder.png") no-repeat 0 50%;
}

naqvia · 04-09-2007, 07:12 PM

Come on.. can't anyone help me?