in reply to 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?

As I said before, you're not converting JavaScript to Perl. You say you can generate HTML, that's all you want to do here, simply generate the ordered list (as per the jQuery UI example you've found) using Perl to query a database.

jeffa wrote a nice tutorial HTML::Template Tutorial which you should read. Simply use a <TMPL_LOOP> to create list items (<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><TMPL_VAR NAME=ITEM_NO>) based the results of your database results. Consider your template file as a standard HTML file, with some additional tags which HTML::Template populates before returning the HTML with your values. The first step here, before you do any Perl code, is to get a stand alone HTML file running this example code which works, then convert that into a template file.

jeffa has provided working examples in that tutorial, all you'd need to do adapt the example, including your own database queries, include the jQuery.js and jQuery UI files (this is documented on the jQuery site).

Replies are listed 'Best First'.
Re^2: cgi scripts running javascript and passing control back and forth
by yaconsult (Acolyte) on Jan 05, 2011 at 02:26 UTC
    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} )
                    ]
                )
            ]
        );
    }

    [download]

    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!

[reply]
[d/l]
[reply]

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

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

In Section Seekers of Perl Wisdom