in reply to Re^3: 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?

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>

[download]
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();

[download]
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>

[download]
But, I can't move anything around on the screen. It seems like I'm still missing something or doing something wrong.

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

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

[reply]
      I got it working. Using templates was a big help. I think the main problem was with getting all the jquery and jquery-ui files in the right places and getting all the references to them correct.

      These toolkits are really nice - being able to do all the fancy UI stuff from perl scripts is great! Check out the demos: http://jqueryui.com/demos/

[reply]

        "I got it working. Using templates was a big help. I think the main problem was with getting all the jquery and jquery-ui files in the right places and getting all the references to them correct"

        Glad you got that working. A combination of using Firebug as I previously mentioned along with checking your webserver logs helps a lot when debugging web based interfaces. Thanks, I'm aware of jQuery UI, and use it on an almost daily basis at work.

[reply]
Re^5: cgi scripts running javascript and passing control back and forth
by marto (Cardinal) on Jan 06, 2011 at 13:32 UTC
[reply]
      Yes, I've been using placeholders for a long time. I generate the table schema in my script based on the contents of the input file.
[reply]

In Section Seekers of Perl Wisdom