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

"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.

  • Comment on Re^3: cgi scripts running javascript and passing control back and forth

Replies are listed 'Best First'.
Re^4: cgi scripts running javascript and passing control back and forth
by yaconsult (Acolyte) on Jan 05, 2011 at 23:35 UTC
    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.
[reply]
[d/l]
[select]

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