Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Search and Image Display

    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%;
    }

  • #2
    New Coder
    Join Date
    Oct 2006
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Come on.. can't anyone help me?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •