http://www.perlmonks.org?node_id=880497


in reply to Re: cgi scripts running javascript and passing control back and forth
in thread How to allow a user to reorder rows from a database using a web form?

Template Tutorial will be digested tonight.

Currently, my script is outputting a big html table. After writing the header, the main loop looks like this:

foreach my $item (@$array_ref) { print Tr( { -align => 'LEFT', -valign => 'TOP', -width => '20%' }, [ td( [ $q->a( { href => ticket_link( $item->{id} ) }, "$item->{id}" ), "$item->{spocpri}", "$item->{priority}", "$item->{cfprojectname}", "$item->{subject}", name_from_email( $item->{requestors} ), date_only( $item->{created} ), date_only( $item->{requesteddue} ) ] ) ] ); }

Just to keep things simple, could we leave templating out of it for the moment?

How do I incorporate the sorttable code into this? Do I print the <style> and <script> sections from within my script after the header? I have not worked with javascript before at all and I don't understand how the perl and javascript work together. Does the javascript code get embedded in the perl script? I've seen some examples of this. Does the perl script load the javascript? Do the function definitions go into a separate file? How does the cgi script even know that JQuery-ui even exists?

Maybe I will understand more after reading the template documentation tonight that you pointed me to.

Thanks - I appreciate your help!

Replies are listed 'Best First'.
Re^3: cgi scripts running javascript and passing control back and forth
by Anonymous Monk on Jan 05, 2011 at 03:41 UTC
Re^3: cgi scripts running javascript and passing control back and forth
by marto (Cardinal) on Jan 05, 2011 at 09:00 UTC

    "Just to keep things simple, could we leave templating out of it for the moment?"

    To keep things even simpler for the time being, if you take the advice I've already given and create a HTML page which works you'll know exactly what your perl code will have to return to the browser/user. The CGI script doesn't know anything about jQuery or jQuery UI, you simple references them in the HTML you return, which is why it's essential you get this working as a HTML page before considering going further.

    Firebug is often helpful when debugging web applications or even HTML/CSS/JavaScript, consider familiarising yourself with it. The Anonymous Monk post also suggests reading Ovids famous tutorial on CGI, this is very good advice IMHO.

      OK, I have my code working with templates now.

      The first template looked like this:

      <!-- ticket.tmpl --> <html> <head> <title>Open Tickets</title> </head> <body> <h1>Open Tickets</h1> <table> <!-- TMPL_LOOP NAME=ROWS --> <tr> <td><!-- TMPL_VAR NAME=ID --></td> <td><!-- TMPL_VAR NAME=SUBJECT --></td> <td><!-- TMPL_VAR NAME=REQUESTORS --></td> </tr> <!-- /TMPL_LOOP --> </table> </body> </html>
      and then the main part of my CGI script looks like this:
      my @select_fields = qw( id subject requestors ); my $template = HTML::Template->new( filename => 'ticket-short.tmpl' ); print $q->header(); foreach my $org ( keys %orgs ) { my $sql = "select " . join( ", ", @select_fields ) . " from tickets where $orgs{$org}"; my $sth = $dbh->prepare($sql) or die( "Cannot prepare: " . DBI::er +rstr() ); $sth->execute() or die( "Cannot execute: " . DBI::errstr() ); # Prepare a data structure for HTML::Template my $rows; push @{$rows}, $_ while $_ = $sth->fetchrow_hashref(); if ( defined @{$rows} ) { $template->param( ROWS => $rows ); } } print $template->output();
      This worked as expected. Then, I tried modifying the template to use the jquery-ui stuff as follows:
      <!-- ticket-short.tmpl --> <html> <script type=”text/javascript” src=”js/jquery-1.4.4.min.js”></scri +pt> <script type=”text/javascript” src=”js/jquery-ui-1.8.7.custom.min. +js”></script> <script> $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); </script> <style> #sortable { list-style-type: none; margin: 0; padding: 0; width: 6 +0%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left +: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } </style> <head> <title>Open Tickets</title> </head> <body> <h1>Open Tickets</h1> <div class="tickets"> <ul id="sortable"> <!-- TMPL_LOOP NAME=ROWS --> <li class="ui-state-default"><span class="ui-icon ui-icon- +arrowthick-2-n-s"></span><!-- TMPL_VAR NAME=ID --> - <!-- TMPL_VAR NA +ME=SUBJECT --> - <!-- TMPL_VAR NAME=REQUESTORS --></li> <!-- /TMPL_LOOP --> </ul> </div> </body> </html>
      But, I can't move anything around on the screen. It seems like I'm still missing something or doing something wrong.

        Did you take my advice about Firebug? Are there any JavaScript errors?