Anonymous Monk has asked for the wisdom of the Perl Monks concerning the following question:

Hi all, I have a cgi script which prints data into a table. However, i have been asked to have a hover effect which would highlight the entire row. This works fine with Firefox but naturally falls down with IE without javascript. Here the problem lays: Testing with html and js only i have a working html page. The javascript code needs to go after the table to work. But how can i call the script in cgi after the table is printed? 
use CGI qw(:standard);

print header();
print start_html( -title=>'KEGG Connection',
                  -style=>{-src=>'style.css'},
                  -script=>{-language=>'JavaScript', -src=>'row.js'} #
+##this does not work
                  );

perl code to get data
print <<EOF;

<table>
<tr><th>KEGG Entry</th><th>KEGG Glycan Composition</th></tr>

EOF
more perl
print <<EOF;

<tr><td><a href="http://">$1</a></td><td>$2</td></tr>

EOF

[download]
In theory javascript should go here?? 
print '<script language="javascript">';
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.className += 'hilite';
}
rows[i].onmouseout = function() {
this.className = this.className.replace('hilite', '');
}
}
print "</script>";

[download]
Any suggestions please? I havent included the css file, simply because this works in html file? hilite corresponds to the css entry. Thanks

Replies are listed 'Best First'.
Re: CGI combining javascript
by jeffa (Bishop) on Nov 17, 2005 at 15:19 UTC

    Why not use CSS instead? It is as simple as: 

    <style>
tr:hover { background-color: yellow }
</style>

    [download]

    Update: Ahhh ... curse you IE!! ;) Perhaps this resource will be of use to you.

    jeffa

    L-LL-L--L-LL-L--L-LL-L--
-R--R-RR-R--R-RR-R--R-RR
B--B--B--B--B--B--B--B--
H---H---H---H---H---H---
(the triplet paradiddle with high-hat)
[reply]
[d/l]
      i am using a css file which is imported at the top of the cgi script. The problem with tr:hover is that it only highlights columns not entire rows....in my case that is css below 
      table {
        font: normal 76%/150% Geneva, Arial, Helvetica, sans-serif;
        border-collapse: separate;
        border-spacing: 0;
        margin: 0;
        color: #000;
        }
table a {
        color: #005ba7;
        text-decoration: none;
        border-bottom: 1px dotted;
        }
table a:visited {
        color: #444;
        font-weight: normal;
        text-decoration: line-through;
        }
table a:hover {
        border-bottom: 3px solid;
        background-color: navy;
        }
th {
        font-weight: bold;
        line-height: normal;
        padding: 0.25em 0.5em;
        text-align: left;
        }
table tr:hover  {
background-color: #DFE7F2;
color: #000000;
}
tr:hilite  {
background-color: #DFE7F2;
color: #000000;
}

      [download]
[reply]
[d/l]
Re: CGI combining javascript
by ikegami (Patriarch) on Nov 17, 2005 at 15:16 UTC
    I'd make a function of it, and execute it when the document finishes loading: 
    function add_handlers {
   var rows = document.getElementsByTagName('tr');
   for (var i = 0; i < rows.length; i++) {
      rows[i].onmouseover = function() {
         this.className += 'hilite';
      }

      rows[i].onmouseout = function() {
         this.className = this.className.replace('hilite', '');
      }
   }
}

    [download]
    <body onload="add_handlers();">

    [download]
    If onload works on tables too, you could execute the function when the table finishes loading.
[reply]
[d/l]
[select]
      think i am making a bit of a mess of it. This is what i have: 
      use CGI qw(:standard);

print header();

#$JSCRIPT=<<END;
print <<EOF;
<script>
function add_handlers {
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
rows[i].onmouseover = function() {
this.className += 'hilite';
}
rows[i].onmouseout = function() {
this.className = this.className.replace('hilite', '');
}
}
}
</script>

EOF

print start_html( -title=>'KEGG Connection',
                  -style=>{-src=>'style.css'},
                 );
print "<body onload=\"add_handlers();\">";

do the perl stuff and print table.

      [download]
      This implementation does not work, but i am going to guess its wrong the way i have coded. Thanks
[reply]
[d/l]
Re: CGI combining javascript
by ickyb0d (Monk) on Nov 17, 2005 at 15:28 UTC
    what about calling the javascript function from an onload event? window.onload or an onload event set in the <body> tag.
[reply]
Re: CGI combining javascript
by radiantmatrix (Parson) on Nov 17, 2005 at 18:03 UTC

    It seems like you are expecting this piece: 

    -script=>{-language=>'JavaScript', -src=>'row.js'}

    [download]
    To do something other than what it does.

    The parameter above in start_html generates html in the header that should look something like: 

       <script language='JavaScript' src='row.js' />

    [download]
    Which a browser will interpret by requesting the file 'row.js' from the server and inserting it in its internal representation of the document.

    This should work, as long as row.js is in the same directory as the CGI script being called. If you want to include a file containing JS markup and have it all returned as on chunk to the browser, have a look at using HTML::Template, or read the file yourself and print it between <script> tags.

    <-radiant.matrix->
    A collection of thoughts and links from the minds of geeks
    The Code that can be seen is not the true Code
    "In any sufficiently large group of people, most are idiots" - Kaa's Law
[reply]
[d/l]
[select]
Re: CGI combining javascript
by kulls (Hermit) on Nov 18, 2005 at 07:44 UTC
    hi,
    Can you call your js function at the end of the document?, sense after the '</form>'.hope this will solve your issue.
    -kulls
[reply]

Back to Seekers of Perl Wisdom